ICICI Smart Statement Mobile Application Design | UI/UX Design

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.

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.

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.

Once we had our final and approved low-fidelity design, I translated them into high-fidelity design baring the existing design system 3.0.

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.