_edited.png)
icicidirect.com
UI and Visual Website Designs for leading Indian bank: ICICI Bank
OVERVIEW
Type: Professional Work | Advanced User Interface and Website Designs
Organization: IdeaFactor Design
Client: ICICI Bank
ROLE/ RESPONSIBILITIES
-
Understanding brand and business requirements.
-
Identifying design problems and devising elegant solutions.
-
Translated requirements into style guides, design systems, design patterns and attractive user interfaces.
-
Created visualization of screens within prototype framework.
YEAR
Year: November 2021 - February 2022
The UX design and research team at Ideafactor, Mumbai, had a vision of the future software, logic, user portraits, the environment and device(s) involved for their next product launch—they then started to work on the main stages. I was commissioned to design the user interface for various pages for the clients’ websites: ICICI Direct. The important task was to visualize the interaction and interface of a future software product. The designs were made with careful consideration by the UX and the development teams.
Improving the conception ➝ design ➝ validation ➝ dev workflow
Problem
Users experience challenges in FinTech products for all sorts of reasons. Everything from overly complex navigation patterns to visual noise can distract from the content and prevent users from getting the most out of the product. From targeting the wrong age group to a lack of visual engagement, user engagement can lead to a serious dip.
The use of banking apps and websites after the demonetization of 2016 has surged in India. Native bank apps such as Kotak, ICICI, SBI and HDFC are less commonly used as they are overpowered by third party banking apps such as Google Pay, PayTM and PhonePe.
These digital products are chosen over native Indian banking apps as they provide a simple yet intuitive method for a user to check multiple tasks about their bank account. They also provide a seamless experience for the transaction of money to another business/account, to check balances instantly and analyse expenditure on a daily, monthly and yearly basis.
These third-party apps have gained the seal of trust of millions of users by providing a smooth experience, updated security features and a rich look.
Design Process
1. Sketching: +/- 5-10% of total UI Design time.
A high-level understanding of how an interface may be created.
2. Wireframing: +/- 50% of total UI Design time.
Understanding of product navigation, opportunity to estimate backend development stage, interrelations of screens, a partial estimate of visual effects.
3. Design: +/- 40% of total UI Design time.
Prototype, editable source, a full estimate of the development stage, understanding of product logic and appearance.
4. Slicing: +/- 5-10% of total UI Design time.
Opportunity to start the software development stage.
Auditing the initial state of affairs
Armed with the ideas of product improvement, we proceeded with conducting an audit of the existing designs. The issues we identified were then prioritized and scheduled to be worked on.
One of the major issues was that the ICICI Direct mobile app wasn’t consistent with the web one. Additionally, it hadn’t been really intuitive, which was a suspicion of ours that was then further proved by the usage data. So it was decided to design the website in line with the mobile app.
The rest of the improvement areas included working on the existing design components and visual design, reducing cognitive load, and better usability.
ICICI mobile app
Key Challenges and User Pain-points
User reviews about the old website:
“After the new role out of this version, we don't have an access to directly talk with a customer service representative. As you know that banking and financial things are very critical and sensitive. the new role out with the chatbot option is not much reliable or accurate. The chat option has only limited sort options as well as it is very time-consuming to solve one query or ticket. If we choose any ICICI customer number from an open-source search engine like google then it may have a chance for it being incorrect.” — Govind Sharma
“Too many advertisement banners and checkboxes. The user experience is totally ruined. Even if you want to do a fund transfer there is a checkbox for buying insurance. Seriously? Unnecessary notifications about their internal new product launches. ICICI website has every unnecessary feature but the traditional banking experience has degraded drastically. Other bank apps are less cluttered, with neat and clean UI and have no unnecessary notifications. At least upgrade the experience for privileged account holders.” — Sumit Raghavan
Orange
#ED8D41
Cyan Blue
#173D6E
Red-Orange
#E4E0DF
Red-Orange
#AF3D19
Humbrol Green
#99CC33
Cyan Blue
#4577BC
White
#FFFFFF
Black
#000000
User Interface that's intuitively insightful
Customer-bank relationships don't have to end at transactions. Using behavioural data, we could design to make newer features more discoverable. We identified contextual opportunities to ‘converse’ with users while keeping the interface non-intrusive. A few features which you will see on the live website include:
-
Expenditure Analysis: Gives a category-wise breakdown of expenses based on where and how the money was spent.
-
Upcoming Transactions: Analyzes spending patterns to pre-empt and prompt users with recurring transactions like EMIs, bills, rent, etc.
-
Budgeting and Comparisons: Gives delightfully visual and easy-to-digest monthly comparisons of expenditures, while allowing users to set monthly budgets.
Outcomes and Learnings
After the usability testing, users were pleased with the new homepage and transaction process. They were also much delighted that the credit card payment and view balance were much easier to access. Here, time management and problem-solving were at focus.
UX FOR LONGEVITY
Crafting an exceptional mobile banking experience requires time, resources, and of course, capital investment. Basically, catching up with the ever-evolving smartphone features with frequent upgrades is far from feasible for a complex organisation. Hence, ensuring that the interactions (and features that enable them) remain relevant in the years to come was bold on our agenda.
I have come to the conclusion of understanding the broad spectrum of design thinking, questioning the limitations and asking the right questions. This project gave me a simple explanation that if user issues are given immediate attention, the product wins and the business eventually grows.