Halifax — a UX/UI case study

The Design Process


1. Understand

  • Ages 18–55+
  • Personal Accounts
  • Income range £100-£1,000,000

2. Research

Competitor Analysis

Direct Competitors

Competitor analysis table
Customer satisfaction table for UK banks

Qualitative user research: Interview Questions

  1. How long have you held an account with Halifax?
  2. What made you create an account with Halifax?
  3. Do you have accounts with any other bank? If so, which bank (s)?
  4. Which bank do you use more?
  5. If i asked you to transfer money to your savings account, show/talk me through how you would do this?
  6. If you wanted to leave the page, show me how you would sign out?
  7. Can you show/tell me where to find your statements?
  • Users have had accounts with Halifax ranging from 1–18 years
  • Most of my participants created accounts with Halifax due to their parents recommendation/family bank.
  • 4 of my users had accounts with newer fintech startups such as Monzo and Revolut.
  • Only 2 users could locate the quick transfers feature on the dashboard quickly, it took a while for the rest to find it. This made it very clear to me that the feature needed to be refined.
  • All participants automatically went to the top right corner or told me that the log out box was in the top right.
  • 3 participants took a while trying to find where to view their statements. This function could be made a bit clearer.
  • Most of my participants are looking for their balance when they access their dashboard as well as their recent transactions.
  • Only 1 of my participants which happened to be the eldest of the group knew about any of the insurance products on offer.

3. Ideation techniques (insights)

  1. No option to view accounts
  2. Not being able to manage your overdraft or upgrade account
  3. Keeping drop down boxes which are inaccessible
  4. Overwhelming promotions
  5. A long user journey


4. Final design

Pictured: Desktop design

Design System

  • The color blue is a part of Halifax’s brand identity by which users recognize them. This color signifies trust, calmness, stability and faith.
  • I followed the 60:30:10 rule in terms of my identity color palette and used 60% white, 30% blue and 10% blue. This rule creates a sense of balance and allows the eye to move comfortably from one focal point to the next.
  • In terms of my secondary color palette, i used the color green for the promotion of Halifax’s products such as insurance and student accounts. This color signifies safety so the user feels safe as they read a promotion encouraging insurance on their personal items.
  • In terms of contrast ratio, I made sure to use my figma plug in while re-designing the page to make sure I was not getting below an AAA rating. This is important in the same way I mentioned above in that accommodating to people with accessibility issues is very important and using contrast ratios that are unsuitable is unfair and disadvantages the user and the business.


  • I enjoyed doing the competitor analysis for the business research side of the case study and found it interesting analyzing all the banks and how most all had very similar features but some weren’t able to execute them well enough to create a difference. HSBC had my favorite dashboard and I drew a lot of my ideas from them.
  • I’ve enjoyed the design process the most and spending hours on figma making the decisions that matter the most.
  • My first case study and my first go at re-designing a desktop page.
  • I wish I had more participants for my user research however I didn’t realize I didn’t know that many Halifax users so with my next case study, I’m going to try and go beyond the people I know and probably take advantage of Love Circular’s large network of people.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store