Case Study: Improving the Passbook UX of ICICI iMobile pay app
I participated in a 2-week Kickstarter UX design workshop, which Mr. Anudeep Ayyagari mentored. The workshop taught us how to approach real-life problems in existing products in a non-textbook manner and learn from them. The unique way of his teaching with a non-textbook approach in this workshop caught my interest immediately. We were taught about the basics of design thinking, heuristic principles, and business metrics in a very unconventional but effective method, which has helped a lot in going forward with this case study.
The UX Design Challenge
The design challenge involved identifying and solving a problem within an existing product. We were asked to find a real-life problem and give possible solutions to fix it, with prototyping and testing. I went through multiple apps on my phone, and I picked an app I use quite often to check my regular money transactions, the ICICI iMobile pay app. I seldom found it difficult to find the transactions that I needed to revisit and revise, as there was a lot to scroll and pay attention to every detail while scrolling.
Identifying the problem.
In this particular step, using the “user-centric design” workbook, I evaluated the passbook section of the app based on the heuristic evaluation principles to identify problems. This is done by considering the user’s perspective to create a more intuitive, efficient, and satisfying experience.
Out of the ten heuristic principles, I found heuristic problems mainly about Flexibility and efficiency of use, recognition rather than recall, Consistency and standards, and Aesthetic and minimal design. It made it difficult for the user to find the correct transactions and carefully scroll a lot. The look and feel of the app also demotivate people to use the app further.
Ideating for Solutions.
These are some ideas I have come up with to solve the problems identified.
- Give month and filter options in the main passbook screen. And link the page to advance search if the user wants to search for a particular timeframe.
- Have the receiver’s or debtor’s name instead of the transaction code (thereby decluttering and as well as making it easier to recognize). Also, have that name in the transaction details.
- Add a screen for extra options like inward remittance and fund transfer rather than having it at the bottom. Instead, have the navbar available on other screens for consistency.
Initial paper prototyping
To get an idea of how the solution might work, I have created a Paper Prototype of the possible solution.
Link to Marvel prototype: https://marvelapp.com/prototype/85j5684?
High-Fidelity Prototyping
After using the Low-Fidelity Design to check the design, I began implementing the features in High-Fidelity Design. I did that following the original screens and improvising the design while keeping the essence of it accurate to the original one, using Figma. After that, I have added the features in the screens based on the solution that I had come up with.
Testing with users and experts
I have created a few tasks for the users regarding the redesigned screen purposes and observed if they could perform the tasks and how they performed these tasks. I also took their feedback on what they thought about it compared to the original design.
I have also taken reviews from my mentors and understood where and how the design could be improved. In this process, I have also learned a bit more about finance apps, why they do certain things, and their uses.
The things I observed and learned were :
- The users found it challenging to find transactions that were from a few months ago, despite the sort (debited and credited) and filter (successful and unsuccessful) options.
- I was suggested that keeping the advanced search option was quite necessary as many times users would want to find particular exact statements to find relevant information. Instead, I was asked to improve its experience.
- Another user pointed out that what if they had a problem with one of the transactions or had some doubts regarding it? In the original app and screens, customer support was quite difficult to find, so they asked if they could make the process faster.
- It has also come to my attention that the “Fund transfer” CTA is quite important on the passbook page as many times based on the information on the page people would want to transfer money. And the navbar here would be irrelevant.
Redesigned Screens.
Based on the user testing and feedback, I made the following changes to the designs.
- I have changed the sorting filter to a month filter and introduced the Advanced search option intact for users to have a customized search experience. Thereby putting flexibility and efficiency of use.
- I have also replaced the bottom navbar with the original version instead of having a separate page for “Inward remittance” and “Fund Transfer” as they are required to be accessed quickly.
- In the transaction details screen, I added a CTA button to contact support immediately in case of a transaction error or query. Therefore helping users to recognize, diagnose, and recover from mistakes. And improve retention metrics.
Improved the Advanced Search Experience
After introducing the option of “Advanced search” back to the user flow, I have made a few changes to the pages to improve its UX. They are as follows:
- Added a few preset duration filters.
- Improved the UI of the screens to improve the grouping between different sections and make them more user-friendly
- Displayed the filters added by the user for better recognition.
- Also added CTAs for editing the search and also for fund transferring, to improve flexibility and efficiency of use.
Key Learnings of the Workshop
In addition to numerous exciting and interactive workbooks on the Figma app, this two-week UX-intensive Kickstarter session featured video lectures. Everyday workbook solutions helped me become familiar with the Figma app.
In a non-textbook way, the session helped me understand some of the fundamental ideas of UX design as well as numerous laws, like JaKob’s law, Fitt’s law, Doherty Threshold, Hick’s law along with Heuristic Principles and Business Metrics a UX designer should keep in mind among many others.
I also gained knowledge about usability testing, enabling designers to watch people interact with a user interface and spot any usability issues that require attention.
Lastly, I would like to thank UX Anudeep, sir, for mentoring us in this two-week workshop and giving us his beautiful insights about the things we see around us and the applications of UX in daily life. His guidance has helped me write my first UX case study and understand the process most effectively.