Global Navigation Redesign

Timeline

Duration:

8 Weeks

Study Presented:

10/31/2023

Methodology

  • Concept Testing

Team

My Roles:

  • UX Project Team Lead and Researcher

Collaborators:

  • 3 UX Designers

For a full case study explanation, including study process, please schedule a case study review with me either through the contracting agency that is representing me for the role you are hiring for or via my email.

Problem Space

The Orcasound website allows concerned citizens and professional scientists to listen to streaming underwater microphones, called hydrophones, installed in different locations of the Salish Sea. Since 2020, I have been involved in multiple UX redesign projects for the website including leading a UX Research project team to run an open card sort study that defined the sitemap for the main content-oriented website, which internally we refer to as Orcahome.

Orcahome contains a lot of content focused on educating users on marine conservation and bioacoustics, how to get involved with Orcasound and our network partners, and directing people to the listening web app so they can access the hydrophones in our network during a Southern Resident Killer Whale (SRKW) listening event.

In 2023, six active UX project teams worked on different types of UX projects within the Orcasound website ecosystem:

  1. New web apps

  2. Updating the current listening web app

  3. Redesigning and designing new content pages for Orcahome

As different team designed within the context of their project, they were each redesigning the global navigation header and footer bars. This was causing misalignment between teams, and a single header and footer navigation needed to be designed. I wanted to make sure that there was alignment across all UX teams for the design of the main website navigation.

Previously designed navigation bars

I formed a global navigation UX team to tackle this challenge. After the designers put together 2 concepts each for desktop and mobile header and footer navigation bars for a total of 4 concepts, I planned and executed a concept testing study.

Study Impact

Based on participant feedback, I recommended the desktop and mobile concepts for the header and footer navigation bars that best met user needs. I also recommended what nav items should be included in the header and footer, what features participants found valuable, and what visual elements aided in communicating navigation options the best.

I formally presented a deck with my recommendations to the Global Navigation UX Team. I also wrote a user story in GitHub that I assigned to designers on the team.

Recommended Desktop Header Navigation Design

Recommended Desktop Footer Navigation Design

Recommended Mobile Header Navigation Design

Recommended Mobile Footer Navigation Design

Although I recommended these concepts based on participant preferences, I also made recommended significant changes to the information architecture and functionality to align with both participant feedback and web conventions. These recommendations were included in the user story I assigned to the main designer of the project.

Since the concepts tested were early design work, UX Designers on the project team will next create a single design for desktop, tablet, and mobile. Then the desktop and mobile designs will be tested in a formal usability design. The team will discuss whether the design is ready to be sent to development, or do another round of design work and usability testing. When the designs are ready for development, they will work with a Product Manager to write user stories and assign software developers on the team to deploy the navigation bars to Orcahome.

Research Process

I began by writing a detailed study plan document. Since this was an exploratory comparison study, the goal I was interested in was to get high level feedback for 2 concepts for both desktop and mobile for a total of 4 concepts from 3 Orcasound personae:

  1. New/Infrequent Users

  2. Concerned Citizen Scientists

  3. Professional Marine Scientists

I wrote 2 study objectives:

1.) Gather user feedback and preference data for 2 navigation header and footer concepts each for desktop and mobile

To address this objective, I wrote questions to understand participant feedback of the concepts before interacting with navigation elements and then while they were selecting navigation elements. I also asked them for their preferences of individual elements and which concept they preferred for each desktop and mobile.

2.) Understand user attitudes and why concerning each concept for each device type tested

To address this objective, I prepared the Microsoft Desirability Tool Kit (MDTK) instrument, in which participants reviewed a list of 25 words and chose 5 that described their reaction to the concept. I then asked them to explain why they chose each word. The list of 25 was chosen from a master list of 118 words that have been included by the instrument creators. To choose the 25 words, I asked UX team members to select their own 25 words, and I stack ranked the most commonly chosen words.

Using ChatGPT, I randomly assigned each concept a color, so that by calling a concept 1 or 2 didn’t unintentionally assign value to one concept over another.

  1. Concept 1 Desktop- Red

  2. Concept 2 Desktop- Yellow

  3. Concept 1 Mobile- Green

  4. Concept 2 Mobile- Blue

I wanted to reduce bias in feedback, so I wrote 4 moderator guides with different orders that the concepts would be presented to participants.

  1. Red, Yellow, Green, Blue

  2. Yellow, Red, Blue, Green

  3. Red, Yellow, Blue, Green

  4. Yellow, Red, Green, Blue

Each moderator guide followed the same structure, the only difference was the order in which concepts were presented.

  1. It started with the introduction to the session, asking for permission to record, and going over each step the participant would take

  2. I then sent them a link to the first desktop concept they would provide feedback for and they shared their screen

  3. I asked for their feedback on the header navigation bar before selecting anything

  4. I then asked them to scroll to the footer and provide their feedback before selecting anything

  5. Next, I asked them to interact with the header and footer navigation bars, telling them to think out loud as they selected different navigation elements

  6. I asked them follow up questions as appropriate

  7. I sent them a link to the MDTK, and they chose their 5 words and told me why they chose each one

  8. I repeated the process for the second desktop concept

  9. Then, I asked them about elements from both concepts that they preferred, and finished with which concept they preferred

I then asked participants to access the meeting using their smartphone, making sure to turn down their volume and turn off the mic setting to prevent audio feedback. This proved to be a challenge, as participants tended to be unfamiliar with Google Meet settings on their smartphone. After successfully accessing the meeting and sharing their screen, I guided participants through the identical process for mobile concepts that I did for desktop.

After finishing all 5 sessions, I synthesized all participant feedback in Miro. I focused on preference data and suggestions for improvement. As I put my final report together, I found that the MDTK data was not helpful- most of the feedback for all concepts was positive, and the few constructive words chosen did not find high agreement across participants.

I put together a formal deck and presented to designers in the navigation project team and all interested cross functional UX team members. I also wrote a user story detailing each of my recommendations and assigned it to the lead designer.

I was able to identify areas for improvement based on participant feedback of preferred features and concepts as well as conventional web practices The main designer agreed with the recommendations, and was eager to design single header and footer navigation bars for desktop, tablet, and mobile.

What I Learned

Even though this wasn’t my first concept study, I was able to learn quite a bit as I was also the project lead and directed the design work for the concepts.

I learned:

  • If I were to run this study again, I would not use the MDTK because it ended up not being a useful tool for eliciting design recommendations

  • Although I know that the hamburger menu was not conventional for desktop header navigation design (with some exceptions for content heavy websites- e.g. Amazon), I allowed one concept to include this approach- for future concept studies, I would not allow unconventional design like this to be part of a study

  • For future concept studies, I will advocate for unique designs for concepts so that more design ideas can get more robust feedback- the concepts did not have unique footer designs across device types

  • Participants often started selecting navigation elements when I instructed them to give me feedback on what they saw before interacting with the design- I plan to initially provide an image of the concept or temporarily turn off hotspots in the prototype so I can gather feedback about the design without the participant selecting interactive elements

  • I plan to send out invites 2 weeks before study launch to make sure that sessions can be scheduled sooner and the study can be completed in a shorter amount of time