< back

The Values Movement: Improving site navigation using quantitative research methods

Design

Company

Arkius

Challenge

The Values Movement aims to create a global movement that gives every individual the freedom, the right, and the ability to project and empower their human values throughout the global economy. The web application which helps this happen had a complex navigational system, so without further building on the application, the team decided to make sure that the structure is good and test it on users. 

  • User testing
  • User research
  • UX Design

Available materials

The Values Movement – at the time of this project period – was a digital concept for which the design team continuously researched and designed new features for.

At this time, all that was available to me was high-fidelity mockups of the navigational system for both desktops and mobile devices.

For the desktop navigation, 2 different layout ideas were designed. 

Navigational system on desktop and mobile devices

Tree testing

To test the overall usability of the application my approach was the following: 

The product would be tested in 2 phases.

First the core structure of the navigational system would be tested on in the form of Tree-tests, where users have to navigate to the right piece of content in a very simplified structure.

This would help us understand whether all users are understanding the labelling and structure of content. 

Research Questions
  • Do my menu item labels make sense to people?
  • Is my content grouped logically to people?
  • Can people find the information they want easily and quickly based on labels only?
  • If not, what is stopping them?
Tree testing example question on Maze (https://maze.co/) and the corresponding results
Tree testing task example conducted through Maze (https://maze.co/) (top) and the corresponding results (bottom)
Design survey preview for the users and diagrams of the results
Design survey conducted through Maze(https://maze.co/): introduction (top) opinion scale results about first impression (middle) and final user preferences (bottom)

Design Survey / AB Test

Then, I would move on to understanding, whether users have issues understanding how the navigation bar really works.

Because the team had several different ideas for navigation bars, I planned to conduct quantitative design surveys in combination with an A/B test, to find out, that out of the 2 most appealing navigation bars which one do most users like.

Conducting these quantitative surveys remotely in an unmoderated nature helped me put the user into the shoes of an expert, who can tell their opinions of what is wrong to them and what is good. Moreover, it helped me understand if users’ personal opinions are showing any patterns on a larger scale.

The Design survey was planned to be conducted on approximately 50 people.

Research Questions
  • Do people have a good idea of what content each menu item contains?
  • Out of the two existing versions for desktop, which one does the user prefer more?
  • Do users have a good understanding of the navigation no matter the used devices? (mobile/desktop)
A/B test inside design survey for recording user preferences (Idea 1 on top and Idea 2 on the bottom)

Design dilemma: to separate or not to separate

As easily as users could navigate through the page structure in the tree tests, as divided their opinions were, when the different navigation bar designs were introduced. 

The biggest difference users could see between the navigation bar mockups, is how the different icons and features were divided throughout the bar. Some users loved the separation because it gave them a directional difference, meaning they will find icons easier. However, some users did not like that they have to divert their attention between the sides of the screen. 

I would find this slightly more frustrating because now when I need to figure out where to go, I have to divert my attention to both sides of the screen
Tester 31, 2022
It looks more aesthetically pleasing. It doesn't make sense to split up the icons with the search bar
Tester 45, 2022

Summary

In the end users have shown a strong preference over the first version of the navigation bar, describing the second version either well-organized or confusing due to the separation of navigational elements. 

On the other hand, the mobile layout of the same navigation seemed to satisfy users’ expectations and felt consistent to them with the desktop layout.

Very in line with modern design standards, meaning it's intuitive and easy to learn
Tester 25, 2022

Key Findings

The first mockup idea is more preferred by users

Out of 46 responses, 33 people (72%) showed preference towards the first layout idea and only 9 people (20%) showed preference towards the second one.

Content of their Digital Wallet was confusing

A dropdown box containing the users' "Claimable rewards" and current balance lead users to confuse the two things with each other. Many users believed that their claimable rewards are their own balance, which was not the case.

The purpose of a few icons were misinterpreted

As a Bento menu icon was used in Idea 2, participants were asked about what they expect to find when they click on it. They mentioned many completely different types of content, so it was clear that there is no universal understanding in the context of the Values Movement, which could help users understand what the button hides.

Design improvements

Taking notes of the numerous findings after the quantitative research, the navigation bar design was influenced in the following ways. 

  • Content in Bento menu was moved to a different location
  • More iterations continued based on the first navigation bar mockup
  • Minor improvements were made on mobile 
New navigation bar design created by our great UI Designer @Chris

Home

Works

About

Contact