Overview

Being one of the leading banks in Sri Lanka, Commercial Bank is very well known for their good customer service offline. Their online banking experience however didn’t reflect the same and was falling way behind industry standards.

Being a frequent user who uses their iOS app very often, I knew the experience could be a way better with a few key fixes. I wanted to redesign the existing app with a focus on providing a simple, clutter free banking experience.

Disclaimer

I am not affiliated with Commercial Bank in any capacity. This project was done as an exercise to challenge myself as a designer. This doesn’t mean my solution is the best one, It’s just a solution I prefer over the existing one.

I’m aware that unsolicited redesigns are unrealistic due to the lack of constraints present on a real project. While I can never do justice designing an app without considering the constraints, I can assure you that I’ve done my best not to make this project another “visual only” redesign.

Give it a read and let me know your thoughts.

Screens From The Existing App. Notice How It Is Not Optimized For Newer iPhones With The Notch.

The Problem

Apart from the essential features on a typical banking app, The app comes packed with many other features such as finding the nearest branch, Inquiries for Investments & Loans, receiving a summary of Deposits/Loans & Treasury Bills etc.

While the app offered all these features, Most of them were very complicated and seemed to be broken experiences. Even essential features like transferring money and paying bills had many limitations within the app.

To give a better idea, The following key issues contributed to the overall complexity of the app.

Limitations Within The App

For instance, adding a new beneficiary was only allowed from the web version of online banking, which means any transfer done in the mobile app can only be done to beneficiaries who have been previously added.

Fund Transfer Screens From The Existing App. There Is No Functionality To Add A Beneficiary.

Lack Of Native Features

The existing app didn’t take any advantage of the native features provided from the device to remember a user or authenticate. This resulted in the user having to type in his or her username and password every time to check their bank balance.

Login Screens From The Existing App. No Face ID Or Touch ID Support.

User Interface & Usability Issues

The user interface was outdated in terms of aesthetics and led to other issues such as illegible font sizes, smaller tap targets, crowded information and poor layouts which ultimately affected usability. The app didn’t support the newer iPhone models with the notch as well.

Screens From The Existing App. Tabular Data Was Not Optimized For Mobile.

Poor Navigation

Almost all the features within the app lived under the hamburger menu with no categorization or separation between the core and optional features. This made it harder to navigate specially for new users.

The Hamburger Menu Of The Existing iOS App.

Goals To Achieve

My main goal with this redesign was to provide a simple banking experience free of clutter and complexity. I believed fixing the key issues I’ve mentioned above, would minimize the clutter and complexity, Ultimately providing a better and improved user experience.

With that in mind, I reframed the main problems as opportunities to work on and made them the goals of this project.

Make Use Of The Native Features, So That We Ensure A Secure Experience With Minimal Effort From The User.
Minimize Platform Based Limitations, So That Users Complete Core Tasks Without Relying On Another Platform.
Improve The User Interface, So That We Increase The Overall Usability Of The App
Restructure The Navigation, So That We Increase The Visibility Of The Core Features.

Research Methods

Although the issues mentioned above prompted me to work on a redesign, I could totally be biased especially as a designer. Maybe all these issues were not that big of a deal and maybe the app had other problem areas which I missed out on.

So I utilized two methods to get a better understanding of what the users think about the app.

Quantitative And Qualitative Survey
App Store Reviews

I understand validating problems this way without analyzing app data and metrics is not the best way to do it, Specially if you have access to it. I limited my research to these methods because I had no additional access to Commercial Bank’s app analytics or research data.

Online Survey

I started putting together an online questionnaire and reached out to family, friends and mutuals who use the app. I managed to gather responses from around 30+ participants who were aged between 18 to 55.

This was ideal for me since I wanted to identify issues from a diverse range of users whether they be a tech savvy user or a person generally having difficulty using tech.

I’ve mentioned the key takeaways from the survey below.

Some Of The Survey Results.

71% Of The Participants Mentioned Manual Sign Ins To Be The Biggest Pain Point In The App.

“Slow loading time and the manual sign ins are the most annoying man!”
- Michael Lu, Tech Lead In His 30’s

63% Of The Participants Preferred Desktop Web For Transfers Over The Mobile App.

“Now in the app we have to send an email to the bank to add a beneficiary. if we could add a beneficiary or payment beneficiary from the app it’ll be most appreciated.”
- Shamran, Sales Executive In His 20’s

When asked further about why they preferred the desktop version, Users revealed that the inability to add beneficiaries and payment accounts from the app makes the app useless for transfers. Some also mentioned that the app was not stable so they felt secure doing a transfer on the desktop website.

76% Of The Participants Used The App Only To Check Their Bank Balance And Transactions.

Out Of The 76% , 36% Of The Participants Used The “E-Passbook” Service To Check Their Balance Instead Of Signing Up For The “Mobile Banking” Service.

The “E-Passbook” Feature was a service provided by the bank enabling customers to check the bank balance and transactions free of charge while the “Mobile Banking” section was a paid service providing typical online banking features like transfers, paying bills etc..

The E-Passbook feature was something I didn’t consider much during my initial explorations of the app but the survey results made me realize that this feature is worth looking into.

36% Of The Participants Used Only The “E-Passbook” Feature From The App.

It was also interesting to notice that people over 40 who generally didn’t consider themselves tech savvy opted to use the E-passbook feature because it was free and easy to use.

Out of all the insights shared above, I’ve rounded off the percentage values making it easier to understand.

App Store Reviews

I then skimmed through hundreds of reviews and organized them based on the type of issue users were facing (similar to an affinity map).

This helped me get a high level view of the most frustrating pain points users had to deal with. Some of the issues also validated the concerns I had during my initial evaluation of the app.

I’ve included some of the highlights below.

36+ Reviews Complained About The Limitation To Add Beneficiaries Within The App

Some Of The Reviews About Limiting New Beneficiaries.

64+ Reviews Complained About The Lack Of Biometric Authentication & Sign In Limitations.

Lack of biometric support and having to type in my credentials every single time I want to use the app was the main reason which prompted me to work on this redesign. This was also one of the main issues highlighted by users in the survey.

Some Of The Reviews Related To Sign In Limitations.

100+ Reviews Complained About The Lack Of Support For New iPhones & The Outdated User Interface.

Some Of The Reviews About The Outdated User Interface.

While I was aware that the outdated user interface needed to be improved, I didn’t think this would turn out to be the biggest takeaway from user reviews. Users also complained about the lack of support for newer iPhone models.

Apart from the takeaways mentioned above, there were also other issues users were facing with such as,

The App is slow even on a faster internet connection.
Too many bugs.
Issues with credit card cycles and transactions.
Questions related to registration.

I filtered out comments which were not constructive or didn’t point me to a feature or a flow. I also ignored the star ratings left by the users and focused mainly on what they’ve written.

Finalizing The Tasks

After research, I then revisited the universal goals set out earlier and compared them with the insights I’ve collected from research to see whether they contradict, miss or need anything to be added.

Since the goals I set out were not too specific and were general guidelines to improve the overall app experience, I used the insights from the research to formulate the tasks necessary to achieve these goals.

The following are the tasks i’ve finalized after considering all the data I’ve gathered from the survey, user reviews from the app store and my own heuristic analysis.

1 — Improve The Sign In Flow

Making use of the native features ensuring a secure experience with minimal effort from the user.

2 — Improve Transferring Money & Paying Bills

In a way to minimize platform based limitations, So that users complete core tasks without relying on another platform.

3 — Redesign The Home & Transactions Page

With the goal to revamp the interface and fix all the consistency issues affecting usability.

4 — Fix Any Shortcomings In The E-Passbook Flow

With the goal to identify any shortcomings and optimize the experience.

This was not something I initially planned but research proved that E-Passbook was a crucial feature being used by many. I wanted to take this as an opportunity to learn what works and fix any shortcomings.

5 — Rethink The Information Architecture

With the goal to restructure the navigation, so that we increase the visibility of the core features and also make navigation easier.

Although most users didn’t have much of an issue navigating around, I decided to go through with this for 2 main reasons

During research, I found some indirect problems leading up to navigation such as users getting confused on why a specific feature is disabled for them, users wondering where all their payment beneficiaries are etc..

I also believed this would help the overall experience of the app by prioritizing and increasing the visibility of the core features.

Information Architecture

With all the tasks finalized, I wanted to start by revising the information architecture since that sets out the entire navigation of the app.

This contributed to the complexity of the app hiding away all the key features on a single level.

Before

The current layout had the entire navigation hidden within the menu button. The number of top level destinations was also too much, especially since there was no categorization or prioritization of any kind.

The Existing Information Architecture

After

At a time where even leading android apps are starting to let go the hamburger menu and starting to embrace the bottom navigation tabs, The menu bar on iOS was a big red flag in terms of navigation and overall architecture.

I wanted to start by rethinking the overall information architecture according to the tabbed layout, prioritizing the most used & important features of the app.

Refined Information Architecture

Wireframes

Prior to working on the wireframes, I evaluated the apps of competitors as well as other leading apps related to the sector to see how similar problems have been solved before. It also made me aware of the existing patterns in use specially among banking apps.

Keeping that in mind, I started brainstorming possible solutions which could fix the existing issues in the current app. At this stage, I was mainly focusing on different patterns and layouts which could get the job done rather than the details.

Some Of The Screens From The Initial Wireframes.

Visual Design

Once I had all the wireframes for the major flows sorted out, I then moved to the visual design phase. Since one of the key issues was the outdated user interface, I wanted to give the app a visual facelift while improving the user experience. I took the following things into account with the new look and feel.

Make use of the brand’s iconic blue color into a modern look and feel.
Use native iOS controls and patterns as much as possible.
Stick to the system default font stack for all the benefits it provides for free.

The Sign In Experience

The biggest pain point within the flow was the repetitive sign in every time you open the app even if you’ve already signed in before.

Screens From The Existing App.

“Whenever possible, support biometric authentication. Face ID and Touch ID are secure, familiar authentication methods that people trust.”
- Extract from the Human Interface Guidelines.

The solution for this is very straightforward and was even mostly suggested by the users under the review section. I wanted to replace the existing flow with biometric authentication since most of the devices come with either Facial or Fingerprint recognition.

Redesigned Sign In Flow.

During the initial sign in, I decided to prompt the user to allow access which in return results in faster login afterwards. The Flow for a first time user would look something like this.

The Flow When You First Sign In.

Other Cases

I also wanted to explore other cases like devices with Face ID disabled or older devices which do not support biometric authentication.

Older Devices Can Rely On Touch ID (If Available) Or Pin Codes

When Face ID Is Disabled Or Unable To Recognize Your Face, The App Resorts Back To Sensible Defaults.

Home & Transaction History

The current home page was too crowded with information which is not really important and the user interface was outdated. As a user, I was more concerned about my balance or my last transaction more than my name, address or any personal information which I already know.

I wanted to restructure the page layout according to the features which would be mostly used within the app.

Screens Before (Left) And After The Redesign (Right).

Some Highlights Of The Improvements Made.

Filtering Transactions

Another main issue within transactions was that you were unable to search or filter them. Segmented controls can be a solution to filter between sent and received transactions while a search field lets you search for a specific transaction from the list.

Screens After Design. Easily Filter Between Sent & Received And The Search.

Money Transfer

Transferring cash from the app is overwhelming since all the controls are on the same page and users get confused trying to figure out which one to tap first.

Screens From The Existing App.

With the new flow, the focus is given to the registered beneficiaries while relying on sensible defaults. Simple fixes such as pre selecting your account if you only have one becomes very effective in minimizing the friction.

Redesigned Transfer Flow.

Adding A New Payee

Inability to transfer to new payee’s (who are not added to the users list already) is another limitation which forces the users to use the desktop website.I wanted to come up with a flow which enables the app users to easily add new payees.

Screens For Adding A New Beneficiary.

Other Cases

I also reworked on a few other cases such as the payment history page which had a crammed up table layout and converted it into a list. I wanted to visualize on cases like how beneficiary lists would look like if you had more than one account of your own and how selecting them during a transfer would look like.

(Left To Right). Transfer History, Beneficiary List With Multiple Own Accounts & Selectable Account List.

Pay Bills

Paying bills was a painstaking process since it expects the users to remember which category and sub service they have added in so that they can tap into that and make payments. There was no quick glimpse to see all the different payment accounts you have added since it was all nested within the main categories.

Screens From The Existing App.

My main goal here was to restructure and present payment and settlement accounts in a simple way.

Instead of nesting the added accounts deep down in the categories they belonged to, I made them all visible in the first level so all your accounts are visible in one place and easier to reach with a fewer taps.

Redesigned Flow For Paying Bills.

Adding A Billing Account

I made use of the existing categories when you’re adding a new billing or settlement account.

The Flow For Adding A New Bill Account.

ePassbook

E-Passbook was one of the features which was easy and simple to use. I didn’t have anything major to fix here apart from the UI level in consistencies. So my goal here was to make the design consistent for both transactions in the E-Passbook and the Mobile Banking modules.

Transactions On ePassbook (Left) Vs Transactions On Mobile Banking (Right) On The Existing Design.

I utilized the same components to show accounts and transactions since the same information was presented in both mobile banking and ePassbook sections.

Transactions On ePassbook (Left) Vs Transactions On Mobile Banking (Right) After The Redesign.

Looking Back At The Designs

I focused only the major flows within the app based on my heuristics and research. That being said, There were many core features I didn’t work on such as credit card management, branch locator, my account etc…

I also wanted to animate all the screens and conduct usability testing to validate the solutions but was unable to do so.

This was mainly done to limit the scope of this project and not go all aboard specially given the fact this project has been delaying forever.

Is An Unsolicited Redesign Worth It ?

The idea for this whole project started with a dribbble shot which was done just for fun without any thought. It then prompted me to take this on as a product design challenge and redesign it.

The Sky Is Not The Limit

I understand unsolicited redesigns don’t take into account the constraints in terms of time, tech, data, design and business decisions. The existing commercial bank app during the time of writing was released based on a .Net framework 8 years ago so I can only imagine the limitations in terms of tech to get basic things working.

The main intention of this project was to propose a decent solution to a problem which I felt could be improved, while challenging my skills as a designer. I have zero malice against the brand or the app with this project.

“This one was not for the bucks but for the passion”

Not Another Visual Redesign

Keeping that in mind, One thing I didn’t want the project to be is another thoughtless visual redesign focusing only on the visuals and calling it a better product. I also wanted to make sure that I don’t forget about the constraints and go crazy with the features.

I knew I shouldn’t be spending this much time on an “unsolicited redesign” project but I also couldn’t help the fact that most of the issues I came across initially had proven solutions which would unleash the true potential of the app.

Was I being paid for all of this ? Nope.
Did I enjoy it ? Absolutely!

Final Thoughts

As I type this, I’m relieved that I’ve finally managed to conclude this case study after such a long period of time. The first draft of this file is dated back to 2017, 3 years ago!

Yes, my procrastination skills are unmatched, And I can’t believe It took a global pandemic for me to publish my first case study.

I had super fun on the overall process and I hope you enjoyed reading about it. If you skimmed through the main sections, let me know your favorite and least favorite sections. Also feel free to leave your comments and suggestions below.

If anything I’ve written is incorrect, outdated or confusing, please let me know. I would love to discuss and learn more.