Two-factor authentication for a charity bank

The story

From September 2019 all banks in the EU have to enforce 2 Factor Authentication for all customers on key journeys, including login, new standing orders or payments, even when looking at bank statements older than 90 days.

The only problem is that most people don’t know or use 2FA at the moment, so there was a lot of potential for frustrated customers because they simply can’t/don’t want to use 2FA.

As a project team we had to step up to the challenge of making data and transactions more secure with 2FA, but also most importantly, the design needed to be easy and seamless enough to complete so it didn’t stop customers from doing what they need to do.

What I did

  • Led the UX and designed the user journeys of the entire 2FA solution for the bank, which included sign up, authorising individual and group payments, managing users, verifying log in and user settings.
  • Researched the competitors. It was important to discover how other banks had implemented this feature and what the advantages and disadvantages were. I created a mood board to capture the patterns for inspiration.
  • Ran ideation workshops with stakeholders to create an experience which delivered on customer and business needs.
  • Designed and tested prototypes at varying degrees of fidelity to validate ideas. These were also rapidly shared with members of the bank and project team for feedback.
  • Managed multiple stakeholder needs, interests, priorities and expectations effectively and sensitively, whilst at the same time being an advocate for the customer.
  • Presented my solutions in a confident manner explaining and justifying design solutions and decisions to multidisciplinary teams
  • Delivered design specifications to the development team and worked closely with them as they implemented my ideas.
  • Re-skinned accompanying white-label app to match desktop UI.
  • Designed image assets for accompanying app for distribution to Apple and Google Play Stores.

Annotations and sketches after a review session

Annotations and sketches after a review session

A very early task flow to understand the user journey

I re-skinned the accompanying white-label app and designed the assets for CAF Bank UniqueCode for Apple and Google Play Stores

What were the challenges?

It was the first time I’d worked on the bank’s website, and the design was a little dated. The business constraint was that we didn’t have the budget to redesign the entire site at this time. From the off the designer in me wanted to completely overhaul it, but I had to be careful that the 2FA solution and sign up journey didn’t feel like you were on a completely different website. A consistent experience is what the user is expecting in order to feel safe and to trust our product. There was also no existing style guide to work from so I had to create my own as I went along. I pushed the design a little to give it a slightly more modern feel but I always ensured the key elements such as buttons, colours and fonts were consistent – a lot of inspecting the code on the front-end was necessary to understand the current styles.

This was a complex project for the bank, so I needed my troubleshooting skills during the high-pressure situations. I spent time with key decision makers and the security team to determine what must be in each of the journeys as there were a lot of protocols for the bank to follow. We already had a sign up flow for text alerts on the site; customers could opt-in to receive notifications to their mobiles whenever a payment had been made but now we were introducing 2FA we no longer needed these two different solutions – we had to combine them or the UX would have been confusing. We decided to go with a phased roll-out approach so I had to design three different scenarios and user journeys. We had some customers’ mobile numbers already because they’d signed up to text alerts, but for the majority the UI had to prompt them for their mobile number, requiring a different flow.

How did I fight design’s corner around the table?

As I iterated on the designs it was becoming clear that great copy would help users take action and understand the interface even better. For example on one of the steps we offered the choice of receiving the notifications through our app or via text message – explaining exactly what this meant seems self-explanatory but to non-technical customers it was vital. The copy needed to be consistent too. So I worked with our content expert in our marketing team and convinced stakeholders it was worth the extra effort and time to prioritise this.

In a meeting I had to justify designing in a progress tracker to the sign up journey, which might seem like a no-brainer to a fellow UX-er but convincing some stakeholders of the benefits was needed this time. I wanted to logically group the steps, give the customer clear expectations and allow them to track their progress at a glance. I explained that studies show that offering users a clear idea of how many steps it takes to get to the final target can significantly reduce abandonment.

If you know how many steps you must complete in the process, you’re more likely to complete it.

In conclusion

This was a fantastic project for me personally and I loved it. As the sole in-house designer I had to deal with many high-profile stakeholders across the business. Designing the UX to bolster security for our banking customers was a big responsibility too. What is clear though: UX, tone of voice and frictionless authentication flows are the key differentiators that will gain customer loyalty.

To see the full case study for this project, including more detailed designs which I can’t show due to security reasons, please contact me.
Neil Berry

Experienced UX/UI designer with a passion for all things design. Currently Senior UX Designer at Charities Aid Foundation (CAF), one of the UK’s largest charities.

Share:

Looking for Something?