EARLY RESEARCH
Hargreaves Lansdown
MY ROLE
PRODUCT DESIGNER
INTERACTION DESIGNER
USER RESEARCHER
SECTOR
FINANCIAL SERVICES
YEAR
2022
TOOLS
FIGMA, NOTION,
MIRO, LOOKBACK
Improving the user journey completion by 83% for a new investing product
Hargreaves Lansdown (HL), is a prominent and well-respected British investment organisation with over 1.8 million clients.
HL approached my team to create a new digital product to simplify investing for beginners by signing up to their existing Ready-Made Investment funds.
We delivered a brand new product with a refreshed look and feel, and that was ready to implement.
OVERVIEW
The project in a nutshell
PROBLEM STATEMENT
Investing can be confusing and intimidating for beginners. HL's Ready Made Investments are fully managed by experts so beginners can start investing.
We need to connect beginners with RMIs.
THE CHALLENGE
Creating a user journey that will guide beginners to RMIs, rather than other self-managed options.
THE OUTPUT
A mobile-first product. High fidelity wireframes compliant with WCAG AA 2.1 and aligned with HL's brand identity and UK's strict regulatory standards.
THE IMPACT
Expedited the product roadmap and enabled potential early revenue generation.
EARLY RESEARCH
Kicking off with user and market research
In the initial phase, I reviewed HL’s existing research while assessing the broader market and competitor offerings, while aiming to maintain HL’s established credibility and trust.
Taking a user-centric approach, I explored HL’s:
-
Website
-
Existing user personas
-
Brand identity and design system
-
Competitors and comparators
I analysed HL's competitors and comparators, identifying their strengths, weaknesses, and missed opportunities to inform our approach.
DEFINE
Mapping the user flow & journey map
I combined client and desk research to craft a journey map and user flow, taking into consideration business and legal aspects. The goal was to create a distinctive, modular journey for the product so that a beginner investor could easily sign up to a RMI.
After starting the journey from the product homepage, users have the flexibility to complete any module in the order they choose before signing up for their Ready Made Investment.
IDEATE
Low- and mid-fidelity wireframes
Starting with low-fidelity wireframes, I later refined them into mid-fidelity versions aligned with the user journey map and informed by the ‘Jobs to be Done’ framework.
The mid-fidelity wireframes were kept visually simple to focus on content and user flow testing, except for the investment customisation feature, which was explored in greater detail to validate this key interaction.
These are the low-fidelity wireframes that were created using the 'Jobs to be Done' framework.
In the mid-fidelity wireframes, I finalised and added the content that was going to be tested with users.
VALIDATE
Insights from usability testing (mid-fidelity)
It was essential that I tested my thoughts regarding the designs and the modular user journey as early as possible, which in this case was right after the completion of the mid-fidelity wireframes.
I recruited 12 participants that met our key criteria, with the primary one being that they must be new to investing, and planned and facilitated their research sessions. Below are some key insights from these sessions:
INSIGHT 1 of 3
Key information and visuals caused confusion and were misinterpreted. This reduced users' confidence levels and needed to be simplified.
INSIGHT 2 of 3
The modular journey meant that some users needed guidance and context with navigation and struggled with decision fatigue.
INSIGHT 3 of 3
Some beginners gravitated towards the advanced investing style, which they may be inexperienced and unsuitable for.
DEFINE
Pausing to create a design style guide
Due to the limited timeframe, I moved straight into high fidelity designs, building the prototype while still iterating on insights from usability testing. However, we were missing a clear design direction.
Although HL had an established design system, I had permission to creatively adjust it as needed. Revisiting my competitor analysis, I identified elements that would position this product attractively for users.
I adapted HL's design system making small, yet impactful changes that would deliver a fresh and engaging experience while maintaining brand credibility.
.png)
Using HL's existing design system, I explored how I could create an identifiable brand experience while repurposing certain elements to provide a new, and refreshed look and feel to the final product.
ITERATE
Previous usability issues solved in high-fidelity
Working with a tight timeframe, I incorporated user feedback from the first round of usability testing while moving directly into high-fidelity wireframes. Below are examples of how I solved pain points and how the designs evolved to better address user needs:
INSIGHT 1 of 3
Key information and visuals caused confusion and were misinterpreted. These reduced users' confidence levels and needed to be simplified.
SOLUTION 1 of 3
Reimagine content delivery via modern data visualisation methods. Ensure compliance with regulations. Prioritise, organise and format content without losing information.
.png)
INSIGHT 2 of 3
The modular journey meant that some users needed guidance and context with navigation and struggled with decision fatigue.
SOLUTION 2 of 3
Transform modular journey to linear to reduce the number of decisions needed, and enable the addition of progress indicators and visual cues.
INSIGHT 3 of 3
Some beginners gravitated towards the advanced investing style, which they may be inexperienced and unsuitable for.
SOLUTION 3 of 3
Improve conversion to RMI funds by signposting the advanced option to indicate that it is for seasoned investors, rather than beginners.
.png)
VALIDATE
Usability testing the new high-fidelity wireframes
With the high-fidelity wireframes finalised, I recruited, planned, and facilitated another round of usability testing. I spoke with 12 beginner investors over two days, seeking fresh feedback on how these designs performed for individuals who were new to investing.
These high-fidelity wireframes were tested with 12 participants.
OUTCOME
How the new wireframes performed
The changes and improvements to the wireframes were highly successful, resulting in an 83% increase in successful journey completion. Furthermore, 9 out of 12 participants (up from 5 out of 12 in the first round) opted to purchase an RMI fund, and participants reported notably higher confidence in their decisions as well as a stronger grasp of the investing process.
80% Increase
in RMI selection, with fewer participants choosing the advanced investing style
High Confidence
in beginners with their investment decisions due to simplified visuals and content
83% Improvement
in journey completion, with only 1/12 users going back in the journey
I’m impressed with this. I’m geeking out.
- Participant 1 (Round 2)
Having the seasoned investors [tag] is nice without having to read through it all as an initial glance. I know I can avoid that one.
- Participant 2 (Round 2)
DELIVER
Handing over high-fidelity wireframes
At the end of the project, I handed over our high-fidelity wireframes and prototypes as a Figma file.
These were compliant with the WCAG AA 2.1 accessibility standards as well as the FCA - UK's financial regulatory body.
.png)
These high-fidelity wireframes were delivered to the client as a Figma file.
RESULTS
Impact and reflections
This project had long been on HL's roadmap but was delayed due to internal resourcing constraints. Without my team’s involvement, it could have remained on hold for longer. Our contribution significantly accelerated the product roadmap, enabling the possibility of earlier revenue generation, while opening important opportunities for future collaboration between HL and us.
This was an incredibly fun, highly complicated, sometimes stressful, but ultimately hugely rewarding project to be a part of. As a product designer, I am passionate about ensuring that designs have a solid base of research to stand on, which meant that our design decisions were strategic, deliberate, and informed. I went through several design and flow iterations in each fidelity, seeking validation early on what would work and what wouldn't. Through regular internal feedback, and user research, I'm very proud of how the designs evolved from scribbles-on-a-chalkboard, to the bare-bones mid-fidelity wireframes, and then through to a high-fidelity product that was received incredibly well by the team in HL.
.png)