User Interface Design | Visual Design | Information architecture
UI Design for Sparklin Innovation Design Agency, Delhi
Domain: Retail and Corporate Internet Banking | Client: ICICI Bank | Timeline: 4 months
Overview
During my internship at Sparklin, I was engaged in multiple design projects for a financial services client - ICICI Bank. I was involved in the design of new features for ICICI’s existing retail banking website, worked on certain aspects of their dashboard for NRI services and contributed to the design of their mobile app ‘Discover’. I was also part of the 2 member team that led user interviews with ICICI’s corporate clients to understand their experiences with ICICI’s corporate banking services. This case study briefly highlights my process and impact across these projects.
My Role and Process
I worked with a UI designer, senior UX designer, a product manager and 4 engineers for majority of the projects. We shared a very open and collaborative relationship but individually led the design on different projects. My individual contribution to each project has been detailed below.
About ICICI Bank
ICICI Bank Limited is an Indian Private bank headquartered at Bombay, India. It offers a wide range of banking products and financial services for corporate and retail customers through a variety of delivery channels and specialised subsidiaries in the areas of investment banking, life, non-life insurance, venture capital and asset management.
Featured Projects
Below you’ll find an overview of my contribution towards some of the projects I had the opportunity to be part of during the course of my internship at Sparklin Innovations Agency. I would love to chat about the full process for each project with you, so please don’t hesitate to get in touch.
Project 1: ICICI iWish Goal Based Savings
Overview
Imagine that you would like to begin saving money to buy a car. However, given the nature of your current job as a freelancer, your savings differ from month to month which makes it challenging to invest regularly into a deposit scheme. You’ve been thinking about other options but are also concerned about losing money if a month of low earnings were to force you to make a premature withdrawal/shut down the account.
iWish is a recurring deposit product from ICICI Bank that seeks to enhance financial empowerment for such individuals. It lends consumers the flexibility to decide the amount, frequency and tenure most suited to their investment goals while also assuring good returns.
The goal for this project was to integrate iWish into the existing banking website. I worked on designing the UI for the setting up flow which comprised of the user’s journey while creating a new iWish. Since this was a new product concept being introduced, I experimented with many iterations of copy, graphics and layouts in order to make the choice as clear as possible. With feedback from the design and technical teams, along with internal testing, I incorporated the product offering seamlessly into ICICI’s existing design system.
Automatic Debiting
Most Indian banks that offer recurring deposits provide consumers an option to set up automatic debiting from the account they’ve linked to the deposit. This helps people with regular incomes to avoid missing the payment of an instalment by automating the action.
As this feature is heavily used by Indian consumers, I wanted to bring it into the iWish experience as well. After going through a number of iterations with the user research team, a toggle button accompanied by the words ‘Lets make it a beautiful habit’ was selected as it offered users flexibility to save monthly, fortnightly or customly but also gave them a positive nudge towards habit building.
Customised Tooltips
We also included customised tooltips that guided consumers to regularly boost their iWish and/or contribute higher amounts in order to achieve their iWish targets on time.
Project 2: Website Adaptation for Mobile Devices
When I joined, the team was working on redesigning parts of the ICICI retail banking website for a number of reasons:
Low adoption: The client wasn’t seeing the adoption numbers hoped for — perceived usefulness, perceived ease of use, trust and security were affecting online banking adoption and recurring behaviour.
Usability issues: There were a number of usability issues that frustrated costumers and led to wastage of time.
Discoverability issues: They were receiving a number of support issues for functionality that was already available on the website but either couldn’t be easily found or wasn’t labelled intuitively (for example, “How can I purchase a Rubyx Credit Card online?”).
One of the usability issues that came to light was that while customers found it easy to compare and select a credit card on the website, they struggled to do the same on their phones. I was tasked to design the mobile adaptation with the goal of making credit card selection more mobile-friendly.
An initial version with compact card layouts proved confusing for users, as it divided their attention by disrupting natural eye movement patterns and looked cluttered— users spent more time finding the information they wanted.
We changed this layout so that customers could focus on a single expandable card at a time. When a customer expanded a card using the button at the bottom, this interaction pulled down the bottom of the card to reveal further details about its features.
Project 3: Dashboard for NRI Services
Overview
This project began as an incremental change to the ongoing re-design of the ICICI website. As the research team really listened to more users, including Non Resident Indian users, they began to form hypotheses that clearer communication and navigation site wide was needed.
Our goal with the NRI dashboard was to improve information architecture to match user needs and to boost find-ability of content. This was based on the results from usability studies conducted by the research team to determine priorities for the re-design effort.
I worked closely with a team of 2 UX designers and 2 front end developers to find solutions.
‘What our website can do’ vs. ‘What you can do with our website’
Participants felt that the dashboard didn’t clearly display the information most important to them (‘the layout is confusing’) and poorly represented the value it could create (‘what does this do for me?’).
As NRI users typically operated multiple NRE, NRO and deposit accounts, their requirement for good organisation and efficiency was considered critical. It was observed that their impression of what was possible online was pretty underwhelming.
Results
Based on the usability studies, we decided to redesign the homepage using more intuitive and appealing UI. By swapping the long carousel display of accounts with ‘savings’ and ‘deposits’ cards, each having drop down lists of accounts, we streamlined navigation, organisation and management of financial data. Enhanced search features such as the search bar improved efficiency and navigation for users as well.
Project 4: Opening a Savings Account for a Stand Alone Credit Card User
When pondering ‘which savings account is right for me?’ people’s preferences and needs change at different stages of their lives. Answers to questions such as ‘What am I saving for?’, ‘Is the return from this saving account reasonable for me?’, ‘Does the minimum balance requirement suit me?’ reflect personal priorities and hence, having easy access to such information can influence quick and confident decisions.
The goal with re-designing the savings account comparison page for ICICI’s website was to equip users with all the information they needed for effective decision making. It was believed that providing enough comparative insight into the benefits of each of ICICI’s savings account options would encourage smarter money choices amongst users.
The initial wireframes having 4 savings account cards in a horizontal stack proved to lack the element of explicit comparison needed by users to evaluate which accounts are most relevant to themselves and weigh their understanding of the offerings.
The design was revised to focus on the direct comparison of the two accounts that most suited the needs of the user. These two accounts were especially curated and recommended based on the details entered by the user in the ‘Account Details’ form on a prior screen.
As having a list of benefits for each account led to too much text being displayed for the user to read, a further revision to graphically represent the benefits was required. We used a grid layout where each box expanded on hover to reveal more information. Consequently, a mobile adaption of the final design was also created.
Project 5: User Research on Corporate Internet Banking
Designed user experience research for ICICI’s corporate clients to make strategic recommendations.
Conducted 30+ user interviews with startups and enterprise companies in financial services, logistics pharmaceuticals, technology and consumer products.
Organised data collected to facilitate the meaning-making process.
Collaborated with designers, product managers, and developers for problem definition, strategy, and feature prioritisation in relation to the re-design of ICICI’s corporate internet banking products.
Methods:
1) Project Scoping and Competitive Analysis for ICICI’s corporate internet banking platform
2) Two weeks of interviews and contextual inquiry with startups and enterprise companies currently using the platform on user experience and barriers to usability .
3) Timeline: 4 weeks
Insights & Recommendations:
1) The key service used by all corporations is that of fund transfer, whether it be vendor payments, settlements, salary and utility payments or cash withdrawals. Most corporations also regularly download bank statements for review. Recommendation: Prioritise boosting the user experience of these features through more prominent placement in the workflow, consistency and platform-wide recognition rather than recall.
2) With the trade online service, the platform requires all bank details to be filled afresh every time the form is filled for outward remittances. As corporations typically work with a set repeat suppliers this needs to be resolved. Recommendation: This feature could be improved by providing the option to save a list of frequently used payees in the system. An auto-draft feature might also be effective in tackling the issue of unnecessary and repetitive data entry.
3) Looking professional is crucial for building trust and communicating with vendors. Without more visiblity into the status of an invoice, corporations don’t have all the information they need to communicate professionally with their suppliers. This desire for transparency and visibility was a common theme in our research. Recommendation: Create a timeline view for management of communication. The design needs to reflect the multitude of states that a payment can be in (unpaid, overdue, paid, refunded, failed, cancelled, etc.) and actions that can be taken in each state (for example, a reminder call-to-action should only be shown when a payment has not gone through).
4) Users of pdf statements are facing a challenge with its display layout. They are also concerned about being unable to customise the duration for which a statement is needed. For eg: If they need a statement for just 15 days, they have to send an e-mail to the bank/RM making a special request. Recommendation: Shape an easy path for customisation, user control and freedom site-wide. Further research on formats of statements required by users.
5) As remittances are many, users are wary of mistakes while keying in bank account numbers as they are worried it creates a high probability for potential error. Recommendation: Find a way to carefully prevent such high-cost errors from taking place. Avoid slips by providing helpful constraints and good defaults as well as by removing memory burdens and confirmation options before committing to an action.