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:
New web apps
Updating the current listening web app
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:
New/Infrequent Users
Concerned Citizen Scientists
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.
Concept 1 Desktop- Red
Concept 2 Desktop- Yellow
Concept 1 Mobile- Green
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.
Red, Yellow, Green, Blue
Yellow, Red, Blue, Green
Red, Yellow, Blue, Green
Yellow, Red, Green, Blue
Each moderator guide followed the same structure, the only difference was the order in which concepts were presented.
It started with the introduction to the session, asking for permission to record, and going over each step the participant would take
I then sent them a link to the first desktop concept they would provide feedback for and they shared their screen
I asked for their feedback on the header navigation bar before selecting anything
I then asked them to scroll to the footer and provide their feedback before selecting anything
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
I asked them follow up questions as appropriate
I sent them a link to the MDTK, and they chose their 5 words and told me why they chose each one
I repeated the process for the second desktop concept
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