Navigation Redesign
Introduction
This project was for an e-learning company with over 3.5 million users in 4 countries that delivers training across the healthcare continuum through learning, assessments, and analytics solutions.
My roles and responsibilities on this project included...
- leading the user experience design through user flows, wireframes, and iteration.
- leading user testing sessions to converge on a design that satisfied user goals.
- articulating design decisions to product and executive leadership that satisfied business goals.
- leading high fidelity prototyping and interaction design to polish the experience.
- collaboration with Scrum team to ensure design requirements were met.
Design Challenge
Accommodate new features and functionality while improving information architecture, user flows, and key task times.
User Research
I began with the two personas who account for more than 95% of the Relias LMS user base: administrators and learners. Each has a very different experience in the Relias LMS and each has different navigation views as a result of user role.
Administrators typically logged into the application for 2 to 8 hours every day and have an abundance of functionality and options. Their main tasks typically involved creating users and training plans, assigning training, and running reports. Furthermore, these tasks were tedious and repetitive and required touching as many as 8 pages to complete. This workflow highlighted the primary administrator frustration and roadblock to quicker task times: inaccessible navigation items.
The primary level navigation (horizontal across the top) and secondary level of navigation (vertical along the left) existed as two separate entities.
The primary level was always visible regardless of where an administrator was in the application.
The secondary level, however, was always tied to a specific page. This meant that sub-levels of navigation could only be accessed through a single point: a primary navigation item. Administrators would have to click a primary navigation item and load the page just to make their actual desired selection from the secondary navigation.
Learners typically logged into the application 1 to 3 times a quarter and wanted to spend as little time as possible to complete their task which was to complete assigned training. Due to stressful working conditions and low pay, taking more time out of the day to complete mandatory training was one of the last things they wanted to do. This presented a design challenge: the design solution needs to be able to scale to accommodate everything from low-access learners to high-access administrators.
Wireframing
The first design option stacked an icon on top of it's associated label. This substantially reduced the space that was previously occupied by the horizontal navigation across the top of the page. It brought the content of the page closer towards the top of the viewport. It grouped all navigational elements in the same space on the left side of the viewport.
How does this design scale? This design is at it's best when the navigation is simple and the architecture of information is relatively flat. Keeping in mind the learner persona, this design appears to be a strong candidate for simplicity and ease of getting in and out as quick as possible.
When the navigation scales to become increasingly complex and the architecture of information is dense, this design doesn't appear to be as strong when thinking about the administrator persona. How would an administrator access secondary or even tertiary levels of navigation? Would each successive level fly out to the right? If I move my cursor just so and it slips off the flyout do I have to start over again?
The second design option placed an icon inline with it's associated label. This design also substantially reduced the space that was previously occupied by the horizontal navigation across the top of the page. It also brought the content of the page closer towards the top of the viewport. It also grouped all navigational elements in the same space on the left side of the viewport.
How does this design scale? This design is at it's best when the navigation is complex and the architecture of information is dense. Keeping in mind the administrator persona, this design appears to be a stronger candidate when navigating the wealth of functionality and options they're presented. This is especially true if each primary navigation section expanded and contracted vertically in an accordion interaction if secondary and tertiary items existed.
When the navigation is simple and the architecture of information is relatively flat, this design still appears to hold up well. Keeping the learner persona in mind, presenting limited options that drive task completion, reduce task time, and get the learner in and out make this option viable.
User Testing
The stacked and inline navigation layouts were tested with 35 Relias clients and 160 random participants using UsabilityHub's online recruitment. The stacked layout was preferred for its aesthetic by a ratio of about 2:1 over the inline layout. The inline layout was overwhelmingly preferred for its function and ability to scale. Participants responded positively at the concept of an accordion that progressively discloses information from any page. In contrast to the user's flow when mapped through the current application, the user's flow when mapped through the inline navigation is streamlined while making navigation items accessible from any page.
Measurement
Initial qualitative feedback on the navigation redesign has been very positive. Quantitatively, Google Analytics has been tracking user flows through the application and the new design has reduced pageviews on a bottleneck page by 98%. This is a direct result of users being able to access all navigation levels from any given page.