This is a self initiated project, done as an exercise in creating, writing and publishing case studies.
Timeline- 7 days
“To begin you need to choose an app, and select 2 consecutive screens (a 2 screen flow). You will be evaluating and redesigning this 2-screen flow in this challenge.”
Introduction:
A SWOT analysis done by Aditya Shastri in 2021 for IIDE showed that Kotak Mahindra is the 3rd largest Private Sector bank with a growing market cap of INR 397,000 cr ( as of 2021). Amongst its competetitors, Kotak Mahindra has one of the largest user base. A significant chunk of them being young adults.
With this growth in technological market trends, and to cater to the increasing demands for improved online banking experiences, kotak needs to capitalize on its digital experience and make space for its growing user base.
Today, many users find it hard to perform basic functions on the kotak bank app. For example, calculating monthly expenses becomes a challenge as there are no clear ways of viewing past transactions except for downloading statements and viewing transactions by dates. This does not provide enough control to users and the poor UI seems unintuitive and complicated to use.
Additionally, if the app reviews claim that even downloading statements is a difficulty, then the problem starts becoming bigger. Here is one that stuck out to me:
Reading online reviews of the app showed multiple areas where users were stuck- From downloading statements, viewing specific transactions to basic features like just getting past the home screen.
This is a major problem. In the current digital age, banks need to bridge the gap between an efficient system and a clean design.
As a result, the current solution is to calculate specific expenses manually. Sorting through long reports, finding statements and attachments, filtering through past emails, referring to bills and receipts are only some of the frustrations users face. Additionally, the app provides little control over ways past transactions are viewed and presented which only adds to this frustration, hurting the business and the users.
So how do we start solving this issue?
Identifying and narrowing down the problem:
An approach that helped me when solving a problem this large, was to narrow down all problems into smaller elements and identify what can be solved in the given time.
For the given challenge, the timeline was 7 days. The requirement of the task was to choose a specific 2 screen flow.
This becomes the first part of our problem solving approach.
To understand what to solve and how, it was important to understand key features and problems in the overall user experience of the app. This understanding would later help when translating the overall experience into 2 screen user flows.
A specific 2 screen flow would be selected after assessing what heuristic principles best justify it and then redesigned.
After looking through multiple flows, I chose the homescreen to Account Overview section and categorically brought changes in the way past transactions were viewed.
Studies suggest that “A poorly designed app, although with efficient functions can lead to user frustration, loss of business, reduced engagement, security concerns, and negative reviews and ratings.”
All these points can hurt the bank’s reputation and contribute to a bad user experience. These issues should be avoided, and banks should ensure that their apps are user-friendly and allow users to perform essential functions easily and efficiently.
Here is where Heuristic Principles come into use:
In case of the Homescreen,
Observation : The extensive number of options make it difficult for users to find what they need. The icons at the bottom rely more on recognition and recall as they all have complicated features. A lack of aesthetic and minimal design is seen throughout the app.
In case of the Account Overview Screen,
Observation 1: Clicking on Account Activity and Account Overview yields the same result with the only difference being in the closing balance based on a specific time chosen in the Account Activity section thus hampering user control. Apart from viewing transactions on specific dates, there are no other filters for sorting through multiple transactions.
Conclusion 1: Using the principle of User control and Freedom, the app does not allow users additional details on specific transactions thus making it difficult for them to keep track of their financial habits.
Ideation and Search for Probable Solutions:
Going over the user feedback on the app, and having narrowed down the two screen flow to Homescreen and Account Activity, I looked at the following solutions:
- Club Account Activity and Account Overview options together in the Quick Access Menu whilst also changing the options hierarchy to cater to the core functions of the app.
Why this doesn’t work: It was seen that in the original screen, there was a reason why Account Activity and Account Overview sections were separated. Although Account Activity focuses more on Recent Transactions and quick viewing options, Account Overview gives a more detailed response. If clubbed together, the distinction would be difficult to navigate through for the user which might create more problems.
What can work: Although this steps out of the perview of this challenge, reducing the number of icons in the bottom navigation of the app so the user doesn’t accidently scroll and doesn’t have to learn what each icon means is something that can reduce the mental load on users when performing their desired tasks. This is a problem in the original Homescreen as well where the function of multiple, scrollable icons in the bottom navigation is unclear. So reducing the scroll and keeping the icons restricted to five standard features is doable.
2. Reordering and Reducing Clutter on the Homescreen to make it look cleaner, simpler and easier to use. Icons can be changed as long as they are consistent with each other and are 1px in weight like the original screen. Reordering items on the basis of their placement in the original Homescreen will be maintained to reduce inconsistencies.
Why this works: This solution follows the heuristic principle of Aesthetic and Minimal Design and improves the user experience by giving the same options arranged neatly.
3. Add Filtering Options to make it easier to filter through past transactions using specific sorting and filtering criteria.
4. Add Custom Amount and present it in a way that is easier for users to understand and operate.
Why this works- This follows the heuristic of User Control and Freedom and helps users get more control over the way they view their past transactions. This is a change from the previous stand alone option of just viewing transactions by specific dates which was found to be not enough.
It was then decided that these were the solutions I would proceed with. Since there was an understanding of what about these changes would work and what wouldn’t I moved to the design phase of the challenge.
Wireframes and Paper Prototypes
For the purpose of this challenge, we were required to create wireframes using Marvel.
Keeping my solutions in mind, I started creating wireframes on paper. After multiple attempts of putting features together, I was able to come up with a working paper prototype.
Learning: Through the workshop I learnt that it wasn’t always easy to see through ideas scribbled on paper. Imagining these as prototypes was even more difficult. Since I started using Marvel, my workflow changed completely. Translating paper ideas to digital designs helped reduce errors before the process even began and this was extremely helpful.
The link to the paper prototype is as follows:
https://marvelapp.com/prototype/jb4iag7/screen/91103801
The (Re) Design
After the wireframes were made and the steps forward became clearer, there were some key observations that had to be taken into consideration for the design.
Going back to the identified problems, it was seen that the current Kotak app did not provide additional control to the users to view their transactions and keep track of their spending. To assist with this, the following observation and additions were made:
- The design and placement of all icons on the Homescreen has to be consistent and in order.
- The filter icon should be placed on the right and not directly beside the Balance amount. This should help users see and access it easily.
- Clicking on the filter icon should reveal additional control options which can be selected as per the choice of the user.
- There should be a card that shows up with Amount sorting criteria.
- Clicking on the Range option on the card should reveal the range bar with a minimum and maximum amount input option. The user needs to drag the slider to input both amounts to view sorted transactions within that range.
But why? Here is my take:
It is seen that the filter option provides users with control and freedom over their transactions, allowing them to sort and view their data in a way that makes sense to them. This fosters a sense of trust and control to the user thus helping the business. The way in which the redesigned app can achieve this, is by providing users the options to choose what and how they would like to view these transactions. The presentation of these, should be done in an easy to understand manner, with little to no complication.
Testing: What Worked and What Didn’t
With the current design ready, it was time to test this with Users using Guerrila Testing.
Guerrilla usability testing is a quick and inexpensive way of testing a prototype or website with real users. Instead of recruiting a specific targeted audience to take part in sessions, participants are approached in public places and asked to take part in research
Before testing began, I had a few research objectives that I would explain to the users and record their experience first hand. These were a set of steps users had to follow.
- Open the app
2. Click on Account Overview in the Quick Access section.
3. Click on the Filter icon
4. Drag the menu towards the last “By amount” option.
5. Click on “Range”
6. Slide the range bar to amount 5000
7. Click on Done
8. View transactions under 5000
9. Click on back and return to Homescreen
The following observations were made after repeating the activity with 2 other users. There responses were recorded and the pain points and successes of the design that were found were as follows:
The observations and user responses added valuable insights to the project. The testing process proved to be a success because I was able to find out what exactly worked and what didn’t. Tallying user responses and remarks with the research objectives lead to the following observations:
What Worked:
- Users found it easy to navigate from one section to another. The redesign of the homescreen was met with a good response. Users were able to easily understand the features and restructuring.
- The users responded well to the simplified homepage and the addition of a debit card at the bottom of the screen gave them an idea about the potential of the app.
- The Account Activity section was easy to understand with its new changes. The users found it helpful and responsive.
- The users responded positively to the additional control provided by the filters and even commented on its importance. One user went on to say how this feature was and is missing in a lot of competitor apps.
What Did Not Work:
- A few initial interactions were not loading and that caused users some problem .
- The size of the filter button was small and needed to be increased.
- The range bar had an upper limit of only 10000 and that made users question its use.
- The lower limit on the range bar was missing and made the users confused.
- A verbatim response was recorded which said “Why can’t I choose a lower limit? What if I wanted transactions ONLY between 1000 to 5000 ?” The response was recorded.
The Re Re Design
After assessing the research observations, changes were made to the final UI of the app.
The changes made were:
- The Filter Icon placement was changed. An Active State was added to the final UI where once clicked, the icon changes color from black to Red.
- The filter range on the range bar was changed. A lower limit point was added that can be dragged from the minimum amount to a specific amount. For the purpose of this challenge, the lower limit was set to 1000. T
- A user comment during the research phase was to understand why the maximum amount was only 10,000. This final point on the range bar was switched to “Maximum” to account for variable balance and different users.
Impact of these Changes:
To understand these changes and why they help the redesign of these 2 Step Screen Flows, we looked at how they affect the users and the business:
The Homescreen:
- How it benefits the user
It gives users control and freedom to choose the way in which they want to view their transactions. - How it benefits the business
filter option provides users with control and freedom over their transactions, allowing them to sort and view their data in a way that makes sense to them. This fosters a sense of trust and control to the user thus helping the business.
The Account Activity Screen:
- How it benefits the user
This provides users ease of use and helps them filter transactions between two specific amounts thus reducing the amount of scrolls and time spent in searching and sorting through multiple transactions manually to keep track of their spending. - How it benefits the business
By providing users with an easy way to find specific transactions, they are more likely to engage with the app regularly. This can lead to increased usage and higher customer retention rates.
Final UI
Final Prototype
Learnings and Final Thoughts:
This was a fulfilling task to complete and covers only a 2 screen flow. Although it is inaccurate to see the potential of these changes being implemented after just a week, I would like to see more banking apps take a step towards cleaner and simpler design that does not lose out on efficiency.
From a personal stand point, I learnt a lot of valuable lessons through the course of this project. Every step of the way was met with challenges to which learning was the answer.
A few things I believe could be improved:
- The research can be more comprehensive and extensive. The number of respondents for the study can also be more scientific.
- A lot more consideration needs to be put in verifying feasibility and execution capacity of the ideas. If these ideas can be implemented and are feasible enough to change the way things work, only then should they be taken to the next step.
