Client: Raet VISMA
Sector: Human Resources
Role: Lead Product Designer, Research to conception, Information Architecture, Visualisation and Testing.
Project time: 3 months

After many years in the business of HR, Raet has continued to develop an Ecosystem of apps with a growing problem in its Information Architecture. As the Lead Product Designer in the Business sector my job was to investigate and understand user motivations to navigate through Raet’s app Ecosystem and use that knowledge to design a better navigation experience.

“Design is not just how it looks like and how it feels like. Design is how it works.”

Steve Jobs

What is Information Architecture (IA)?

IA is the underlying content structure of our product. It’s a taxonomy map which shows how different sections link together and therefore has a big effect on the way a user navigates our product.

As a result good user experience is impossible to achieve without having a solid foundation in this area. Part of the UX team’s remit is to try and understand more about our users navigation model with the intention of improving this structure.

Introduction

This case study shows how we tackled this project and the process we followed. As we have continued to develop the Raet Ecosystyem with a large number of apps and conducted usability tests with Product A* in particular we have noticed signs of a growing problem with our Information Architecture in the following two areas.

Findability

Multiple menu structures: We are adding menu items into the main drop down without much care or thought as to what type of content that area contains and the overall hierarchy it should sit within. Users are confronted with inconsistent navigation menus.

Settings: Should these items be in settings or on the main nav? How do we know that’s how our users see things? What’s the rationale for where new items are added?

Scalability

Overloaded menu options: Multiple menu designs and menu structures.

Overloaded theme pages

Multiple distinct types of content on one page eg. tables are not ideal, especially when we add pagination and filtration for obvious UX reasons.

Overloaded detailed page

We overuse the modal / detail panels, sometimes on the first click when they are better suited to ‘last child’ or the end of a flow. They are also overloaded which means deeper flows of 4-5 levels get complex very quickly. Submenu is in fact using hotspots to navigate the user to a specific area of the profile. The profile can take up to 3 minutes to load.

Overuse of detail view

We recycle detail views many times to allow navigation between related screens at deeper levels in the application. Not only can this be confusing it also creates problems for the back journey.

Existing IA

We mapped out the existing IA to understand the scope of the problem.

Raet – Product Ecosystem

Research results – Task completion

How long does a user take to complete a task?

We wanted to understand how long a user takes to complete a task. We picked the 4 most important User journeys, Change profile info, Change contract for another employee, Returning to the homepage (back journey) and Change user permissions.

Research – Card sorting

Moderated card sorting exercise

Raet has different types of users. We conducted several card sorting exercises to understand the users mental model. 30 users for 30 min each (10 Employees, 10 Managers and 10 System admins). Included existing clients, Client 1, Client 2, and Client 3. Video recorded sessions.

Methodology

The card sorting exercise consisted of an introduction, a short interview (qualitative data) and organising the cards into groups that made sense to them. We asked the participants to name each group. We instructed the participants to think out loud and share their thoughts with the audience throughout the test.

Results – Card sorting

Similarity matrix

After conducting the card sorting exercises I tried to look for similarities or patterns in the groups using Google Sheets and looked at the notes again from the different exercises and interviews.

Findings

Design considerations

Funnel model, less choice, easier to find

Earlier studies show users are not able to find menu options even though they are one click away. We reduce the cognitive load on the user by reducing the number of navigational choices to create a funnel model.

Separate content into topics

Separate pagination and filters.

Emerging categories / themes

Consistency is key:

Brainstorming

Whiteboarding ideas with the UX team

Working prototypes

I used UXpin to create the working prototypes to test the designs online.

High fidelity designs

Including Iconography and White-labeling

Task completion

The new design was tested again with 17 participants. Participants were asked to complete the same tasks with the new design prototype in UXpin.

• Task 1 improved from 5,48 min to 1,52 min average time to complete the task (260%improvement).
• Task 2 improved from 5,86 min to 3,56 min average time to complete the task (64% improvement).
• Task 3 improved from 5,54 min to 2,15 min average time to complete the task (158% improvement).
• Task 4 improved from 44,17 min to 16,52 min average time to complete the task (167% improvement).

Other concept designs

Many users complained about the current use of colours and the strain on their eyes after using the apps for many hours a day. We had time to experiment with lighter and more pleasant colours that are easier to the users eyes.

Notable quotes

“I know the option is here somewhere.”

“I try to use it on my mobile but I quickly give up… I end up using my laptop.”

“What just happened?”

“Would love it if I could just search the option, quick links or something like that.”

Conclusions

Raet has a very complex app ecosystem. With the new navigation model we help first time users and more advanced users navigate faster and complete tasks by showing the user fewer options and creating a funnel model. Although there are more clicks involved the user actually completes the task faster than showing all options in one go.

After the initial tests users expect to navigate to the home page by clicking on the company logo. We recommend to change the behaviour as this is a quick win for the end user.

The main menu is Responsive and is designed so that the user can focus on the task at hand, navigate from A to B without any clutter. The menu allows for Sub categories and subtitles.

After conducting the initial tests users always navigated to the Homepage to start a new task. With the new navigation model users can always go back to where they started.

After conducting the tests we also recommend we experiment more with the use of colours if time is available in the current or next quarter.

Power users expect a way to search for an option or are looking at a quick way to perform an action. We should explore these options in the future.

Design System navigation components

Navigation

Navigation is the set of actions and techniques that allow users to move between different pages, understand where they are and enable them to successfully interact with the product.

This navigation pattern is a result of the Information Architecture (IA) audit and user research carried out by the UX team. The goal of navigation is to allow users to easily find and navigate to the information that they need, without cluttering the page.

Main menu – the starting point

The main menu was designed as the starting point for navigating the platform; a launchpad to any other page or application. It is accessed through the hamburger icon in the top right-hand corner of every page. The reason we use a hamburger icon is to save space and allow the user to focus on the content.

When clicked, a new layer will open over the content of the page. On smaller view ports, the layer will expand to 100% full width.

The main menu is made up of lists of items and can have up to 3 lists. It is up to each product to decide what combination of lists to use.

The navigation is organized by hierarchy (e.g.: items found in list 1 are more important than items found in list 2). The main menu is also the highest level of navigational hierarchy for the whole application. Items on each list can take users to items lower in the hierarchy.

• Menu list title – The titles of the different lists should be used to logically group the list’s items.
• List 1 – Items on list 1 are the most important and represented by large, prominent icons. This list is intended to place focus on a smaller selection of items (Max: 5 items).
• List 2 – Items on list 2 are less important than list 1. This list has more scale and can be used when there are more than just a few items. External applications with a different user experience are identified by an external link icon. Add a URL to the label to help the user understand it is a third party app. Users will be taken to an external browser tab when visiting these external applications.
• List 3 – Items on list 3 are the least important of all lists. Items like “System settings” and “Log out” are found here. Fewer users will need to navigate to these areas of the platform, and less often.
• Menu list item – Use nouns to describe items on the list. They should be short and to the point. Menu item text should be no more than one line of text. Use verbs to describe an item that refers to an action (e.g.: Log out). When a user hovers over the item on regular web browsers, they will appear in blue.
• Closing the main menu – The user can close the main menu by using the “X” (without selecting an item on the list), and that will take them to the original view of the page.
• Keyboard shortcuts – Another way of interacting with the main menu is by using keyboard shortcuts. To access the main menu use,

To close the main menu use the ESC key,

Navigation page – a second level

The in-page menu is the second level of hierarchy in the navigation and allows users to navigate from higher levels of navigation to deeper levels. Items can be organised in groups so that it is clearer for the user.

Items that lead to deeper levels of hierarchy feature an arrow icon, to identify that the user has more options when clicking on that item. Items that don’t feature an arrow take the user directly to the specific topic.

Back button

The back button navigates in reverse chronological order through the history of recently viewed pages and may take the user back through recent pages outside of the app.

Required components and pages

• Page template: The page template provides a way to structure content on a page.
• Main menu: The main menu is the highest level of navigational hierarchy and should be accessible from any page of the application.
• In-page menu: The in-page menu allows users to navigate from higher levels of navigation to deeper levels.