top of page

About the Project

Disclaimer: This redesigned UI concept is an independent initiative created by Ross Galypchak. It is not commissioned or endorsed by Hargreaves Lansdown. The purpose of this redesign is purely for educational practice and demonstration of design skills.

Hargreaves Lansdown is a platform for managing personal investments such as SIPP pension and an ISA portfolio. I have chosen to focus on this company because I am a customer, I wanted to challenge myself and I have a keen interest in investment platforms and banking applications. I felt that their website feels dated and would benefit greatly with a modern and intuitive responsive UI. This UI redesign project was part of my UI for UX designers course with CareerFoundry.

The problem

Dated, clunky, not user friendly interface

Difficult to navigate

Account dashboard does not have a responsive design. Mobile website is unusable

Intimidating to use - the dashboard is full of information and it is hard to find what you are looking for

Cumbersome login process

Goal

Redesign login, dashboard and investing process for Hargreaves Lansdown whose users will benefit from a more user-friendly experience. The design needs to be responsive and look familiar on a mobile, tablet and desktop screens.

Sasha

34, School teacher

London, UK

Likes travelling, watching movies, yoga, reading

"With today’s economic challenges, it is a good idea to have your money working for you so that I don’t have to worry too much about my retirement... but it just looks so complicated"

Frustrations

  • There is so much ‘finance’ jargon
     

  • It isn't easy to sift through all the articles and analysis
     

  • Difficult to find how well my investment is doing

Goals

  • Wants to log into her account and see portfolio performance right away
     

  • Wants a clear and easy process for buying/selling stocks
     

  • Wants a clean interface with only the most relevant info

Technology proficiency

Mobile

Desktop

Technical competency

User Flow

Based on the User Persona and their stories, I created a user flow to ensure users had an efficient and simple way to reach their goals in the app such as having a simple process for buying and selling investments and a simple way to track how their investments are performing over time

Wireframing

I created basic digital wireframes that could be changed easily before adding finer details. For this course, I was given a grid to work with which I tailored my wireframes to

Low-Fi wireframes

“As a user, I want to easily find my return on investments without having to search for it on the website.”

“As a user, I want a simple process to buying and selling funds and stocks”

“As a user, I want to be notified when an investment reaches a certain price”

MOOD BOARD

The mood board I've compiled is informal, light, and user-friendly, yet it still exudes elegance and competency. I've tailored it to be particularly appealing to casual users like Sasha, avoiding any sense of intimidation. It features lighter tones and infographics designed to resonate with novice investors

Fonts

M

ontserrat

L

ato

Heading 1 | Montserrat | Bold 32px

Heading 2 | Lato | Light 42.66px

Heading 3 | Lato | Regular 32px

Heading 4 | Lato | Regular 20px

Body | Lato | Light | 16px | 25.9 lh

This is a body example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Labels | Lato | Regular 12px

Iconography

Animations

Countdown timer

Loading circle

Hi-Fi mockups

After several rounds of testing with the low-fi prototype, I have arrived at the final design.
Tests were done with users who have very little to no experience with investment apps as the goal of this redesign was to make it simple enough for anyone to pick it up and be lead by the design to their desired outcome

Breakpoints

The original goal was to redesign the HL website into a responsive web app that will look and feel familiar across different screens, To achieve this I adopted a mobile-first approach which means I started off designing for the smallest screen (mobile in this case) and progressively reorganized and add content as the screen size gets wider

Conclusion

After graduating from UX Design, I wanted to expand my skill set by also learning to design UI. This project was the perfect opportunity to learn the art and science of beautiful and functional UI. Redesigning Hargreaves Lansdown’s website has been a satisfying journey.

As this is a UI course, I had limited time to do the UX side of things. The research I did was very light and the design decisions were mostly driven by my biases. However, my focus from the beginning was to learn how to craft beautiful UI’s and the work that is required to achieve that

What I enjoyed the most was understanding breakpoints and how to translate designs to different screen sizes.

Next Steps

  • Perform in depth market research to understand the competitors and the features the users really want
     

  • Iterate the design based on user feedback
     

  • Fully expand the tablet and desktop designs

bottom of page