ICICI BANK

Redesigning a Mobile Banking Experience

Research | User Interviews | UX Design | Prototype | Test

The Challenge

ICICI Bank wanted to revamp its personal banking app, iMobile for iOS. We were tasked to design an intuitive and delightful banking app, with wide-ranging functionality as well as cater to a diverse audience.

My Role

I was the lead for UX design of the entire project. Being a project of this magnitude, the learning curve was quite steep. Once I caught up with the pace (breakneck agency speed 🐱‍🏍) and the expectations, it was a smooth ride for the most part.

This project was done in collaboration 🤠Jishnu Nair (UX), 😇Tanaji Chaugle (UI), and 😈Priyanka Kane (PM).

⏱ Project Duration: 6 months

🔨 Tools Used: Figma, X-Mind, Invision

📲 Platform: iOS

Product Definition

A little about ICICI Bank

ICICI, the biggest private bank in India with a presence in 16 other countries, has consistently pioneered in adopting new technologies to make their users' life simple. In 2008 ICICI launched India's first mobile banking application ‘iMobile’, which has over 10 million users today.

What we knew before starting

  • After conducting multiple stakeholder interviews with ICICI we understood the current app processes, limitations and flaws.
     

  • We found out that there were certain mandates from the Reserve Bank of India that couldn't be changed.
     

  • According to the latest Forrester report, Indian banking apps fare poorly in comparison to their global counterparts in leveraging mobility and cloud. Not a single Indian banking app scored above the global average of 65 out of 100. ICICI was the highest-rated with an overall score of 63 out of 100.
     

  • With all its limitations and flaws, the app was still very popular among the customers and was considered as one of the best among competitors.

India's first mobile banking application ‘iMobile’ launched in 2008

 

Research

Understanding the user

Customers accessing their bank’s website for various functions - Global

What do users (existing customers) mostly do on a bank website/app?

Creating user personas 

The target users for this app were existing customers of all age group, and that added up to 10 million+. That was a wide-ranging audience to please.

To dive deeper and understand the usage frequency, usage pattern, pain-points, discoverability of various features and the time taken to perform an action, we conducted user interviews with 8 users from our workplace of which 5 were ICICI customers and 2 were other bank customers. From these interviews, along with client provided details and analytics, we created 3 personas.

Competitor Analysis

Getting to know the competition

Surprisingly, at that time not a single Indian bank had an app that could be considered ideal in terms of design, features, and ease of use. So, along with looking at some direct competitors like HDFC and SBI, we also looked at some indirect competitors such as Dhani, Walnut, Paytm and many other apps throughout the process.
 

We took note of what the competition was doing good (and best) in terms of features, design, and overall experience.

We also found out that ICICI stood out in terms of the number of features offered such as Make UPI payments, Apply for Loan, Design your own card, etc. The only issue was that they were not easily discoverable.

OUR NEW PLACE

I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.

Heuristic Evaluation

Shortcomings of the existing app

We did a Heuristic Evaluation of various screens and documented the usability flaws such as unnecessary taps, lengthy forms, and complex processes that can be improved. Below is the evaluation of the Dashboard.

Stagnant layout

No provision to discover new features or receive personalised suggestions

"My Favourite Transaction" not being a frequently used action, doesn't require this level of prominence

Notifications/account updates are not seen on the dashboard

Profile area takes up 30-35% of the screen which can be used to display important/relevant data

Balance checking, being the most used action by a user, is not present anywhere on the dashboard

The grid shows multiple services which are not prioritized as per user’s usage

Defining the design objectives

Sorting the information in hand

InformationArchitechture

We first prepared the IA for the existing app. Then we sat together and refined it further. We removed unnecessary states, rearranged pages, and also made room for the new set of features we were planning on implementing.

 

During the IA creation process, a lot of emphases were given to show only the most used services upfront and make others easily discoverable. In addition, it was also made easy to add and manage a wide variety of financial products - lines of credit, insurance, debit cards, investments, etc. We identified contextual opportunities to ‘converse’ with users while keeping the interface non-intrusive.

 

Design

Wireframing

We created several concepts for different pages (Login, Dashboard, Accounts, Expenditure Analysis, Fund Transfer, Bill Pay, Offers, Help etc.) Frankly, some options were better than the ones that we finally selected, in terms of user experience, but they were clashing with ICICI's business goals. While simplifying user experience was of utmost importance, the discovery of new features and cross-selling was of equal significance to the business. The options that we finally went with seamlessly united both user and business goals. 

Dashboard Exploration

The dashboard is the gateway to everything else on the app. It was crucial that we got this right. So we explored multiple dashboard concepts. We wanted the dashboard to have an overview of all user accounts, discover more features and product and enable the user to quickly access his/her most used features.

Test. Evaluate. Repeat.

The testing was done phase-wise. As soon as a couple of wireframe states were finalised within the team, we would schedule quick user testing sessions with other employees of the company. The number of users varied from 3 to 5. After incorporating relevant user and client feedback, the final wireframes then moved into the UI design phase and finally into development. 

Testing

 
 

The final Dashboard

Let's break it down for better understanding

A holistic view of the products/services owned by a user. Research findings suggest that most users own a single product from a bank, primarily a savings bank account hence I have tried to lay more emphasis on user's primary engagement rather than showing all the product variants upfront for users to choose from.

What can be simpler than showing upfront the actions a user would likely perform. The options are shown under ‘Top Activities’ will be based on the most frequent activities performed by each user.

'Discover' section was one of the main highlights of the dashboard which would focus on analytics, suggestions, and tips based on the tasks and actions the user has already performed.

 

This would increase user engagement and build a sense that the bank is smart and it understands the user.

Spending Overview -

Summary and Analysis of the spending. Also shows a trend of spending pattern.

Transaction Timeline - 

Cash inflows and outflows of various accounts in a single timleine

Upcoming Transactions -

Transactions like Credit card bill / Phone bill / SIP Payment ,etc

Service Requests-

Users can track their requests like New ATM Card, Check Book, etc.

Tips-

Suggestions that can help the user to spend wisely. This could be a place to cross-sell other products also. 

Visual Designs

Key screens

🐝 Hover over to view the old design.

* View on the desktop to hover and see old app screens

Log In

Dashboard

Transactions

FD Account Details

Bill Pay

Feedback

Spending Overview

Track Service Requests

Upcoming Transactions

Things I learned

Working on this project has taught me a lot in terms of the design thinking process, the do's and dont's of mobile design (especially when it comes to iOS), and how to not get married to an idea.

Final outcome

The end product was exactly what we envisioned it to be. A beautiful and functional banking app, one-of-its-kind in India. The app allows the user to perform all basic tasks seamlessly. It also makes those not-so-commonly-used features discoverable if the user ever needs it.
 

To ensure that the interactions (and features that enable them) remain relevant in the years to come, we integrated our UI UX framework with simple yet trending features like payments via Siri (voice-enabled) and QR codes; login via Touch ID, Face ID, and voice recognition; and Siri-enabled in-app voice search, helped make the iMobile app ready for the future.

 

🚀 The app launched on June 7, 2018 and has got a great amount of positive feedback from real users.

🏆 And guess what? ICICI Bank secured the top spot in the report – ‘The Forrester Banking Wave™: Indian Mobile Apps, Q2 2019’ with a combined score of 77/100 (up by 14 points and way above the global average of 65)

 

🎈 The app now ranked 6th in the finance category in the Apple store and also was featured on Apple's website.

Download from apple store.png
google-play-badge (1).png

Feedback

Finally, one user-feedback to sum it all up

Always my favorite and never disappointing
The update has a great new User Interface. Love the new Analytics feature called “Discover” introduced which gives you a spending overview, expense timeline, upcoming scheduled expenses, status of service requests.

What I loved the most was the Cashflow Analysis and estimated budget analysis explained by colorful bar graphs. It's like having my personal Excel sheet of expenses which summarises my expenses for me in all kinds of ways.

There is also a Knowledge Horizon section, which gives you really helpful tips on saving money, taking insurance and others...

Happy to see that ICICI has taken a step ahead and gone beyond conventional banking practices by introducing features which not only help you transact your money but also advise you to manage and save it well. A job neatly done!
 

BeauRose2

ICICI i mobile user

Next Project

Dish TV - Website