Redesigning a financial services website

Conducting an end-to-end UX process in collaboration with researchers and designers.

Identifying problems with consistency, navigation and accessibility. Rapidly creating prototypes in Figma as part of weekly agile sprints, running usability testing, and presenting validated designs to senior stakeholders. Collaborating with an agency to create beautiful UI that meets user and business goals.

Context

Time period

July 2022 – December 2022

Team

UX Lead
UX Researcher
UX UI Designer (me!)
UX UI Designer – agency

Problem

The company had seen a huge growth in the number of investors using its website during Covid. As the website came under increased scrutiny from new users who hadn't learned its unique patterns, the issues with consistency, navigation and accessibility were proving hard to ignore.

Opportunity

The Brand team were also working on a rebrand, so this became a perfect opportunity to apply a minimalist, clean UI to the site, maximising the benefits of the aesthetic-usability effect.

1. Identifying the problems

When I first joined the company, I conducted a heuristic evaluation of the site based on my knowledge of user-centred design principles. I then analysed HotJar clickmaps and user testing videos, and identified a handful of issues...

Consistency

Sitewide consistency was poor.

For example, a key UI element on the site was a grid of 'tiles':

A video of a user hovering over a handful of unclear image boxes that seem to have links to elsewhere.

When clicked, these tiles would sometimes navigate users to a subpage, sometimes take them to a different section of the site, sometimes open up a PDF, and sometimes do nothing at all! There were no signifiers to suggest to the user which did which...

This goes against Nielsen Norman Group's principle of consistency and standards.

→ We moved away from this misleading pattern, creating bespoke components for all use cases (e.g. links, documents), following recognisable patterns from other websites.

Navigation

Navigation was cluttered, illogical and inconsistent.

The main navigation bar held 11 items at times: stuffed full of niche projects, short-lived events and links to external microsites.

Previously there had been nobody to 'gatekeep' areas like navigation menus to make sure user experience was championed alongside competing business goals.

→ We decided to set up a tree test and card-sorting exercise to establish a logical Information Architecture. We knew we needed to be more protective of this menu in future.

Accessibility and inclusivity

Everywhere you looked, there were accessibility issues.

For example:

The body text size was 14px, rather than the recommended minimum of 16px.
There was white or black text over images without an appropriate overlay or outline.
HTML heading tags were not used or were given a wrong hierarchy.
Images didn't have alt text.
Aria-labels were nonexistant.

→ We implemented fixes to all of the above issues to meet our aims of AA WCAG accessibility standards, and we collaborated with the Brand team to bake accessibility into the brand guidelines.

2. The process

Refocusing on the user

As a team, we took the decision to run intense weekly test-and-learn sprints, so we could refocus the process back on the user without slowing the project down.

Prototyping, testing and iterating

I started by conducting competitor analysis and researching patterns on Mobbin. I then created a handful of Figma wireframes that might solve the specific page's problems.

At design crit meetings, the team discussed their relative merits and selected the two best options. I turned these into prototypes and our UX Researcher set up unmoderated usability tests on UserTesting.

We would then assess the results, and I'd make iterative tweaks based on this feedback to create a final design proposal.

Presenting solutions to stakeholders

I would then present the validated designs back to the project group, and negotiate any pushback armed with our research results.

This collaborative approach took a lot of dedication, as we had to work quickly to meet project timelines, but I thrived in that fast pace.

It meant we were able to embed user research back into the process, and it allowed us to demonstrate the importance of validating designs to the business.

An example sprint week

Our product (i.e. fund) pages were the business' most important pages in terms of sharing information with users and gathering investment, but we had some concerns about their usability.

Gathering requirements

I spoke to some subject matter experts to identify key content that they would expect users to be looking for. I confirmed this on Hotjar click maps.

Analysing performance

Checking scroll behaviour on Hotjar revealed that users were giving up on scrolling down the long page. This implied that another scroll-based page might not be the ideal solution.

Running competitor analysis

I conducted some competitor analysis to see how others in the industry were structuring their navigation. An incredibly common UI trend was tabbed navigation, without anchor links or long page scrolls.

Conducting usability testing

The UX Researcher arranged for some users to try out our site and we analysed the videos together. It seemed as though users were often missing the key content because it: was buried too far down the scrolling page in a low-contrast (grey) sidebar without any text hierarchy to signpost to it.

Prototyping and wireframing

So I created prototypes in Figma for a scroll-based navigation:

Alongside a tabbed alternative:

Iterating based on research outcomes

The usability testing revealed that the tabbed navigation had a higher ease of completion rating of 4.6 out 5 (compared to 4.2 out of 5). After a few further tweaks to the design, we were able to present our validated design to the business.

Presenting to stakeholders

I made iterative changes based on feedback. We then explained the research results to stakeholders, and I presented the validated final designs.

3. Applying beautiful, minimal UI

Collaborating on mid-fidelity mockups

I then worked with the agency's UX UI Designer on the visual design. In this circumstance, he provided

I established some key accessibility and usability requirements, based on my original heuristic evalution; for example, I set up a more logical typographic hierarchy, added consistency to button states, and pushed for larger, more accessible font sizes.

Take a look around the live site, or explore this example screenshot:

An example screenshot from the site, showing beautiful, minimalist UI, strong navigation and clear accessibility.

It was then my job to take this visual design template, fix some inconsistencies, and ultimately create a Design System...

2. Creating a Design System

At the same time, I also annotated designs, briefed developers, found compromises, and guided the build process...

3. Guiding development