Menu Redesign & IA

Overview

A few years ago I lead an entire UI redesign for the core product of a successful telematics company. The new menu design was a crucial component of the UI redesign project, and the goal was to seamlessly integrate with the updated look and feel of the product.

Some knowns issues with the previous menu design were the full colour icons with inconsistent graphic styles, an unclear collapse button, the overbearing page highlights, inconsistent collapsed version and no visual affordances to where pages would open.

Updated Menu Design

I designed a new menu with the following principles:

• Use familiar yet modern flat icons

• Users should be able to tell what section and page they are on

• It should be clear which pages are primary, secondary and tertiary

• The collapsed and mobile versions should be familiar and easy to use

• Users should be able to tell the difference between core product pages and pages added from our application marketplace

I attended a conference put on by the company and created a test to see if the new icons would be easily understood. I then created a clickable prototype and tested it with users performing tasks to complete to ensure the design was usable. Once a working version of the menu was built by developers, I also added a targeted questionnaire to the product if users had the new menu preview turned on.

Feedback & Findings

I was able to obtain feedback and performed usability testing on the new menu design, and learned that:

• The new design was successful at making it easier for the user to know which page they were on.

• Users were not able to complete some tasks due to the information architecture of the product, not the menu design.

• The flat, single colour icons were unsatisfactory to the majority of users.

There were many upset comments about how the colours helped identify the menu item, not the icon. That familiarity was lost and users were upset at having to relearn what the category and page names were. I attempted a few designs with multiple colours in the menu to give users the same affect but it never seemed to work.

Design Trade-off

I decided to go forward with the flat single colour icons even though they were not well received in feedback, because adding colours to the icons would be a massive design trade-off, and because our usability tests showed they would be successful and would not detract from a user’s experience of navigating the product.

I had to consider more than just the menu itself for the design. Our design team created a colour palette to be used in the components and elements of the UI refresh and had to ensure that they were all accessible, and consistent with the company brand.

The design principles for our new colour palette:

• Colour should have meaning

• Colours should be accessible

• Colours should be consistently used throughout the product

Launch

We launched the new menu and received more negative feedback about the lack of colours used in the icons, but also got lots of great feedback about how modern, clean and clear the new menu was.

With time our users became familiar with the new menu, and 4 months after launch the product UMUX score went from 72% to 85%.

Information Architecture Redesign

Since our menu design testing revealed that the product's information architecture was confusing and hard to navigate, this proof lead to a restructure project. A product manager, UX researcher, and myself kicked off a new project to redesign and improve the core product’s IA and navigation. Our goal was to better align the information architecture with industry standards and user expectations, empowering users to navigate the product with greater efficiency.

IA Research

We started by gathering and documenting the current core product’s IA and quickly realized the massive amount of secondary and tertiary pages in the product, making it hard for first time users to find specific pages. I gathered insights from the page analytics on which were utilized the most and least, which pages were searched for the most, and which pages were favourited the most.

journey Based IA

I introduced a new IA for the product that was structured around the common workflows we saw in the research and popular groupings found in the infinity mapping. This solution included the following primary areas:

• Dashboard & Reports

• Map

• Vehicles & Drivers

• Safety & Compliance

• Maintenance

• Setup & Admin

• Help & Support

Testing

I tested users' navigation with a clickable prototype with blurred content to stay focused on the menu. I also included tasks for bookmarking important pages and later recalling them which we learned would be extremely valuable to those needing to use more niche pages. Our testing proved the new IA could help new users find pages in the product 14% faster, but we also learned that the product needed to evolve and have a clear place to start their journey in the product.

Next Steps

Before leaving the project I helped the team plan out a phased approach to continue improving the IA menu structure for the product:

Stage 1:

• Properly name pages

• Introduce bookmarking

• Improve search

Stage 2:

• Consolidate pages where possible

• Define behaviour for user-added pages - Create one section for all user-added pages, or place in corresponding categories depending on the nature of the page?

Stage 3:

• Introduce centres:

  • A dashboard and quick links for a specified area within the product

  • Centres based on foundational user journeys