A UX CASE STUDY
Going vegan with mobile menus
How a leading UK InsureTech company increased conversion by optimising a mobile-friendly menu
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 on 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 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
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 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:
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 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:
We wanted to test a variant of the bottom anchored menu by repositioning it to the top.
6 Search:
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:
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:
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
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.
The new mobile menu is now running at 100%. The changes are reducing friction in the customer journey, and there are fewer contacts with customer service channels.
By optimising the mobile menu through a UX Design process, we delivered a better user experience and increased commercial value.
Does your website use a hamburger menu (or a similar navigation pattern)? And have you considered a more ‘vegan’ friendly alternative?
Food for thought… 🥬
Special mentions
- Paul Humphrey — UX Research Manager; also a fan of country music
- Kawaii icons (used in all illustrations) — Freepik
