Designing UI for a new feature

Context

Time period

March 2024

Team

• UX Researcher
• UX UI Designer (me!)

Problem

During our testing of the 404 page, the UX Researcher noticed that users in certain locations were facing difficulty in using the audience selector. 4 out of 10 users could not complete the task! It seemed as though there was an issue with the visibility of the buttons.

1. Identifying the problem

The audience selector is a component allowing users to change their location (e.g. UK) and their user type (e.g. Professional investor or Individual investor).

When originally tested during the redesign project, no issues had come up. But it seemed as though it hadn't been tested with locations where there was just one user type to select.

Watching usability tests

Users weren't realising that they needed to click 'Professional investor' to proceed, and so were desperately clicking elsewhere:

For example, some users would take 23 seconds moving their mouse round the component, only to click the wrong button and be sent back to the start of the process:

2. Testing a simple approach

Creating prototypes

I started by creating a few simple UI tweaks to see if we could make a significant difference with minimal dev time.

For one version, I increased the font size for the button label text, and added a grey stoke around the buttons:

In the other version, I used more eye-catching background colours for the buttons (while still trying to keep within the minimalist brand guidelines):

These were then set up as prototypes in Figma, ready for testing.

Testing

The UX Researcher set up an unmoderated test and both options performed okay, with 83% of participants completing the task, but this wasn't enough for such a core functionality.

Users seemed to be looking for a way to actively apply or save the changes. And some of them were now not following the intended sequence, which added some friction.

3. Starting from scratch

So I went back to square one and imagined what I'd have done if I'd been working on the component from the start...

Competitor analysis

After taking another look at the user research and available analytics, I conducted some competitor analysis and saw a few examples of sites using progressive disclosure to good effect, following a step-by-step process and only showing the information relevant to the user at each stage:

And some other sites that used radio buttons alongside a clear confirmation button:

I discussed these options with fellow designers and we concluded that - although the confirmation button would add another click - it was worth it to make sure users knew how to proceed. And similarly, we agreed the use of progressive disclosure would keep things simple for users, reducing cognitive load.

Creating and prototyping new UI

So I set about redesigning the component, introducing a clearer step-by-step process with less room for misunderstanding, and an overhauled visual design.

• I changed the UI of the active section to use dark colours that stood out against the white default states, so the user knew what to focus on.
• I created consistency between the location and investor type selection styles through the use of radio buttons, to create a clear pattern for the user.
• I added a clear 'Confirm' button at the end of the process, so users were in no doubt about the final step.
• And I included disabled states to secondary buttons to focus the user on the primary goal.

When building the Figma prototypes, I set up a number of interaction possibilities to make sure we catered for all the various potential user flows.

I shared them with my colleagues in a Design Crit and received some useful feedback that led to a few tweaks.

Testing and validating

All 6 participants, with a healthy average age of 46.5 years, successfully accomplished the given tasks. The perceived ease rating was a conclusive 4.8 out of 5.

The qualitative user feedback was also supportive, with quotes like: "the process couldn't be any better" and "self-explanatory and easy to interact".

I'm looking forward to seeing the success statistics when this is shipped on the live site!