Designing Mozilla’s Science Lab Site, in the Open

Since starting at the Mozilla Foundation 10 months ago I’ve fully embraced and have become a big believer in its open culture. The last few months I’ve been working on a redesign of the Mozilla Science Lab website. The Science team staff and its community is incredibly engaged which has made the experience of working in the open even more meaningful and effective.

For those of you who aren’t familiar with the Mozilla Science Lab, it is a community of researchers, developers, and librarians making research open and accessible. We’re empowering open science leaders through fellowships, mentorship, and project-based learning.

Examples of the old Mozilla Science Lab site design

Goals for New Site as Determined by the Science Team:

  1. Create an easy to navigate site with clear ways to get involved.
  2. Redo site architecture and content to better reflect current offerings.
  3. Fold in guides and learning resources to help potential contributors get involved and learn about open source as well as project leads make their projects more contributor friendly (README, CONTRIBUTING, etc).

Rethinking the Site’s Information Architecture

The most challenging aspect was deciding on the information architecture (IA). The old site’s IA and nomenclature hadn’t been updated to reflect the most recent thinking. Distinguished by concepts like ‘Mentoring’ and ‘Learning,’ this no longer seemed the best way to organize and separate the information. Together, we took several steps to determine the new hierarchy.

1) User Personas

The Science team determined its main use cases, user stories, journeys and personas. Personas represent the Mozilla Science Lab community and were grouped by their leadership level within Mozilla Science. We want our users to move along these levels as they participate and learn in our community.

Example user persona

2) User Testing

Because the IA was most challenging aspect for this site, this was a great opportunity to do some user testing and check in with the people who actually use the site. Together with Hannah we ran a card sorting exercise with community members.

We decided on Asynchronous Card Sorting with the goal of better understanding users’ mental models of our content. We sent an unordered list of all the main content titles of the site and asked research participants to group these items and name the groupings. It was a “generative” test in that it asked users to generate their own groupings and terms, without us influencing their thought process. We had a mix of seven participants representing our target audience. They were global group from Europe, North America, and Asia and included Mozilla staff, Mozilla Science Lab Fellows, and community members, both longtime members and newbies.

From the test we learned users view the content in a literal way (ie Events, Projects, Study Groups…) and not how the old site organized content (ie Teach, Contribute, Join…).

Summary of results

3) Our Proposed IA

Based on these results, we came up with the following IA.

Creating Wireframes

Now we were ready to move on to the wireframes. This was a relatively smooth process since, based on the IA work, we knew where the content would live. We determined the hierarchy of content for each page, made important decisions about user interactions related to searching and filtering, and how best to layout the content.

Example of the wireframes

Finally, Design

We did some moodboarding to get a sense of the overall design direction and to make sure we were all on the same page.

Moodboard of overlapping elements and card style grid layout

Another goal for the redesign was to move the Science site’s branding closer towards the other Mozilla Foundation sites and the direction they’re heading. For example, we selected the Science Lab color palette based on our new Mozilla Foundation palette.

Mozilla Foundation color palette and the Science Lab’s new palette

Illustration and icon style is a closer match to the rest of Mozilla Foundation style icons — flat, colorful, clean, and playful.

The new site uses Mozilla’s open source font, Fira.

There were some design decisions more unique to the Science Lab site in order to give it its own personality. To reflect the Science Lab logo we’re using overlapping elements. This use of overlapping and floating elements also help to break out of the grid for something a little more interesting, to help lead the eye down the page, and to give the site more depth. We mixed up the overlapping elements with a more clean modular card layout style. This card style makes sections that need regular updating easy to update.

Example from the new website

Photography Style

To give the site more uniqueness we limited the amount of traditional science and data photography. The stock images we did choose to use are high quality and high resolution from unsplash.com which is an excellent source for Creative Common images.

To reinforce the community message, we mixed in images of people. Close ups of faces, imagery of people in a collaborative setting working together, helping each other, talking, and interacting with technology. Images should have a shallow depth of field and natural colors. Photos from the Science team and Mozilla Foundation are available on Mozilla Science Flickr account and Mozilla Festival Flickr account.

Wireframes and design comps were shared on our Redpen so anyone could comment and provide feedback and critique. We had lots of participants:

Lots of participants in Redpen

Engineering

While design was wrapping up dev began as a tag team effort between front-end @alanmoo @gvn, back-end @alicoding @rgideonthomas and dev-ops @ChrisDeCairos. @abbycabs, Science Lab engineer, provided guidance and support throughout the build process. Although on a tight deadline, they got everything done superbly.

To encourage community members to get involved, we use GitHub and add the tag “Good First Bug” to point out tickets which tend to be more self contained and achievable with minimal background in the project.

Science Lab repo with “Good First Bug” tag

Before launch we all participate in quality assurance checks.

Explore the New Site at science.mozilla.org

We hope this site will encourage more researchers, developers, and librarians to make their research open and accessible. It is a work in progress so if you find issues, have ideas for improvements or want to contribute to the site, please visit the Science Lab GitHub repo.