Partnered with the School of Education to help improve the usability of the website’s main navigation and program pages for current and prospective students.
The existing navigation on the School of Education’s website was lengthy, disorganized, and lacked relevant information for prospective and current students. The client found this confusing and frustrating, which hindered users from easily finding the information they needed. The goal was to create a more intuitive and efficient navigational structure that aligns with user expectations, enhances the user experience, and meets the diverse needs of both prospective and current students.
How might we simplify and organize the School of Education’s website navigation in order to help prospective and current students easily find the information they need?
My role involved conducting UX research, designing wireframes, and creating a new sitemap. I analyzed participant feedback to identify key navigation pain points, then used this data to design a more intuitive structure that improved user experience. My responsibilities also included presenting findings to stakeholders and iterating on designs to align with user needs.
Our team conducted a usability test using Useberry to gain insights into our users and address our research problem. The test included an A/B test, preference test, tree tests, and qualitative questions. We recruited 150 participants, with 70 completing the test. Among those who completed it, 21 were undergraduate students, and 49 were graduate students. My role was to create and set up the test, as well as interpret and present the results to stakeholders.
The first task in our usability test was an A/B test designed to determine students' preferences for identifying themselves within a navigational structure. There was some debate among stakeholders about whether the navigation should use top-level menu items titled “Undergraduate” and “Graduate” or “Future Students” and “Current Students.” One concern was that the categories “Future Students” and “Current Students” added an additional level of hierarchy to the navigation, resulting in extra clicks for users. My hypothesis was that the categories “Undergraduate” and “Graduate” would be more familiar to students and provide an easier navigational experience.
To test this, participants were shown two different versions of the website navigation: one with the menu items titled “Undergraduate” and “Graduate,” and the other with menu items titled “Future Students” and “Current Students.” Everything else about the design was exactly the same. Participants were tasked with finding the Secondary Education degree program page, which is offered at both the undergraduate and graduate levels. This task allowed for an equal chance of success in finding the page, regardless of whether the participant identified as an undergraduate or graduate student. Participants were not given any additional instructions, as the task was intended to be open-ended, allowing students to rely on their own methods for finding the page.
In the first navigation option, which used the “Undergraduate” and “Graduate” menu items, the Secondary Education degree page could be found in the dropdown menu under each of those categories. In the second navigation option, which used “Future Students” and “Current Students,” the page could only be accessed by first hovering over the “Future Students” menu item, then selecting either “Undergraduate” or “Graduate” from within the dropdown menu.
After completing the A/B test, participants were asked to take a preference test that posed the question, “Which navigational design helped you locate the Secondary Education page most effectively?” They were shown both navigation options and then asked to select their preferred one.
After selecting an option, participants were asked to explain in their own words why they chose that specific option. This allowed our team to collect qualitative data, providing a deeper understanding of the participants' choices. These responses were then coded, categorized, and sorted into themes. Here are a few of the answers we received that helped provide some insights:
I liked the distinction between undergraduate and graduate programs better. I thought that led me clearer to my path rather than future and current students.
I felt it was easier to locate the page I was searching for, as it was one listed under the drop down from the main page, instead of having to go to another page before being able to access it.
Because I would be an incoming undergraduate student.
The next part of our research aimed to understand where participants thought certain menu items should be placed within the navigational structure. To test this, participants were given a tree test depicting the current menu and asked to find a specific item. This helped our team better align the website’s main navigation with users’ mental models.
The final part of our test aimed to gather additional information about users to gain insight into how they use the School of Education website. We asked participants a series of quantitative and qualitative questions, ranging from “How often do you visit the site?” to “What information helped you decide on a major or graduate program?” Their responses would help our team design a navigation and program page that truly met participants' expectations.
We found that students preferred the navigation and located information more quickly when familiar terminology was used. In this case, students found the terms “Undergraduate/Graduate” more familiar than “Future Students/Current Students.”
Participants found information more efficiently when navigation menu items were grouped in a way that reflected their conceptual understanding. Students who completed the navigation task using the terms “Undergraduate” and “Graduate” were more efficient in finding their search topic compared to those using the terms “Future Students” and “Current Students.” This improved efficiency was due not only to the familiarity of the terms “Undergraduate/Graduate” over “Future/Current,” but also to the navigation structure aligning with users’ mental models.
Responses from our participants revealed that students who visited the site monthly or more frequently were usually searching for something specific. After coding, categorizing, and sorting these tasks into themes, our team identified the top three reasons students visit the School of Education website:
Information directly related to academic programs and degrees, including: degree & graduation requirements, PhD program timelines, future degrees, degree research, class descriptions, curriculum checks, and other academic planning details.
Latest updates, news, announcements, or events posted on the website that could affect students’ academic life or provide them with timely information.
Practical details like faculty office hours and room numbers.
I created a new sitemap for the School of Education based on research and testing results from our participants. This sitemap uses "Undergraduate" and "Graduate" in the navigation menu, along with dropdowns that best serve the needs of students.
After analyzing the research results from our participants, I designed a low-fidelity wireframe for the individual program pages to be used as a template across the School of Education. This design focuses on presenting content that aligns with key student tasks identified in the research. It specifically highlights the types of degrees available, details the curriculum, and displays relevant resources, helping students quickly find the information they need.
After gathering feedback from stakeholders on the low-fidelity wireframe, I refined the design into a high-fidelity prototype. This polished version incorporated stakeholder input and ensured the final design was visually cohesive and aligned with the School of Education's branding.
