UAL: Navigation and Menu Taxonomy

Project summary

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 & Tools

Methods: Guerrilla testing, online user testing, lab testing, Stakeholder ideation sessions, stakeholder management, workshops, focus group sessions

Tools: Figma, Hotjar, Optimal Workshop

Year & Duration

2019, 6 months

Role

UX Designer and UX Researcher

Problem statement

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?

Discovery

Data Analysis (Hotjar)

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.


Competitor Analysis

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.


Menu Items

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 and Current Comparison

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.


Discussion Guide: Guerrilla testing

-

Define

Treejack Testing

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.


Taxonomy Workshops

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


Card Sorting with Students

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.


Defining User Journeys

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.


Ideation

-


Navigation UI Development 1

The inspiration for this navigation came from Google's search result page sub menu. The function will use swipe gestures to view other options.


Discussion Guide: Guerrilla testing

A discussion guide was created to form a standardised criteria, but guidance on how to make a fair testing scenario.


Guerrilla Testing 1

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.

Develop

Navigation UI Development 2

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.

Deliver

Guerrilla Testing 2

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.


Survey Feedback

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


"This looks to me fantastic, a great solution for both AEMSS (Short Courses) and WSI!"

AEMSS Project Manager


“It was easy, I think it was easy to navigate. Also, having pictures helps”

Student


“That’s quite cool, seeing the ‘grid of options’ is helpful”

Staff

Analysis

Accessibility: DAC

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.


Hotjar

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.

Personal Reflection and Next Steps

Personal Relection

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


Next steps

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.