Enhancing navigation and branding capabilities
In collaboration with:
thanksben.com
roleS:
DESIGN LEAD, interaction Designer, USer Researcher
YEAR:
October 2024
Overview
I led a major upgrade of the product’s navigation and white-labelling capabilities, resulting in better discoverability of actions and higher engagement from prospects during demos.
"This is brilliant because its so much cleaner and so much more visually engaging and intuitive like, you know, straight away. So yeah, this is really good....I don't think I remember seeing anything like this in the first demo a few months ago" - HR manager prospect (quote shared by Ben's founder).
Ordering the navigational actions
Problem
Navigation controls were disjointed: instance, language, and sign-out selectors occupied the top-right corner, while FAQ and support links were placed at opposite ends along the bottom. For the stage of the product, dual navigation bars were unnecessarily using up screen real estate.
Additionally, navigation between platforms lacked consistency (e.g., employers could move from the employee portal to the admin portal but couldn't navigate back).
In essence, the current navigation system created barriers to future growth and scalability.
Additionally, navigation between platforms lacked consistency (e.g., employers could move from the employee portal to the admin portal but couldn't navigate back).
In essence, the current navigation system created barriers to future growth and scalability.
Before: HR Admin View
Process & Solution
Through three rounds of user testing and iterations, we arrived at the final design of a new sidebar navigation menu.
During testing, we measured whether users could easily find all actions, how long it took them to do so, and the number of misclicks.
During testing, we measured whether users could easily find all actions, how long it took them to do so, and the number of misclicks.
Variant A: 79% of users found all actions. 12% misclicks.
Variant B (Picked): 87.6% of users found all the actions. 4% misclicks.
Adding a layer of visual identity
Before: Employee Home Page
Problem
Prospects frequently told the sales team that the product looked dull and undifferentiated. Leads were being lost because of limited white-labeling capabilities.
After: Employee Home Page with Ben Branding
After: Employee Home Page with Fever-Tree Branding
After: Employee Home Page with Marshmallow Branding
Process & Solution
I enhanced white labelling capabilities by making the sidebar background color editable. To maintain color contrast accessibility standards, the system automatically switches page link colors between white and black based on the background's luminance value.
Additionally, I implemented guidelines that suggest balanced, neutral alternatives when vibrant brand colors like red or yellow could compromise readability.
Additionally, I implemented guidelines that suggest balanced, neutral alternatives when vibrant brand colors like red or yellow could compromise readability.
Improving the information architecture
Problem
The employer control centre's navigation was becoming unscalable. It was hard to add new product modules without compromising discoverability. A clean-up was overdue.
I ran treejack tests with HR admins to identify findability issues and misalignment between their mental models and the taxonomy being used.
4 out of 14 pages had problems.
I ran treejack tests with HR admins to identify findability issues and misalignment between their mental models and the taxonomy being used.
4 out of 14 pages had problems.
Above you can see the treejack testing results for finding enrollment approval history. Most failed at going down the correct path to find this page.
Despite the employer control centre having a flat hierarchy, users were having trouble finding where to accomplish certain tasks.
Solution
Using the findings from research, some pages were relabeled while other similar pages (e.g., budgets & allowances) were consolidated into one. I decided to move certain pages, such as integrations into settings, as these are not accessed often (mostly just on initial set-up).
This specific piece of work was handed over before leaving Ben, and hasn't yet been implemented.
This specific piece of work was handed over before leaving Ben, and hasn't yet been implemented.
Credits
PRODUCT MANAGEMENT
maria paula loayza
kevin armstrong
kevin armstrong
product design
KEVIN ARMSTRONG
MALU ROMERO
SANTIAGO SOTOCA
MALU ROMERO
SANTIAGO SOTOCA
tech lead
christian bedón
operations
JACQUELINE SOLARI
ESTEFANíA RODRIGUEZ
ESTEFANíA RODRIGUEZ
sponsors
jorge o'hara
hernán carranza
hernán carranza
business lead
alessandra ponce