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':
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...
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.
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.
I thrived in the fast pace of the project, and the ability to re-focus the project on user-centred principles.
Learning from analytics
I used Hotjar click maps and Google Analytics to inform designs, rather than basing things on stakeholder theories.
For example, when working on our (highly important) fund pages, assessing scroll behaviour on Hotjar revealed that users were giving up on scrolling down the long page.
I wanted an A/B test to compare some options. So I created two prototypes in Figma. Firstly, a similar scroll-based navigation:
And then a tabbed alternative:
The UX researcher put the two options in front of users on UserTesting.
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).
I then assessed the user feedback in detail, making iterative tweaks to reach a final design.
Presenting solutions to stakeholders
I would then present the designs back to the project group – including 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 for this.
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:
