Navigation case study

Problem

GRIN’s navigation was complex and confusing for its users. Users are marketing managers who run multiple complex campaigns featuring many content creators.

Additionally, the navigation had accessibility issues, such as being icon-based.

Research

I led the navigation project and started with research, collaborating with a product designer, engineer, product manager, customer support, and marketing.

Research steps and insights included:

1. Reviewed analytics about the most frequently used navigation items in Google Analytics and user flow paths in Fullstory.
   
   Insight: Users only used some of the navigation items. Some they didn’t use at all or used infrequently, like settings and notifications.

2. Performed a navigation audit of competitors’ navigation structures, including creating a matrix outlining primary, secondary, and tertiary navigations and terminology analysis, identifying opportunities.
   
   Insight: Navigation presented a competitive opportunity since competitors’ navigations faced the same issues.

3. Conducted user interviews and reviewed existing interviews in Dovetail. I learned that users were confused about some navigation labels that were repetitive or non-intuitive.
   
   Insights: Users preferred different terms than some of the ones we were using as labels. Users called GRIN’s navigation “complex”.

4. Created an object (OOUX) analysis and ran an OOUX workshop with product managers and product designers that identified GRIN’s object relationships and alternative navigation structures.
   
   Insight: Navigation items weren’t in the order of the creator management process. This made it harder for new users to learn the process since some users were also new to creator marketing.

Design and iteration

Design steps included:

1. Mockups in Figma: I collaborated with the product designer by creating lo-fis. The product designer refined these and created hi-fis.

2. Internal testing: We shared the test, including a card sort and clickable hi-fi, with product, engineering, marketing, and customer service for buy-in and feedback before testing with users.

3. User testing of the hi-fi mockups: We tested new and existing users.

Navigation changes included:

• Moved from vertical left navigation to horizontal top navigation, allowing more horizontal room for content (largely table-based).

• Reduced primary navigation items to the most useful ones, improving learnability. Moved settings items to secondary navigation.

• Arranged labels in the order of the creator management process.

• Renamed some primary navigation items for clarity.

• Shifted from icon-based navigation to label-based navigation, improving accessibility and reducing cognitive load.

• Took users to a new home page after selecting the GRIN icon instead of popping out the navigation to reveal labels. This is what users expected.

Before:

After:

Results

Testing revealed that navigation changes improved findability by 30% (e.g. where would you go to find new creators to work with?).

I worked with product management and leadership to get the navigation project prioritized for development.

Previously, users stated that GRIN’s navigation was too complex. After implementing the changes, most respondents rated GRIN’s navigation as easy-to-use!