Going vegan with mobile menus
By: Ian Batterbee
Tags: User Research, Creativity, Case Study, UX Design, Mobile

Meat-based menus 🍔 🐄

Mobile websites typically use a ‘hamburger menu’ to incorporate site navigation. Unless you’re a digital hermit, you would have already seen one in the top corner of many websites.

The hamburger menu gets its name from an icon that consists of three horizontal stacked lines: the bun (top and bottom) and the meat patty (middle); hence the nickname.

Although the hamburger menu is a frequently used navigation pattern, there is much debate as to whether it gives a good user experience.

The case study

I work in a UX specialist team of awesomeness. The setup includes a UX Researcher, Web Analyst, CX Analyst, CX Change Manager, and me — a UX Designer. Together we discover and solve problems and innovate ways to make better user experiences.

Our recent case study was to improve the efficiency and effectiveness of a mobile menu used in our insurance websites. Although it wasn’t an actual hamburger menu, it had similar features to one.

We wanted to test and learn alternative navigation designs to help users find important features. Similar to a hamburger menu, the existing design obscured site navigation and acted as a potential barrier to entry.

We proudly named the initiative: ‘Vegan Menu’.

A vegan menu is a name given to a website feature that does the opposite to a hamburger menu (a fully exposed navigation). I often chuckle at the irony.

Groundwork

Our number-crunching Web Analyst made some initial investigations on our existing mobile menu. When inspecting user behaviour across all websites, there was an insight discovery:

Website analysis showed that usage of features within the navigation menu was 50% lower on mobile sessions when compared to desktop.

The analysis led to the assumption that mobile customers were struggling to find the functionalities within the mobile menu. The lack of online interaction could result in unnecessary (and expensive) contacts with customer service channels.

Here were some possible reasons on why mobile users were struggling:

Obscured navigation and key offerings

No direct path to important features

The mobile menu is positioned in a hard touch target

With the analysis completed and a list of theories thought up, we came up with the following hypothesis to test:

To make the mobile menu more effective and efficient, it must enable users to instantly access site navigation.

Once we had carried out our initial investigation, the next step was to undergo a process of test and learn: a UX design process

Undergoing a UX design process

Group hand fist pump; this is what we do. Well, most days

To quickly test and learn the best possible solution without investing in development, we underwent an iterative UX Design process that consisted of the following key phases:

Ideation 💡

Design ✏️

Test 🧪

Iteration ⚙️

Ideation 💡

To kickstart the UX Design process, we began a round of ideation. During this phase, we generated a spectrum of ideas by analysing existing customer metrics and challenging assumptions.

We sketched plenty of mobile-first designs with the focus on making features currently within the navigation easy for customers to find.

Once we agreed on the ideas we thought would best solve the problem, we were ready to take our UX Design process to the next phase in design.

Design ✏️

To quickly test our ideas, we translated our sketches into seven functional wireframe prototypes and then uploaded them to InVision, an online prototyping tool. We even decided to include a hamburger menu design to gain insight into how people perceive and use them.

Here are the concepts that we turned into wireframe prototypes:

1 Button menu (control/existing):

The existing mobile menu; a simple button with similar functionality to a hamburger menu

The existing mobile menu was simply a button positioned below the header. Like a hamburger menu, the button opened a panel containing the site navigation. We felt it was necessary to test the current menu against our mobile-friendly ideas.

2 Horizontal scrolling menu:

Horizontal scrolling menus are useful for displaying site navigation upfront without taking up too much space

One of our first ideas was to display the site’s navigation in a horizontal scrolling menu. The menu is controlled by swiping left or right. Although not all links would be displayed upfront, the design was perceived as an effective way of minimising vertical space

3 Bottom anchored menu:

The anchored menu is a navigation pattern used by many mobile apps

The mobile menu is anchored to the bottom of the screen and follows the user when they scroll. As a navigation pattern used by many mobile apps, we wanted to learn if this design could work for browser-based users.

4 Top anchored menu:

A navigation pattern that is often used by Android mobile apps

We wanted to test a variant of the bottom anchored menu by repositioning it to the top.

6 Search:

Could search be a preferred method to navigate?

One idea was to use a search bar as part of the site navigation. We designed the search bar to encompass suggested results.

6 Tiled:

The most prominent mobile menu design yet

We looked at using a tiled approach (as seen in the Fitbit mobile app) to make the key features more accessible and memorable.

7 Hamburger menu:

The conventional mobile navigation pattern

We decided to include a hamburger menu design to test for perception and usability. This would also allow us to draw a comparison between conventional and more exposed navigation patterns.

Test 🧪

We used think-out-loud remote user testing to gain insight into our prototypes. We asked users to complete tasks using different mobile navigation designs.

To measure our tests, we based the success criteria on the following measures:

Time to complete the task

Number of errors

Verbatim feedback

Within 24 hours, we received 42 completed studies. The results were interesting.

Participants instantly scrolled before they looked for the mobile menu

Users were familiar with the hamburger menu and knew how to use it

The bottom anchored menu had the quickest task completion rate and the most positive feedback

The combination of UX metrics and user insight highlighted two clear winners: the bottom anchored menu and the hamburger menu.

Iteration ⚙️

Although we had two winning menu designs, we needed to answer some questions based on user feedback. Therefore, we made some quick iterations to our prototypes and pushed them into another round of user testing.

With the results from the second round of user testing successful, we were ready to commit our ideas to a live test.

Live quantified testing

Quantifying the numbers with real customers

Testing changes on a website with real customers can be a risk. That’s why we do all the groundwork of user testing our ideas first. Having validated our designs for usability, we were ready to test our solutions with a large volume of real customers.

We ran an A/B/C test on a selected insurance brand for two weeks. The variants included:

A: Anchored bottom menu

B: Hamburger menu

C: Control (the existing menu)

Analysis

Our analysis showed that the control (the existing menu) narrowly outperformed the hamburger menu variant. However, the clear winner was indeed the bottom anchored menu, which saw a significant reduction in customer service contacts within 24 hours of website use.