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
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.
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.
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.
InVision gave us a platform to converse about specific design elements, enabling quick iteration.
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.
Through UserTesting.com we reached people who would have a "new client" perspective on the product.
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.
A pop-up leads people to the new navigation in a friendly tone.
We outlined when and how the pop-up would close to ensure it had been consciously seen by the viewer.
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
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.