Halifax — a UX/UI case study

The aim of this case study is going to be looking into how to increase retention and further conversion across desktop devices for Halifax. This will also include cross-sale to credit cards/mortgage or even current accounts.

The Fin-tech (financial technology) industry has evolved over the last few years with an aim to reshape the way we use financial services. In a world of traditional banks such as Halifax and Barclays, banks that operate completely online have entered the market and have been competing with these long-standing traditional banks. Monzo and Revolut are fully online banks that have now become a lot more convenient for a lot of people compared to a time where traditional banks you could just walk into were better suited to everyone. These fin-tech start up banks have increased the competition among UK banks and have meant that these traditional banks have been forced to revolutionize their digital services to be able to compete with the sleek and aesthetically pleasing user interfaces of these start ups that have been growing in popularity. Traditional banks however run a difficult task of revolutionizing their digital services while also keeping their older users as well as the ones with accessibility issues content and happy with the usability of their online banking services.

The Design Process

https://uxdworld.com/2019/04/23/user-experience-design-process/

I found an amazing infographic that highlights my design process for this case study beautifully. These are the steps i’m going to be following to ensure no areas are missed in my design process and i’m able to successfully design a Halifax dashboard page that ticks all the boxes.

1. Understand

Background: Halifax is a long-standing traditional bank within the UK’s finance industry and has been around since the 19th century. Their services are very trusted by the UK population of all ages however with the emergence of fin-tech start up banks as of the last couple of years, it’s important we look at how Halifax can compete with these start-ups through adapting and making changes to their platforms.

I will be looking at users to which the following applies to:

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

My role: As a UX/UI designer, I will be looking at how a traditional bank with a long tenure can adapt their digital services to compete with the ever-growing popularity of start ups as well as other traditional banks while also increasing retention and further conversions across their digital platforms.

Hypothesis: In order to increase client retention and cross sales, we will need to change aspects of the design of Halifax’s desktop dashboard in line with research and design laws to increase the satisfaction of their user base and encourage them to use more services.

2. Research

Competitor Analysis

I started off with some business research with competitor analysis as i wanted to compare Halifax’s dashboard with that of the other banks in the industry — it’s direct competitors. Below is a screenshot of Halifax’s dashboard with some annotations from me picking up interesting decisions made by Halifax’s design team. I picked up the ways they attempted to increase cross -selling and where important functions belonged on the page.

Direct Competitors

Nationwide

Although Nationwide has less revenue than Halifax, their ‘offers’ section could work well to increase cross-sales and further increase Halifax’s revenue if executed properly. Currently, Nationwide’s ‘my offers’ button does not give away anymore information as to the kind of offers users could be eligible for which removes the incentive to click and find out more.

Natwest

One feature from Natwest’s dashboard that stood out to me was their timing of promotions tailored to university students. Their uni checklist easily stands out on the white background of the page and encourages cross-selling. This time sensitive promotion will mean more people will be more inclined to borrow money or get insurance for their personal belongings. This is a very effective form of cross-selling that it’s direct competitors especially Halifax have not picked up on. Their log out button is also very bold against the header unlike Halifax’s page which blends in and this is great for people with accessibility issues such as the elderly.

Santander

Along with Nationwide, Santander also make use of a ‘my offers’ button although Santander do better at encouraging users to see their offers with a button that says ‘go to my offers’ but this could still be executed better. They also have their products and services list but instead titled ‘Apply online’ which is definitely a better move at trying to increase the bank’s cross-sales and something Halifax could adopt. Santander gives users even more options as they have a button that gives the option to add, remove or rename an account just above each account block.

HSBC

I really enjoyed picking out useful functions from HSBC’s dashboard as their dashboard is a lot different to it’s direct competitors. At the top of the screen, there is a clear log out box here that is small but can be better spotted compared to Halifax’s button that blends into the header. Unlike its competitors, they have a ‘Welcome back’ message for each user which makes the experience feel a lot more personalized. The user’s accounts are displayed on the right hand side which saves space and looks a lot more organised. However, they make effective use of the space as directly below the account options is a promotion for one of their products which is very convenient for cross-selling. Tidying the user’s account options into the left hand corner means there is a lot more space for each account to be displayed with most recent transactions shown. This is definitely a layout that would make more sense for Halifax as it shortens the user journey and shows hierarchy of information has definitely been a priority for HSBC. Their favorite function of mine is the search transactions feature which none of it’s direct competitors have. Also, the placement of their quick transfer function is unique to it’s competitors as they all have theirs in the left hand corner apart from Halifax which has theirs at the top.

Competitor analysis table

Red route analysis

I used 5 Halifax users for this method and compiled these results. I found it interesting how payment transfers are used by all and always however Halifax’s quick transfers feature is only used by some. I think this proves my earlier notion that this isn’t a feature that stands out and not as obvious on Halifax’s dashboard so this may be why not many of the users i asked actually use it. This feature would do better with users if it stood out on their dashboard as much as Halifax’s direct competitors with better placement.

Customer satisfaction table for UK banks

Qualitative user research: Interview Questions

I carried out some in-person and phone interviews with 7 different Halifax users and used the following questions. I was able to find 7 friends and family members that bank with Halifax however due to the current pandemic i could only do in person interviews with my family members. My participants ages ranged from 17 to 43 years of age. I formed the interview questions below in order to avoid bias so it is focused on open questions. This is to avoid leading the user to a particular response so I was able to have an accurate reading of their true feelings.

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?

8. What do you usually log on to your dashboard for?

9. Are you aware of the different account types Halifax offer?

10. Have you ever applied for any type of Halifax insurance?

Insights

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

Mind-mapping

I carried out my ideation techniques with two other people and we came up with some ideas based on the user research i carried out. We thought about how Halifax’s current features could be improved to increase retention and also increase cross-selling.

Crazy 8s

I did this technique on my own and had 8 minutes to create 8 different designs for the new Halifax dashboard. I was only able to create 6 designs before i ran out of time. This technique is better carried out with other people to ensure every possible design is thought of.

From this I was able to think of more ideas and went ahead to creating my mid-fidelity wireframe.

The Worst Possible Idea

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

This technique allows you to assess the worst designs for the app and helps you to pick out things you may be missing.

For example, after i did a little research i found out that drop down boxes are not accessibility friendly and users with accessibility issues find it difficult navigating through a page with drop down boxes. This is disappointing from a bank with millions of users however i will try to rectify this issue.

Wireframes

Low fidelity wireframe

This wireframe is based on my insights from business research, user research and ideation techniques. Users had things they prioritized when they logged onto their dashboard and my placement of these blocks is a reflection of that as well as making use of all the space available unlike Halifax’s original dashboard design.

Mid fidelity wireframe

At this point, I thought it was important that transaction history was shown in the middle of the page as this is something users often log in for. The block below it would be a promotion of some sort especially one that links to the user’s account history such as a promotion encouraging users to increase their arranged overdraft should they need to. It was also important to me that the right side of the page wasn’t empty like the original design.

What I decided to change from the previous wireframe is the placement of the promotions to increase user engagement. I also decided that instead of wasting space by having two separate blocks for the accounts on the right hand side, i should turn it into a carousel. I would then have space to place promotions directly below which would increase the opportunity for cross-selling. I also added a personalized message as this is something the original Halifax dashboard does not have and it adds a warm touch to the users experience and makes them feel like their bank is more in touch with them. This is a feature that could also increase retention as users feel more connected to their bank and it is not just a passive experience.

High Fidelity wireframe

For my last wireframe, i decided to change the placement of important functions such as payments and transfers and manage overdrafts. I added this directly underneath the users accounts so it is grouped together and looks a lot more neater. I moved the promotion block that was underneath the accounts and placed the quick transfer block there instead as this was an important feature for users so placing it with the accounts and other actions linking to it makes a lot more sense. It is also expanded for a quicker process instead of the users journey being increased as they have to use unnecessary clicks to send a quick transfer. The original quick transfer feature was at the top however I removed it and placed a promotion there instead which is also because this is one of the first places the users eyes would go which increases the opportunity for cross-selling.

4. Final design

Pictured: Desktop design

Design System

Color psychology:

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

Accessibility:

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

As drop down menus were an inaccessible feature, I did some research and noticed that carousels are a more accessible alternative and incorporated it into my design for the selection of accounts as can be seen below.

Design Laws

Conclusion

I’m confident that my re-design will be able to meet the objectives of this case study. The changes I've made to accessibility and visual hierarchy in particular would really help to increase retention as well as cross-selling. I’ve also tried to ensure user journeys become a lot shorter by making a lot of features on the dashboard such as quick transfer and viewing transactions very prominent features on the dashboard. This allows the user to have not as many decisions and choices to make so they are more likely to pay attention to the other things on the dashboard such as the promotions thus resulting in more cross-selling. I made sure to stick to Halifax’s color scheme as they wouldn’t be Halifax without it. As a user myself, I’m happy with the changes I've made and do believe it would lead to a smoother, quicker and more accessible user experience for a lot of people.

What i think went well:

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

What I think could have gone better:

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

Overall, I’ve enjoyed the entire process and I feel a lot more confident in my skills and I’m ready to do even better next time.

I’d like to thank the Love Circular team and in particular my instructor Ali Erol for teaching me everything I need to know and supporting me to be able to complete this case study.