Unifying UAL's website navigation for the main website and short Courses. As well as, creating a blueprint navigation framework that will be used as part of the design system to be used across multiple products.
Methods: Guerrilla testing, online user testing, lab testing, Stakeholder ideation sessions, stakeholder management, workshops, focus group sessions
Tools: Figma, Hotjar, Optimal Workshop
2019, 6 months
UX Designer and UX Researcher
Academic Enterprise (AEMSS) aka UAL's Short Courses department had an issue with allowing users to search other short courses from different subject areas, but the user would need to start the whole user journey from scratch. The challenge was to keep the design language for the whole website consistent and communicating to the user that they are on the Short Courses space.
Moreover, how might we cut down 500 menu items and refine the key user journeys?
We first started the project by analysing existing data from our yearly survey, which receive 16,864 submissions. As well as, analysing user actives from Google Analytics.
An audit of competitors who had similar products and sub websites within a navigation such as, the BBC, Goldsmiths University and more to get ideas on how they developed their navigations.
An audit to collate all of the items existing in the global menu (350 items) and across all of the college menus (150 items each), which will be used for focus group sessions and user testing through Optimal Workshop's treejack testing.
Old: When a user was exploring the short courses but want to view a different subject type they would need to restart the user journey from the start to be able to view subjects within the Short Courses space
Current: With the new version of the navigation a user Is able to view different subjects within the Short Courses space by using the 'Subjects' dropdown options which focuses on the Short Courses subjects, but also have the option for selection the global subjects.
-
With Optimal Workshop a more focused taxonomy test was able to be done. This test provided questions on how to find a page or where a piece of content would exist within the menu.
The results of the test helped to feed into the stakeholder workshop for cutting down the amount of menu items.
Six main stakeholder groups selected based on the main menu areas, which were Marketing, Student services, Language centre, Short Courses, Accomodation ad Research. With these groups workshops were organised to do card sorting to decide what were the main items to keep and remove from the menu
Since the main users who use the menu are students guerrilla testing sessions with card sorting activities were done to find out what menu items were important for our users.
The taxonomy of the menu items is a much deeper project, but summarised for this project.
It was important to communicate the reasoning behind the navigation changes and why it was important to do this project to improve the overall experience for the user.
-
The inspiration for this navigation came from Google's search result page sub menu. The function will use swipe gestures to view other options.
A discussion guide was created to form a standardised criteria, but guidance on how to make a fair testing scenario.
With the prototype and discussion guide I was able to perform the guerrilla test. 5-6 random students from various backgrounds were given the test.
The results for this style of navigation was quite negative, due to the unfamiliar design function and pattern. Therefore, a different solution needed to be created.
From the feedback provided by the first guerrilla test I was able to find a new solution, which used a more familiar pattern.
The new design pattern utilised a slide out menu, which removed 7 out for 10 items from the navigation top. Moreover, drop downs for the 3 remaining items were introduced. This allowed for enhanced navigation with college and short courses spaces.
The second guerrilla testing used a different version of the navigation by utilising a dropdown feature to allow the user to see what area (Global, College or Short Courses) they are currently in, but also to switch quickly between services.
The users expressed that the navigation had logic and style, which both helped the users to complete the set tasks for the testing.
From the annual suvery form hosted on arts.ac.uk 90% of users found the new navigation and menu content greatly improved the overall experience for navigating the website and discovering content
AEMSS Project Manager
Student
Staff
During an accessibility workshop provided by DAC the UX team was able to get direct feedback on accessibility for the navigation. One of the main issues was the lack of trigger tag for the 'Menu' button, which was quickly fixed by the developer team.
The heat map produced from Hotjar showed positive adoption of the new navigation design pattern, the navigation menu button and 3 menu items has the highest amount of clicks. Moreover, there navigation items lead to the most successful user journeys, which was highlighted by Google Analytics.
It was a great experience to do research and facilitate focus group sessions with various stakeholders to find the key wants, needs and concerns they have with the existing navigaton. As well as, doing guerrilla testing, online user testing and lab testing to gain insights to shape the taxonomy and to communicate details with UALs stakeholders
The framework for the navigation was a success, which has led to other UAL's products uilising the component with positive feedback.
Continuing the taxonomy is very important for improving the user jouneys and formation architecture of the website. Furthermore finalising the frameowrk and guidance for menu taxonomy guiance is key for maintaining the quality and will be the next step for completinig this project.