Science in the Classroom: Comprehensive site redesign and migration

A project of The American Association for the Advancement of Science (AAAS), Science in the Classroom is “a collection of annotated research papers and accompanying teaching materials designed to help students understand the structure and workings of professional scientific research.” The goal of this redesign was to improve the overall user experience of the site, including making it responsive, updating the design, and adding features to help teachers use the papers more effectively in their classes.

Science in the Classroom was a full redesign and migration project from D7 to D8.

Design & user experience

One of the main goals of the project was to improve the overall design and usability of the site. A big part of this was making the site work great on mobile devices. With about 20% of site traffic already coming from phone and tablet devices we knew this would help existing users and encourage user population growth through the mobile interface. The bounce rate was significantly higher and session duration for mobile and tablet clearly showed the site was not a good experience for users on smaller screens.

Scientific papers differ from standard reading experiences, and as such our creative and development skills stretched to bring elegance and ease to the practice. Compared to standard web content, annotated scientific papers are often very long, require legible mathematical formulas, superscripts and subscripts. We worked to bring these complex features together and still attain a pleasant experience across devices.

To achieve these goals we worked in collaboration with a designer who knew the AAAS design aesthetic well to come up with something that was more than just a visual improvement. We combined those insights with our expertise in web typography and accessibility standards to improve usability across devices. Particularly, the typographic system scales smoothly across screen sizes, and mobile navigation patterns keep annotation viewing features at readers’ fingertips at all times.

Budgeting for performance

A performance budget is a target for how fast your site loads and its total download size. It has been well documented how quickly people give up on a site if it takes too long to load, so performance is one of the most important aspects of modern web design. To establish the budget we tested the existing site and several other related or similar sites. We then set a target 20% lower than the best examples since this is the threshold at which people are able to sense a difference. If you want to know more about performance budgets, have a look at our post on the subject.

Establishing a performance budget at the beginning of a project helps by creating an initial constraint to work within when making decisions about design, features, and development approaches. There are places where one or all of these factors can dramatically affect how fast a page will load, and often there are other options that will combine to create a better user experience when load time is factored into the equation. This data is an eye-opener for many clients who have become used to their site and can overlook what the experience is like for new users, especially those on slower network connections and lower-powered mobile devices.

In the end we were able to beat our targets and create a site that looked great, met the goals of the organization and users, and is a joy to use. We reduced the average page loads by around 67%!

Migration & annotation

One of the factors that lead us to rebuild the site using Drupal 8 was the new built-in content migration functionality. A lot of work had been done by the Drupal community to ensure that migrating from Drupal 6 or 7 is as easy as possible. While we still had to map the legacy content to the new design and do some manual cleanup, overall the process was very quick and easy compared to migration projects we’ve done in the past.

As part of the redesign we wanted to make sure the site’s content was split out into the appropriate fields. This helps maintain design consistency by removing styling options from the admin interface as much as possible. This also has the added benefit of letting the content creators focus on the content and not worry about styling text or layout. We also improved cross-linking throughout the site by automating the links between papers and authors. This kind of architectural change is often difficult to automate but is really worth it in the long run.

The “Learning Lens” is a sidebar panel which shows the categories of annotations, each with checkboxes to turn the highlighting on and off. As the site’s tagline makes clear, annotations are the whole point of this site—so it was important we got the Learning Lens feature right on the new site. We collaborated on an integration with the Hypothes.is team to use their tools to handle the annotations for the site. To ensure all functionality carried over to the new site, we had to rewrite the code to work with Drupal 8. The annotations aren’t stored in Drupal, which allows for use within the structure Hypothes.is envisioned and means migration was avoided. The functionality worked beautifully and as intended once the code was in place.

Behind the scenes, Hypothes.is provides a powerful authoring experience which makes it easy for teams to collaborate on writing and editing the annotations. On the front end we made several design improvements to bring the annotation popups in line with the site and Learning Lens design aesthetic and add the Lens name in the header of the popup.

Wrapping it up

With the number of moving parts on this project, there was certainly a lot to coordinate—but both the client and the Isovera teams did a fantastic job staying nimble, adjusting for unforeseen complications, and in the end delivering results that far exceeded expectations.