Employee' Benefits

Improving the UX of the Employee' Benefits platform

Client
Capita People Solutions
Project Date
2018
Major Tasks & Responsibilities
Research, design and test the prototypes
Platform
Responsive Web App
Design Tools / UX Methods Used
Sketch, InVision, Whimsical, Maze A/B Testing

Make a well-informed choice

New Generation Benefits is a tool for employees. It enables them to choose and manage their benefits in a simple and seamless user interface.
My role was to research, design and test the UX and UI of this tool. I collaborated with design, product development and engineering to launch this project.

The problem

For this project we wanted to solve two problems:

Decrease the number of clicks the user needed to make in order to understand the benefit and make their choice, and

Decrease the number of complaints client support collected regarding a lack of understanding of what the benefit is offering.

After distilling the research, we designed the optimised user journey using Whimsical to decrease the number of clicks.

The solution

Sketching ideas

To decrease the number of complaints to client support, we brainstormed and sketched some ideas.

After considering different possibilities we decided to reduce the number of calls by directing users to the benefit details page.

Details page

One way to solve this problem was to move the benefits selection inside the benefit details page.

We came up with two options - one where the Selection controls are visible in the Benefit Details page, and two where the Selection controls are hidden within the Benefit Details.

The second option could be considered a dark UX pattern, but this way the user might read the details before they make a selection.

Following the definition of the two options, we created low fidelity prototypes, using Sketch and Invision, to put them to test.

Testing

For usability testing, we used Maze to define the tasks. Then sent each option to 14 business stakeholders, from product owners to developers and marketing consultants to do the tasks.

The findings

After analysing both options, we concluded that most of the users read the benefits' details even if they made the configuration first.

We think that the right solution is to make the user go through the benefit details to help them make a better decision and consequently decrease the number of complaints.

The solution is, therefore, to take Option 2, having the configuration panel inside the 'Levels of choice' section. That way the user will need to get through the main information about the benefit before they make their choices.

New design interface for the Benefits platform

Ready to be presented

We created a new UI using Sketch, iterating through different design options. Once the new UI was defined, a high fidelity prototype was presented to the business stakeholders.

Learnings

During the user research, I was pleased to see all of the users going through the details of the benefits after we moved the selection controls inside the Benefit Details page. Now the users can go through what they need to know before making a decision without leaving the page.
I especially enjoyed what we got from the research, and turning that feedback into ideas to access the user’s problems, like reducing the number of complaints and helping them to make a more informed decision.

The prototype is excellent. I could concentrate on stuff which really mattered to me while choosing my benefit which is really good. I found there were no unwanted redirects or message that took my focus away. Anyways the flow made me happy because I could afford a bike now!!

Quote from a user that participated in the usability testing