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 😇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.
%20(1)%20(1)%20(1).png)
India's first mobile banking application ‘iMobile’ launched in 2008
Insights from stakeholder interviews
-
Despite all its limitations and flaws, the app was still very popular among the customers and was considered one of the best among competitors and they didn't want to deviate too much from the existing designs
-
There were a lot of dynamic elements on the app and they wanted the new designs to take care of that and be scalable
-
There were certain mandates from the Reserve Bank of India that couldn't be changed.
-
They wanted the app to have some intuitive and personalised features that would wow the users
-
Indian banking apps fare poorly in comparison to their global counterparts in leveraging mobility and the 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.
%20(1)%20(1).png)
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?
User interviews
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.
-
80% of customers that were interviewed used the iMobile app and rarely visited the website
-
Young users would check their account balance quite often at the beginning and end of the month
-
30% of users look for recommendations /expert advice before choosing a financial product
-
Users expected their banking app to be smart and intuitive like other apps they use
-
Once users choose a bank for their primary account, they tend to look for options for other products also from the same bank
Creating user personas
While anyone could be an ICICI customer, we restricted ourselves to 3 primary personas that would account for most of the user sets on the app.
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
.png)
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.
.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
