Designing intuitive UX for the Marine Biological Laboratory

Over the course of this project, we completely overhauled the web presence of a leading biological laboratory. I led all UX research and design efforts, including user and stakeholder interviews, tree testing, and wireframing.

Some information is removed or modified due to confidentiality.

Project overview

The Marine Biological Laboratory (MBL) is a collaboration hub for students and scientists investigating fundamental biological research. However, their website was difficult to navigate and did not sufficiently highlight the content both stakeholders and users were looking for. It did not reflect the groundbreaking nature of the research and education done at the lab sufficiently engage its key audience.

Goals

Simplify the site's information architecture
Ensure all users are able to easily find the information they were looking for
Maintain the identities of the unique research centers that make up the MBL
Capture the experience of being at the MBL in their web presence

The team

Product owners

UX manager (me!)

1 VP of UX and

Brand Innovation

UI Art Director

Developers

Key stakeholders

The process

Workshop - understand client needs and known user pain points
User and stakeholder interviews - develop protocols and conduct 45-minute Zoom interviews
Analyze and strategize - synthesize findings and develop a UX strategy
Develop and test navigation - create new site-wide information architecture and refine it with tree testing
Wireframe and iterate - develop in-page information architecture and create unique solutions to meet user and stakeholder needs
Handoff to UI and developers - walk through documentation, research findings, and UX design intent to ensure a successful launch

Step 1: Workshop

To understand key stakeholders' goals and pain points with the current website, the team conducted a two-hour kickoff workshop. During this workshop, we collaborated with our client to:

Identify hypothesized user groups (e.g., faculty, students, summer researchers) and what their needs might be
Specify key functionalities stakeholders required
Pinpoint key goals and success factors, including:
- Reduced emails to summer organizers regarding where visiting researchers can find important information and forms
- An intuitive information architecture where users could find what they need in seconds, instead of leaving the site and trying again through Google
- A web presence that reflected the groundbreaking work of scientists at the MBL

Step 2: User and stakeholder interviews

To address stakeholders' concerns and uncover user needs, we conducted semi-scripted interviews with 12 users and 6 stakeholders. We developed a protocol asking questions like:

What are the three most common reasons you go to the MBL's website?
What are the most frequent issues you have with the site?
Are you generally able to find what you need on the site? How do you go about doing so?
What is unique about experiencing the MBL in person? Do you feel the website reflects that experience, or not?
If we could make just one change to the MBL's website to improve your personal experience, what would you ask us to do? What are your reasons for that?

Asking these questions in an open-ended format allowed us to dive deep with our interviewees, creating a full picture of their needs, wants, and pain points.

Step 4: Develop and test navigation

Insights from user and stakeholder research told us that neither group found the website's information architecture to be effective or intuitive. The navigation also wasn't accessible, relying on multi-level hover flyout menus. The flyout menus also buried content, including content users said they liked best.

old MBL navigation showing hover flyout menu

The main menu itself contained 8 categories, and the utility menu contained 5, for a total of 13 items. This made for an overwhelming experience, especially because some of the words - like "Convening" - didn't mean anything to users.

To address these issues, we simplified the language, reduced the number of items in the navigation from 13 to 8, renamed key pages, and reorganized the site's information architecture to match users' mental models. We also eliminated microsites.

We conducted an unmoderated Treejack tree test with 31 users to assess the efficacy of these changes. Tasks were written to test whether or not users were able to find important resources, such as summer science registration forms. After one additional round of revisions, users were 62% successful at identifying the correct answer to tree test tasks - an over 30% improvement. Due to budget constraints, we decided to go live with this new version of the navigation, and potentially revise in a few months with additional user feedback.

new simplified MBL menu with fewer categories and less confusing language

Step 5: Wireframe and iterate

I collaborated with the VP of UX and Brand Innovation to create 13 wireframes with both desktop and mobile considerations. Our wireframes needed to:

Pull forward the most desired and frequently accessed content
Provide multiple means of navigation and wayfinding
Create custom solutions to the MBL's unique concerns, such as creating a one-stop-shop for featured resources and maintaining a unique presence for each research group
Highlight the lab as an innovative center for fundamental biological research
Showcase the lab's dual mission of research and education
Draw on UX best practices to increase user engagement (such as providing recommended content)

Following is an example of an internal landing page desktop wireframe used for each of the research groups. Six features are called out to highlight solutions we created for the MBL to meet both user and stakeholder needs.

wireframe with key features called out. Key features are described in the following list.

We included breadcrumbs to demonstrate the user's location in the site.
Each research center was able to create their own tagline and hero image to maintain a unique identity. By eliminating the microsite architecture and keeping the design of each page consistent, it was still apparent that they all lived under the same MBL "umbrella".
Research centers were able to highlight recent breakthroughs, which users stressed they wanted to see. It also provided a gateway to the News section of the site.
Users previously couldn't identify who was at the lab or exactly what they did, so we provided an easy link to the directory and research areas of focus.
Researchers couldn't find what the needed, so we gave them an easy-to-find toolbox that collected their most commonly used resources.
A fat footer lends a modern feel and provides users with an additional way to navigate the site.

Step 6: Handoff to UI and developers

After each wireframe was approved by the client, we conducted handoff meetings with UI and developers to ensure we were aligned on the UX intent and the most important features. Throughout the course of development, UX and UI maintained a constant dialogue with developers to ensure we delivered a beautiful site with an excellent user experience on time and on budget.