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.
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.
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.
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.
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 screenTester 31, 2022
It looks more aesthetically pleasing. It doesn't make sense to split up the icons with the search barTester 45, 2022
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 learnTester 25, 2022
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.
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.
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.
Taking notes of the numerous findings after the quantitative research, the navigation bar design was influenced in the following ways.