Navigation case study

Summary

Learn how research-based navigation updates increased findability by 30% and improved accessibility at GRIN. GRIN is the #1 creator management platform with thousands of users and $21 million ARR.

Role: Content Designer (project lead)
Timeline: 3 months
Tools: Figma, Miro, Fullstory, Google Analytics, Dovetail, Jira, Confluence
Team:
Christine Siu - Product Designer
Parker Burkett - Software Engineer
Jonathan Reafsnyder - Product Manager
Mustafa El Shatshat - Product Manager

Problem

GRIN’s customers gave feedback that the software navigation was complex and confusing. It took marketing managers weeks to learn the software and launch their first creator marketing campaign.

Additionally, the icon-based navigation posed accessibility issues.

Research

Leading the project, I started with user research.

Research steps and insights included:

1. Analytics: 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. Navigation audit: Audited 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. User interviews: Conducting interviews and reviewing existing interviews in Dovetail revealed that users were confused about some navigation labels that were repetitive or non-intuitive.
   Insights: Users preferred different terms than the ones GRIN used as navigation labels. Users frequently called GRIN’s navigation “complex”.

4. OOUX analysis: Created an object analysis and ran an Object-Oriented UX Design (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 hi-fi mockups: We tested new and existing users using user testing software, including analytics.

Navigation changes included:

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

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

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

• Renamed some primary navigation items for clarity.

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

• Took users to a new home page after selecting the icon in the upper left corner. This is what users expected as it’s a common pattern.

Before:

After:

Results

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

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