ICICI Smart Statement Mobile Application Design | UI/UX Design

Joshua Jumbo

0

UX Designer

Prototyper

UI Designer

Figma

Notion

ICICI Bank's mobile application empowers users to monitor their credit card spending and manage budgets seamlessly, promoting financial awareness and control.
Being a part of the idealoft studio's team, I decided to venture this path alone. Solving a credit card challenge the customers of the bank [specifically credit card users] were struggling with felt just right.
One of the biggest problems for this segment of customers was that they couldn't manage their credit card information or budget their spending based on their accumulated spending data.

Our Starting Point!

I began with user research [secondary research] to see what the current daily experience of credit card users was. What age segment of users needed to manage their spending the most. I also did a little primary research by talking to a few customers since as a studio we were already working on a few other ICICI products.
With the information gotten and compared to the product requirement document, I created the affinity diagram and then followed up with a feature mapping.
Then I had a do a lot of benchmarking, comparing each mapped feature with existing products, to see what that screen experience looked like.
When done with the benchmarking, I translated each of the features into design screens and the ones left out a few I felt would better fit in as a feature upgrade in the future.
Feature Mapping
Feature Mapping

Design

As a studio, we had already created a design system for ICICI, since we also worked on other projects for the bank. We had a design system 3.0, the latest upgrade for the bank.
I imported that into a new design file where I turned the feature I earlier mapped out to a low-fidelity design and also high-fidelity design.
The aim was to make the learning curve smooth and very similar to existing ICICI products, considering there will be a gateway from most of their existing apps and websites which will create a discovery for the smart statement app.
I started with the low-fidelity design, then synched with the team to agree on the information hierarchy and placement of features.
Definitely I had a couple of iterative phases based on feedback and suggestions.
I did tweak the early design look and feel until it felt right for both our internal stakeholders and the stakeholders from the bank.
Sneak Peak into the first iteration
Sneak Peak into the first iteration
Once we had our final and approved low-fidelity design, I translated them into high-fidelity design baring the existing design system 3.0.
High Fidelity Designs
High Fidelity Designs

Prototyping

Post-design phase, I had to focus on micro-interactions for each important element of the design while also ensuring most of the small elements were at least prototyped.
The aim was to allow for easy testing before development commenced.
We tested with internal, external stakeholders and potential users and realized bottlenecks which we fixed and also improvements. We tracked the focus area using heatmaps and a few eye tracking testing methods.
Our solution eventually was approved, and I handed over the file to the ICICI development team.
Micro-interaction
Micro-interaction
Micro-interaction
Like this project
0

Posted Apr 11, 2023

ICICI Bank's mobile application empowers users to monitor their credit card spending and manage budgets seamlessly, promoting financial awareness and control.

Likes

0

Views

16

Tags

UX Designer

Prototyper

UI Designer

Figma

Notion

Skillspace | Landing Page + Dashboard Design
Skillspace | Landing Page + Dashboard Design
Tooth&All | Landing Page Design + Webflow
Tooth&All | Landing Page Design + Webflow
Moments Events | Landing Page Design + Webflow
Moments Events | Landing Page Design + Webflow
Viewfinder | Landing Page UI Design + Webflow
Viewfinder | Landing Page UI Design + Webflow