UI-UX Case Study: A mobile app that helps vehicle owners manage their toll tags.
A mobile app that lets vehicle owners recharge and manage fastag irrespective of fastag provider.
Context
What is Fastag?
Fastag is an electronic toll collection system in India, operated by the National Highways Authority of India (NHAI). It employs Radio Frequency Identification (RFID) technology for making toll payments directly from the prepaid or savings account linked to it or directly toll owner.
Read more about fastag here: https://www.npci.org.in/what-we-do/netc-fastag/product-overview
How did it start?
We have a vehicle in our house and the fastag is from KVB (Karur Vysya Bank).
Once we were supposed to go on a trip early in the morning, therefore, one day earlier I decided to check our fastag balance and if it was not enough then recharge it. The existing site of KVB is not really a good experience since it is a hassle to log in and lots of times the site is broken. Therefore, to check the balance we usually go through my messages and search for the last toll deduction message. That day to my bad luck the site was broken, and I was not able to recharge the fastag. I also downloaded the KVB’s mobile application, but still, I was not able to recharge the fastag. And in the end, we had to pay in cash.
This is my experience almost every time I want to recharge our fastag. Therefore, it got me thinking about why is there no simple application with a good user experience that lets vehicle owner manage their fastag.
Aim
This is a concept project and the aim of this project is to create a better alternative to the existing apps available in the market. This app can be developed by NHAI and NPCI to provide vehicle owners with a better fastag experience.
My Process
- Understand Problem
- Ideate
- Solve
- Design
This is the process I follow. I am good at solving problems and bringing those solutions to life with the help of design.
Problem
Problem Statement
Design a mobile app for vehicle owners that lets them recharge one or multiple fastags in one app irrespective of the tag provider.
Platform
Mobile app: Android
Core Problem
Each provider has their own app which either has an average user experience and interfaces or has a fastag as a child product of its more extensive financial ecosystem, making it hard for owners to navigate and recharge fastag.
Some peoples have personal and company vehicles and each vehicle have different providers. To manage and recharge each fastag they have to download separate apps which makes it challenging to manage and recharge fastags.
User
Core User
Vehicle Owner
Based on the problem statement I decided to create 2 user personas. User personas help me to keep on track and not try to solve a problem that does not exist. User persona also helps me understand the user and their problem.
User Persona 1
Mr Sushant is a senior architect. He is 32 years old. Because of his job, he travels from one site to another. Therefore, the company has provided him with a company vehicle which he can use to travel between sites. He also has his own car.
His company and personal vehicles have fastags from two different providers. But he does not want to download two separate apps to recharge fastags. He wants an app that lets him manage and recharge both the fastag. Having two apps makes it difficult for him to manage and recharge fastags.
User Persona 2
Mr Arun is a car owner. He is 49 years old. He is not really a techie person and has a hard time understanding new products or features.
He wants an easy-to-use application which only manages fastag and does not want to use an app where he has to find fastag related actions. Having a simple standalone fastag application will make managing and recharging his fastag an easy process.
Based on the problem statement and user personas I came up with the following user pain point which I’ll try to solve.
User’s Pain Points
- Hard to manage multiple fastags.
- No easy way to check fastag balance.
- Need to go through a 6-step process to recharge fastag.
- No easy way to check previous transactions and recharge history.
Basic User Flow
I always start with the basic flow showing all the modules and the flow between them. The reason not to create and use the complex and very detailed user flow is that the basic flow helps me focus on the bigger image of how everything is related and how it will affect the other modules.
This is the basic flow with which I started working on the app.
Solutions
Pain Point 1: Hard to manage multiple fastags.
Solution
Managing multiple fatags has three primary tasks
- Checking Balance
- Recharge
- Transactions (Tolls and Recharge History)
1.1 and 1.2: Checking Balance and Recharging
Competitors:
In the existing apps (competitors) there is no provision for vehicle owners to recharge and check the balance of multiple fastags without going through a multi-step process.
My Solution:
I decided to show all the fastags added by the user on the home screens. Which will help them to check the balance of multiple fastags and quickly recharge fastag.
1.2: Transactions (Tolls and Recharge History)
Competitors:
Similar to recharge, there is no easy way for vehicle owners to view the transaction history of multiple fastags without going through a multi-step process.
My Solution:
For transactions, I decided to create a separate page where users can swipe to check the transaction history of each fastag. Vehicle owners can easily view the history of tolls paid and recharges separately.
To create a perfect fastag card for the home screen, I first listed down all the information that user needs to see in the order of importance. I did not wanted to overwhelm the user with lot of information, Therefore I decided to only show crucial information that would help user differencitate and recognize different fatags.
Pain Point 2: No easy way to check fastag balance.
Competitors:
Vehicle owners have to go through a 5 to 6-step process just to check their balance. And to check the balance of multiple fastags they have to go through the same process multiple times.
My Solution:
Users check their balance every time they have to go out in their vehicle. Therefore, it was important to create a solution that will make checking balances an easy and quick process.
I decided to show the balance directly on the home screen which made checking the balance a 0-step process. Vehicle owners can check their balance directly on the home screen without having to go through a multi-step process.
Current balance is the biggest element in the individual fatsag card which grabs users attention. And this helps user easily check balance.
Pain Point 3: Need to go through a 6 to 8-step process to recharge fastag.
Competitors:
To recharge the fastag vehicle owners have to go through a 6 to 8-step process.
- Find Bills and Payments/recharge option
- Click view all
- Find and click Fatag Recharge
- Choose bank
- Enter Vehicle Number
- Enter amount
- Select payment method
- Pay
Note: If the vehicle owners are using a native application, then this process is reduced to 4 to 5.
My Solution:
The home screen shows all the fastags added by the user. I decided to create the fastag balance checking process in such a way that it will help users easily check their balance and click on the Recharge button if the balance is insufficient.
I decreased the recharge steps to only 4 from 6 to 8 steps.
- Choose fastag
- Enter amount
- Select payment method
- Pay
Note: This is only if the vehicle owner has already added the fastag. Which is a one-time process at the time of onboarding.
The reason why the recharge button on the home screen is not a primary button is that it would make the entire home page an attention magnet, where every element would try to grab the user’s attention, and it would end up overwhelming the user.
Pain Point 4: No easy way to check previous transactions and recharge history.
Competitors:
To check the tolls paid, and recharge history vehicle owners have to go through multiple steps depending on the app used. But generally, it’s a 3 to 5-step process for the native app. And 6 to 8 to check from NPCI’s official website.
My Solution:
I wanted to make checking recent transactions an easy process. Therefore, I decided to create a separate page for transactions which owners can access from the bottom navigation. The owner can easily check tolls and recharges separately using tabs.
Final User Flow
Results
- Decreased the steps to check the balance by 100%.
- Decreased the steps to recharge fastag by ~50%.
- Decreased the steps to check the previous transactions by ~30 to 50%
- Managing multiple fastags is made very easy.
