Redesigning Mobikwik

Background story

This is my first project to kick-start my career in UX/UI design. I had no experience in UX/UI design. Before this project, I had a question in front of me, “What should I add in my portfolio for a full-time job”. Two options were there in front of me. To take an existing problem and try solving it with an app or website. Another idea was to redesign an app or website that I use.

Previously, I have worked on a few projects where I designed an app for an existing problem. This time I redesigned an existing app. I took an app I use regularly. It helped me save time exploring the interface. Hence, I decided to redesign MobiKwik.

What is Mobikwik?

MobiKwik is a digital wallet that people use for online transfers. You can recharge, pay bills and invest money, etc. It also supports UPI payments. It’s an alternative to Paytm with fewer services.

Why redesign?

I have used mobile wallets in the past like Paytm, FreeCharge and Phone Pay. MobiKwik also have a lot of features like wallet, UPI etc, but there’s a lot to improve in they way they are implemented.

We redesign to improve the services that can unlock quick growth. It was the same force driving me from inside.

Gathering information

Consciously, I started familiarising with the app. To gather some insights, I read articles on Mobikwik on google. A document by Vizologi.com helped me to understand Mobikwik’s business model.

I studied MobiKwik’s major competitors like Paytm, Google pay and Phone Pay. Then, I sat down and wrote a list of things that bothered me within the app. With this, I searched for reviews on the Play Store and App Store.

When I felt diluted, I took help from a few of my friends (five of them). Most of them were using Paytm or Google Pay, I asked them to download MobiKwik and to try it for a few days. So I could ask for their experience and feedbacks.

Diving into the redesign

Home screen

1. Side navigation bar(burger nav)

Problem:

Some part of the side navigation bar(burger nav) is hiding behind the profile picture icon.

Insight:

• MobiKwik did this to help users in finding a side navigation menu.
• Another thing is that they don’t allow users to add profile pictures. That means this icon will be similar on all screens for all users. Although it’s different for mobile and desktop users.
• This might have helped them in saving some space on the server.

Solution:

A clean icon that works as both a profile picture icon and a burger nav icon.

Thought process:

• With the constraint of not using a profile picture, which is a common trend these days across all apps, I did something.
• MobiKwik’s website navigation icon looks clearer compared to the one on mobile. Thus, I designed something like that for mobile.
• It also fulfils the company’s goal of showing the profile picture icon and side nav bar simultaneously.

2. Add money tab

Problem:

a) The font size of the wallet balance amount is tiny and hard to read.

b) If you click inside the big red box area, the “Add Money” screen will open, where you can add money. But when you click inside in the small red box area, the “Wallet Balance” screen will open where you can add money to the wallet and transfer money to wallet.

c) I always assumed that I can only add money with this tab, but I discovered the other by hit and trial.

Solution:

a) I increased the font size of the wallet balance amount for better visibility.

b) During my research, I came to know that MobiKwik prefers more transactions through their digital wallet than UPI. They also have supercash (alternative of cashback) that only works with the wallet and that they promote supercash across the UI.

c) Keeping that in mind, I kept the “Add Money” option as a standalone feature. This will end confusion and any accidental touch amongst the two closely placed options.

3. Bank balance tab:

Problem:

a) Similarly, the font size of the UPI id is tiny and isn’t clearly visible.

b) If you click inside the big red box area, the “Linked Accounts” screen will open where you can check your bank balance. When you click inside the small red box area, a “UPI Profile” screen will open where there is a lot of options related to UPI.

c) Even here the other option was discovered by hit and trial.

d) Having two buttons in such a small space leads to accidentally touching the wrong option and ending up on the wrong screens. Yes, adding more can be handy, but this might frustrate users.

Solution:

a) Based on the interviews I took, I came to know that 4 out of 5 users use the bank balance option frequently. Thus, I kept the “Bank Balance” option only as it is useful and more important.

b) Users prefer to check their bank balance before or after doing a transaction through UPI. So, I moved it to the transfer money section as a secondary button. Its button size is small as it is less important from the “Pay to Merchant” option.

c) I have also added a label “Check” on top to help users after the redesign.

4. Pay to merchant:

Problem:

According to a user who I interviewed, “It becomes even harder if you are standing at a merchant’s shop with things in one hand and you have to pay him with the other”.

It’s hard to reach “Pay to the Merchant” as today’s screen sizes come in a larger size as compared to the old days. Thus, it difficult to click on the topmost options.

Solution:

To solve this issue of reach, I brought it down in the transfer money section with extra size & padding around it. This area will be easier to reach even with one hand only as compared to the old one.

I have changed the icon from a complex to a simpler one.

5. Request:

Problem:

Through this, you can request money from a user using UPI. One thing that I came to know from user interviews was that people rarely use the “Request” option. Only 1 out of 5 people use the “Request” option, and that’s too rare.

Solution:

I moved the request option parallel to the “Transfer Money” heading.

Thought process:

• It is showing as a tertiary button to lower down its importance.
• I wanted to remove the “Request” button, I didn’t have any back-end data to do so.
• I can’t remove it just based on 5 users, there is a large pool of multidimensional users out there. Thus, I brought it down in hierarchy compared to other options.

6. Overuse of gradients:

Problem:

MobiKwik uses colours beautifully in the form of gradients. They use gradients as background for their ads and to show off their offers and services.

Insight: It’s good to highlight some major services to direct the user’s attention to a particular thing. But overuse of these gradients distract users instead of helping them.

Solution:

I simplified these gradients for ads. So, that they look distinctive and they don’t end up distracting a user from their goal.

P.S.: I didn’t have those same icons, so I end up creating mine.

7. Bottom navbar:

Problem:

Icons in the bottom nav bar looked a little complex and take a lot of attention.

Solution:

I designed the simplified version of bottom bar icons to embrace the overall design.

8. Add money screen:

Problem:

a) When you click on add money, an overlay from the bottom opens up. The crossbar in this section is so much close to the amount section that it looks like it overlaps the other. This isn’t a clean design.

b) The hierarchy is also a little messed up. When I open this screen, my attention goes to the continue button, rather than the amount box.

Solution:

a) I added some space between the crossbar and the amount box to give visual relief to a user.

b) I added a placeholder as “Enter Amount” to direct the user’s attention. The continue button remains disabled until you enter the amount to establish a hierarchy.

c) I have also increased the button size for better accessibility.

d) Apart from all this, I have increased the roundness of edges so that your eyes can easily flow and search for the desired content in design.

Expenses

1. Header

Problem:

The setting’s icon looked a little off on the left side and only “Overview” looked incomplete.

Solution:

a) I aligned the heading “Overview” to the left because everything on the screen aligns to the left.

b) I have moved the settings icon on the right side of the screen as only back buttons and crossbars are on the left side in the UI.

c) “Overview” alone was looking incomplete, thus, I changed it to “Expenses Overview”.

d) I did some tweaks to the “Apr 2020” button for unity in design.

2. Radial bar chart & money section:

Problem:

a) The radial bar chart looks disconnected from the UI design of the app.

b) When you click on “Spent in this month” and it leads you to the detailed expense screen. This is a hidden button that we can only discover you after clicking. This is one of the most important things on the screen, and that isn’t shown well.

Solution:

a) I added a gradient to the radial bar chart design to blend it with the UI design and moved it to the centre to give it more attention.

b) In the new design, I made “Spend in this month” as a separate button. And give it more priority as it is a prominent element on the screen. Also, I converted the “Monthly Budget” to a secondary button. As it was there in the hierarchy of the original design.

3. Accounts and cards:

Problem:

a) The accounts and cards section only shows you the outdated balance of your primary account. Like in the image above, it is showing the balance dated on 18th April 2020.

Insight: It’s there so you can compare your balance with the current date.

b) Plus when you click on this you land on another screen where you can see the spending you have done with this account and I didn’t know about this feature.

Solution:

a) I have changed the heading of this section from “Accounts & Cards” to “Previous Balance & Spending”. This will give user hints about what this section does.

b) I moved the balance and date on the left side to have an arrow on the right side of the screen. This will help users to know that something links with this screen.

4. Last 5 transactions

Problem:

It looks like a back end log file than transaction history. “Transfer Net-Banking IB|NEFT|RTGS” is of no use for the user. The icon used is the same for all transactions.

Solution:

Transactions in “History” screen

I wanted to keep the “Last 5 transaction of April” history like “History” screen. So the users don’t feel alienated. The list of changes I did are:

• Change Transfer Net-Banking IB|NEFT|RTGS with the name of the person to whom you have paid.
• Replacing the logo inside the transaction with the logo of the bank through which you pay.
• Removing time and “unknown” from the transaction and giving more priority to date. I did this based on their importance and hierarchy.
• Increasing the font size of the amount and adding — signs prefix for better visibility and clarity.

5. Let your money make you more money section

Problem:

The icons used here don’t go up with the design language of the Mobikwik and it looks like a completely different section in the UI.

Solution:

Icons used in the “Loans and Savings” section

I have replaced the “Let your money make you more money” section icons with the “Loan and Savings” section icons to bring unity in design.

History

1. Transaction history tabs

Problem:

a) The users who I interviewed told me that “We can’t recognise people with their UPI id”. Even if you can for 1 or 2 persons it’s practically impossible to remember so may UPI id.

b) The UPI logo used in the tabs looking like it’s consuming up space without any functionality.

c) Success font and date fonts are also very small and hard to read.

Solution:

a) I changed the UPI id with the name of the person to whom they pay. Thus, reducing the cognitive load of the user.

b) The UPI logo on the left side replaces with the logo of the bank through which they have paid. Users won’t have to check transaction details to know from which account they have paid.

c) I have increased the “success” and “amount” font bigger for better visibility. And removed the red colour from amount font so that both of them don’t fight for user’s attention.

2. Filters:

Problem:

a) There are 2 filters that a user can use to search for particular transactions. With the “Categories” filter, they can define categories like Recharge or bill payments, Bhim UPI, Merchant payments, etc.

b) Whereas the “Transaction” filter includes 3 options, i.e. All transactions, transactions leading to Money in and transactions leading to Money out

c) With these, there’s one more filter, i.e. with which you can see transactions based upon months/dates.

d) It becomes hard to search for a particular transaction when you do a lot of transactions daily. So I simplified it.

Solution:

a) To simplify this by showing the options in “Transaction” filter as horizontal scroll options. Now, this enables you to jump between money in, money out, or all transactions quickly.

b) I have used a search bar instead of the categories filter. This will end the hassle of scrolling between many transactions to find the one you want.

Let’s say if you want to find a particular person who you paid a few months back. It will be easy to find details of that person or transaction with a search bar as compared to filters. As a search bar will reduce the number of steps taken to do so.

c) I have defined the “Apr 2020” button as a secondary button because the download statement button accords to this filter.

Wallet

1. Balance details section

Problem:

a) There are three buttons in this section. Add money is a top priority followed by transfer money and, at last, is balance details.

b) But this is not clear in the design and everything looked messed up.

Solution:

a) To begin with, I increased the height of the section to add some white space around the elements.

As the “Add money” button is at on the top, thus, I have increased the width of the button to enhance reach. This also brings unity in design.

b) Then I moved the “Transfer money to bank account” button at the bottom to set it at a lower position in the hierarchy. As it is not as important as the “Add Money” button.

c) For balance details, if you click anywhere in the section apart from the two buttons above you will land on the Balance Details (Wallet Balance) screen, that arrow gives a hint about this to the user.

2. Saved cards

Problem:

While using this app, I came to know that to delete these saved cards you have to long-press and there wasn’t any clue given to me about this. I discovered it after scratching my head for a few minutes. Moreover, there wasn’t any way to edit these cards.

Solution:

a) So, I begin with adding bank names with cards so that a user doesn’t have to guess the bank name with the card number.

b) Each card once added will be linked to a new screen where you can edit or delete the card.

c) Apart from this, I have centre aligned the links that are acting as tertiary buttons for some difference than normal text.

Select payment mode

1. UPI section

Problem:

a) The text on the green box is a bit difficult to read.

b) There are major spacing issues inside this section, as the change button and pay now button is overlapping each other.

c) In my opinion, pay now is the most prominent action on this screen, but it is shown as a secondary button.

Solution:

a) First things first, I decided to give a heading to this section, so I moved the bottom information, i.e. UPI (Instant payment. No OTP required) to the top left corner.

b) Replaced the background colour of the recommended icon to enhance the readability of text on the foreground.

c) I fixed some spacing issues inside the UPI section as two buttons were overlapping each other.

d) Finally, changed the pay now button from secondary to a primary action button. So that a user should know that it is the most important element on the screen. And after clicking this a particular process will finish.

2. Saved cards

Problem:

In the old design, no information is there about the name of the bank to which this card belongs. It becomes hard to guess the bank name from the card numbers.

Solution:

So I decided it’s better to add a bank name to each card so that you don’t have to play guess games.

Payment success

1. Transferred amount

Problem:

After paying to merchants with Mobikwik, I have to show them my phone to prove that I have paid them. They take some time to figure out where the amount is on-screen and to who I have paid.

Because in other apps like Paytm or Google pay the amount is there on the top of the screen. And they don’t have to scan all the content on the screen.

Solution:

I increased the font size of the amount so paid. Also, added the next section which mentions the person to whom they have paid the amount.

2. Share transaction

Problem:

Often times when you send someone money they ask you for proof for their own record. It’s a long task to take screenshots and then share when you do more than 5 to 10 transactions daily.

Solution:

To tackle this I added a share transaction button from which you can share transaction details.

Pay to merchant

1. Bottom section

Problem:

According to the interviews that I conducted, the “Nearby Stores” option is used by none out of 5 users.

Solution:

a) I added those contacts to who they have paid in the past for faster payments.

b) “Show OTP or Barcode” is an emergency option that allows you to show your details or barcode to the merchant or cashier if your scan QR code is not working.

c) “Nearby Stores” is hidden inside the kebab menu as all 5 users rarely use them.

d) I have removed the select picture from gallery to scan option as it doesn’t make any sense. If your camera is broke you can ask the merchant or your friend for their UPI id instead of their QR code’s picture.

Side navigation menu

a) Decided to divide all the option into groups for easy understanding and more clarity.

b) I have also increased the width of the navigation tab to 100% for better functionality.

c) Moreover, added icons with every option to make this screen more interactive and easy to use.

Wallet Balance

a) I didn’t understand why they have used these lines on top of heading in every section. This wasn’t done on any other screen except this. So, I decided to remove this for unity in design.

b) Changed from “Money Added” to “Money added previously” for more clarity. I have increased the width of the add money button as it is one of the most prominent items on the screen.

c) Loyalty points and adds money are not interconnected in Mobikwik in any terms. Thus, I have made “Loyalty Money” a different section with usual spacing.

d) Also, added a couple of icons to make this screen more interactive and minimalistic.

Other screens

Bank Balance

Recharge and bill payments

Lockdown Support

More services

Add money

Edit or delete card

UPI Profile

Offers

Google play recharge

Mobile recharge

Play with the prototype

Conclusion:

It’s easy to complicate things but it's hard to simplify things. You need to have a lot of patience to understand a problem and then come up with a solution.

I had a great time doing this case study and learned a lot about UX. As it is hard to learn UX by yourself. I wish I had time to redesign all the screens that Mobikwik has on their app.

Special thanks to Chethan KVS aka the Design Pilot, for the feedback.

Thank You for reading. All suggestions and constructive criticism are welcome.

Fact about Medium: Hold the applause icon to give 50 applauses together ☺