Case study: Online banking application redesign
By: Iwalola Sobowale
Tags: Product Design, Redesign, UX Design, Banking, Product

Case study: Online banking application redesign

A critical UX case study for Fidelity Bank

I struggled with making the decision to write this case study mainly to avoid any controversy that may arise due to reasons I will explain below.

I was a former “Service Ambassador (SA)” at Fidelity bank and my role entailed onboarding walk-in customers at the branch level on the electronic channels (which include the mobile application) and helping these customers resolve any issues relating to these platforms.

Without going into too many details, this role enabled me to see how customers STRUGGLED with using the mobile application even from the onboarding process. Now, bear in mind that a lot of the issues faced cannot be resolved solely by even the best UX designer, and anyone who banks in Nigeria knows the “network issues” are pervasive and almost impossible to avoid.

I was hesitant to write this because, since I left the bank a few months ago, I have noticed that improvements are being made to the interface of the app, but I doubt that the insights of the Service Ambassadors who interact closely with the users of the app have actually been taken into consideration. I will urge Fidelity Bank to give more consideration to the requests, complaints, recommendations and valuable insights that these SAs bring to the table based on their first-hand experience with what amounts to a vast amount of “user testing” in UX design lingo.

Needless to say, the UX problems I will attempt to resolve are drawn from my nearly 2 years experience basically hand-holding customers while they tried to register and/or transact using the app.

In fact, it was my time at the bank that led me to delve into product design with the goal of using the valuable experience and the first-hand insights into customers pains, wants and behaviours, leveraging same to create better user experience on digital platforms.

Launch Screen

I really don’t have much to say here except that I feel that the background image is a little outdated and could do with some sprucing up with a more abstract image. I also changed the font of the slogan to look more contemporary and made the copy sound more refreshing and direct.

Log in Screen

Often times, new users will see the log in screen and would not be sure what to do next. The screen is jumbled and fails to offer clarity and clear direction, causing the user to be confused.

So I tried to give clear and direct instructions, made the screen less cluttered, and implemented a better visual hierarchy. This makes it easier for new users to figure out what to do to self-register, change their pin, enable biometric authentication etc

I positioned the ‘Log In’ card lower on the screen (slightly towards the middle of the screen) to improve usability so that users will be able to type better and more accurately without having to readjust their hand placement as would be required if they had to type at the top of the screen.

I observed that users seemed not to notice the switch to enable biometric (which in fact, has a low contrast to the background and is not clearly visible), as customers would still walk into the branch to ask how to do that. So, I added a tick box towards the left (a tried and tested heuristic technique), while also adding the fingerprint icon as a visual aid.

Another issue that majority of users struggled with relates to the password. This led to users frequently getting locked out of their online banking, and many, abandoning the app altogether.

The main issues are:

The password parameters are identical to that used on Apple iCloud and are rather complex for the average user, causing them to forget the password very frequently. If I had a dollar (about N500) for every customer that lamented as to why they couldn’t just use a pin instead I’d surely be at least N500,000 richer today lol. Because of this, I changed the password field to a 4-digit pin to improve accessibility.

Even users who are very tech savvy experience difficulties in entering the password correctly since they cannot see what it is they are typing and this is why I added the option for the user to be able to view the pin before they attempt to login. This would be really instrumental in ensuring that users don’t repeatedly mistype their password and end up being locked out of their internet banking profile due to the high security measures implemented by the bank.

Finally, I moved the ‘new user registration’ from the far bottom (where many users would not easily locate it) and placed it below the log in card to improve the information architecture of the log-in screen.

This is because in recent times, the bank, like many others has placed a lot of focus on on-boarding its customers on its electronic platforms so it is important for this feature to be more prominent on the screen.

I will conclude the case study here for today as I want to keep this detailed but short. However, I’ll be making this a series of posts to conclude with some other screens I feel could be better designed.

The aim of this case study is not to throw shade at the bank as I know they have invested heavily in their electronic channels, but to simply put my knowledge to good use by highlighting how the bank could create a far better user experience for their customers.

This is my first detailed UX case study and I would really appreciate your feedback, suggestions and comments. Thanks for your time.