Problem:
After reviewing the international student focus group findings, it became evident that the secondary menu wasn't recognized as a menu on smaller screen sizes. We needed to explore alternative methods to display this menu on smaller devices in a more recognizable way.
Objectives:
We aimed to better understand user goals and how they interacted with the website, starting from their initial landing point and identifying typical tension points.
Solution:
We worked on creating a better navigation system for the Program Pages, ensuring that this solution also functioned for other basic pages across the site utilizing the secondary menu to organize menu links.
Project Ownership: Lambton College; Corporate Website Product Development Manager: Sarah Fraley, Developer: Zachary Kucera, Web Design Leads: Sherri Morrison and Sarah Leeson.
Services
Creative Coordination
User Interface Design (XD)
User Research
Journey Mapping
Student Personas
Before diving into any official changes to our navigation systems, I made it a priority to truly understand who our users are and what they're up against. After all, with such a diverse range of people interacting with the college website daily, each in different stages of life with unique needs, it was crucial to get a clear picture.
Adding a Tertiary Menu
The main issue identified during user testing was the tendency for users to overlook or miss the program and basic page menu links located outside of the main navigation. We knew we needed to update the secondary navigation system specifically, but first we needed to find a way to separate some of those links to help simplify the experience and make it more smooth. To achieve this, we explored methods to separate certain links, aiming to simplify navigation and ensure a smoother user experience.
To gain deeper insights into user interaction with the program pages, I took the initiative to create a user journey map. This map, informed by insights from focus group testing, served as a valuable tool in pinpointing areas where users encountered the most difficulty in locating information.
Design Solution
After researching how other successful websites display multiple menus at a time, we decided that adding an tertiary menu onto the actual Program page was a necessary move. This is when I pitched to add this additional menu just after the Overview blurb where users could see it straight away without feeling distracted or overwhelmed.
Updating the Mobile Secondary Menu
One of the other problems we noticed during testing, especially with international students, was that students couldn’t always locate the secondary menu on mobile devices. The previous mobile menu bar had an outdated design and confusing functionality. More significantly, it was positioned at the bottom of the screen, an unconventional placement for an educational website. Although it may have been viewed as an innovative way to relocate menu items, it only created more user problems.
Originally, the concept aimed to mimic an app interface, capitalizing on the convenience of thumb-friendly buttons. However, this approach proved less than ideal for a diverse user base encompassing students, graduates, mature students, international students, faculty, parents, and more. In fact, a significant portion—2 out of 5—mobile users failed to utilize the mobile secondary navigation at the bottom of the page.
This led me to propose a solution: anchoring the menu to the top of the screen for familiarity and removing a few button functionalities to enhance usability and streamline the design.
Other Concepts
In Conclusion
Now that the secondary and tertiary menus have been updated, the navigation better suits the users’ overarching goals on different page types. Users no longer have multiple roadblocks with locating the essential information they need to progress, whether it's initiating the application process or accessing relevant student support resources.