Reorganize and redesign the navigation for a school website content management system to reduce confusion and improve usability.

Antiquated navigation no longer met the needs of the product’s users. 

Problem

Vocabulary and organization of existing navigation items impeded findability and deterred exploration of underutilized items. Additionally, the static table-based layout prevented easy access on small screens and limited flexibility on larger screens.

Project goals

  • Reduce confusion
  • Better information architecture
  • Increase awareness of certain features and increase findability
  • Mobile-friendly
  • Better branding

Team

VP of Product, 3 UX and UI Designers (including me), Front-end Developer, Software Engineer, plus people in supporting roles in QA, marketing and development

Role / contribution

UX research, user testing, information architecture, interface and visual design

Tools

Card sorts, UserTesting.com, Adobe Illustrator, InVision and Confluence

Deliverables

Card sort data analysis, style guide, UI pattern library, wireframes, prototypes, site map, onboarding, final designs and design specs

 

Process

Internal participants sorted navigation items into groups that made sense to them.

Discovery & research

The VP of Product conducted the initial discovery research during which the navigation emerged as a key component of a bigger solution.

We, the UI and UX Designers, analyzed competitors’ solutions, researched best practices for responsive navigation and captured the current state of our product. As an internal hire with experience problem solving with clients, I took the lead on the navigation project while my teammates took on two other key projects. 

All items from the top, side and bottom navigation, became cards in an open card sort which I conducted with internal participants on paper cards and conducted with external participants through UserTesting.com and OptimalSort.

 
 Key questions asked during the card sort data analysis guided my recommendations.

Key questions asked during the card sort data analysis guided my recommendations.

Defining the information architecture

After analyzing the card sort data and information gathered through interviews, I recommended a new navigational structure which would also serve as the foundation site map for the product moving forward. Further testing with clients guided the clarification of a few lingering vocabulary issues.

Once we were pretty certain of the new organization and name changes, we began to roll out those changes while keeping the look of the navigation relatively unchanged. Not only was this easier for our development team to implement, it also let our clients and internal teams become accustomed to the changes incrementally and allowed us to test our decisions more completely.

 
 A catalog of the grey colors currently in use highlighted one way we could simplify the UI.

A catalog of the grey colors currently in use highlighted one way we could simplify the UI.

 In an icon library we captured the icons we would use for each navigation item.

In an icon library we captured the icons we would use for each navigation item.

Defining the style guide / visual vocabulary

In the initial discovery and current state analysis we found significant inconsistencies in the visual vocabulary and language, causing many pain points throughout the product. Thus, we needed to set some standards before continuing.

We, the product team, collaborated closely with the development team to create a UI library including responsive guidelines, icons, typography, color and all manner of visual elements such as buttons, page titles, modals and messages. In Confluence we built an organized space to record and share our decisions with the company.

 
Navigation-branding-removed-invision.png

Design iterations and user testing

As the UI library started to come together, I sketched various ideas for the look of the navigation based on a combination of best practices and navigation interfaces that our clients were already familiar with from other contexts.

Constraint
At this point we did not have a very big pool of volunteers from our user base and did not yet have a method of connecting with our users en masse. So I created a Google Form for the technical support team to report any clients who submitted tickets frequently. This way we could reach out to people engaged with our product.

During the design iteration process I reached out both internally and to product users to determine what adjustments needed to be made. Having several different InVision projects allowed for focused conversations–some shared internally for detailed discussions, some for user testing and some for exploring the UI on specific screen sizes.

Additionally, since the navigation holds a key role in defining the future look of the CMS, I worked directly with internal stakeholders and the marketing team to set the branding, tone and color palette of the navigation.

 
Navigation-branding-removed-tour.png
tour-user-flow

Onboarding

This would be a big change for our clients as they were used to having the entire navigation visible on the left side and the new design had items collapsed in a hamburger menu. To help ease the transition we wanted to lead them to the new navigation location. To that end I designed onboarding for the first time someone visited the CMS after the navigation update.

 

Results

navigation-final-branding-removed-3-sizes.png

To see if we had reached our project goals, such as reduced confusion and better IA, we looked for increased engagement and frequency of sessions.

Frequency of sessions up significantly

  • Number of sessions up
  • Days since last session down

Engagement up significantly

  • Session duration up
  • Number of pages viewed per session up

Lessons

At the time of launch, we had limited methods of outreach to current clients and thus they were surprised by the upgrades. While quickly embraced by some, others were understandably upset by the change to their routine. Subsequently, multiple means of outreach have been established to give people a heads up about changes.