Redesigning a financial services marketing website

Being a core part of an end-to-end UX process, rapidly creating Figma prototypes for research and testing

About the project

My role

Auditing the site to identify problems with consistency, navigation and accessibility.
Creating Figma prototypes in weekly agile sprints, and iterating based on user feedback.
Thoughtfully presenting validated designs to secure buy-in from senior leaders.

Time period

July 2022 – December 2022

Team

UX lead
UX researcher
UX UI designer (me)
UI designer – agency

Problem

The company had seen huge growth in the number of investors using its marketing-focused website during Covid. As the website came under increased scrutiny, the issues with consistency, navigation and accessibility were proving hard to ignore.

Opportunity

The Brand team were also working on a rebrand, so this was a perfect opportunity to apply a minimalist, clean UI to the site.

1. Identifying the problems

I conducted an audit of the site using my knowledge of user-centred design principles. I analysed Hotjar clickmaps and user testing videos, and identified a handful of key issues...

Poor consistency

The site had become bloated, with new UI elements piled on top of old. It was also hugely inconsistent, with components sorely misused, creating huge frustrations for users.

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 an external site, sometimes open up a document, 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.

I solved this by creating unique components for each use case – one design for a set of documents, a different design for a set of links, and so on.

Cluttered, confusing navigation

The site was a nightmare to navigate around, as shown by the frustrated user videos on Hotjar.

The main navigation bar changed depending on the page you were on – a real red flag from a UX point of view.

On some pages, it held 11 links: stuffed full of niche projects, short-lived events and links to external microsites.

It had clearly suffered at the whims of powerful stakeholders overruling user experience!

We solved this by setting up a tree test and card-sorting exercise. This helped us to understand how users categorised the site. I analysed the results and created a logical Information Architecture to work for all our various use-cases.

I also wrote guidelines in the design system to emphasise that the menu should stay consistent, while identifying some more appropriate UI elements where stakeholder projects could be added in future.

Accessibility issues

The site was far off our goal to reach WCAG's AA accessibility standards.

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

I started collaborating more closely with the Brand team to bake accessibility into the brand guidelines from the outset.

I also made sure all new designs were tested for colour contrast, readability, and more.

2. The process

Refocusing on the user

The project had already started running before our team was hired, which meant we had to introduce a research-led, user-centred design process without slowing the process down.

We therefore set up intense weekly test-and-learn sprints, aiming to complete design, prototyping, testing and iteration in time for the weekly stakeholder presentation.

Test-and-learn every week

For each new page or UI element, I often started by conducting competitor analysis and researching patterns on Mobbin.

I pride myself on rigorous requirements-gathering from subject matter experts, separating the real requirements from the nice-to-haves.

Using analytics to validate stakeholder theories proved crucial: I regularly used Hotjar click maps and Google Analytics to inform designs.

I then created a handful of Figma wireframes and shared them at the new 'Design Crit' meetings that I'd set up.

We discussed their relative merits and voted on the top two ideas. I turned these into prototypes for the UX researcher to test on UserTesting.

After assessing the results, I'd make iterative tweaks to reach a final design.

Presenting solutions to stakeholders

I would then present the validated designs back to the project group (often senior leaders in the business).

The company had a history of stakeholders overruling design decisions, so I relied on my diplomacy skills to navigate any pushback. The validation provided by our research often proved invaluable.

I thrived in the fast pace of the project, and the ability to re-focus the project on user-centred principles.

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.

Checking scroll behaviour on Hotjar revealed that users were giving up on scrolling down the long page.

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

Alongside a tabbed alternative:

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).

3. Applying beautiful, minimal UI

Collaborating on visual design

Finally, we started the process of applying the finishing touches, based off the emerging brand guidelines, together with the agency's UI designer.

I made sure our work met our AA accessibility standards; 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