Adding the constant input field
Empty route field
Added route with amend option
Bulk mileage expense report
Add Multiple mileages at once
feature for Fyle, a B2B expense management app
Project overview
A new feature called Add Bulk Mileage is designed to allow users to quickly and easily add multiple mileage expenses at once, rather than having to manually enter each expense individually. This can be especially helpful for users who frequently record mileage expenses and want to streamline the process. With this feature, users can enter all necessary information for multiple mileage expenses in a single step, saving time and effort.
Category
Web app design
Timeline
March to April 2020
(1 month)
My role
Research
Product design,
User-testing.
The team
1 Designer
4+ engineers
1 Customer Support.
Impact
How we reduced 500+ complaint tickets in a month!
The success of the add bulk mileage feature demonstrates the importance of listening to
customer feedback and addressing their needs.
By designing a feature that addressed the root cause of the complaints,
we were able to reduce the number of complaint tickets significantly.
Overview of the design
Bulk mileages at once overview
Adding the constant input field
Empty route field with autofilled date
Date amendment option upfront
Success message after saving or reporting all the expenses.
Our audience
The primary direct users of the "Add Bulk Mileage" feature are the client's employees who travel daily for work. These individuals are frequently on the move, commuting to different locations, attending meetings, or visiting clients as part of their job responsibilities. They often incur mileage expenses, which need to be accurately recorded and reported for reimbursement by their company.
Shweta Vas
27 / Female
Travels everyday to work using her personal car.
Jasime Ansary
28 / Male
Travels for client meeting every month.
Jatin Sharma
26 / Male
Travels everyday to office.
The process
We adopted a user-centric approach, closely observing and empathizing with the challenges faced by our target users. Through a rigorous examination of these hurdles, we conducted an in-depth analysis to uncover potential opportunities for improvement. By delving deep into the problems encountered, we strategically transformed them into actionable opportunities for enhancing the overall user experience
Goal
Fyle wanted to decrease complaint tickets and create a seamless experience for the users.
Keeping the user as the top priority, keeping the steps minimal and short by adding all the details at once.
To create a seamless experience for the users by keeping minimal steps and adding all the details at once.
Create a seamless experience for the users which feels like magic 🤩
Obtaining lightning-fast reimbursement 😎
Quantitative Research
Created the user surveys, to determine our target audience and to gain a basic understanding of our users. About 32 responses were recorded. And based on the responses here are the key insights presented below:
Traveling everyday
93%
3 days a week
7%
Data analysis for the mileage date frequency.
While we need our user details on whether they mostly ride every day or add mileage every other day or only once a week.
The consequence of the data was, therefore, that the user rides every day.
Now that we realise the user's frequency of riding every day, we had to think about how to make the experience more convenient so that the user didn't have to add dates for every day.
Key takeways
Display of different categories as numbers of fields.
Showing icons of receipts and deleted right beside the table.
Auto-filled date.
Based on the points above designed the user flow below:
User Flow
Design validation
Usability testing
The prototype was tested in the maze by our other teammates and peers, who learned how the design functions and what needs to be done.
After the first test, some of the mistakes were discovered. The user became confused as to whether the date input field was for the day the expense was incurred or the day it was reported. The user made mistakes when adding several sets of cost centres, projects, and vehicles.
Thank you! 🥳
I am continually evolving every day and open to feedback, Let's get in touch and share our thoughts.
Features Fyle Zoho Expensify
Number input field
Auto-filled date
Auto check for reimbursement
Expense removal
The product and engineering teams recognized that the users were not just seeking reimbursement, but also wanted a way to track and manage their mileage expenses. To address these needs, the designer and developer teams actively sought input from the users about their pain points and created an accessible design solution for all.
Takeaways
This project taught the team the importance of considering all perspectives, including those of the product and engineering teams as well as the users.
Future consideration
Competitive Analysis
In order to get a solid understanding of how our competitors are doing in the market and to lay out a solid foundation, we did a competitor analysis which consisted of direct and indirect competitors.
Mileage Data Saviour (Mid-fidelity Wireframe)
Problem statements
The user had to add each of the mileage expenses and had to report or save once at a time, The user had to spend a great deal of time.
For each field, the user had to add Date, Vehicle Type, Cost Center, Project, and Route, for reimbursement or not, each time to add mileage expenses.
Each time the user had to remember how many mileage expenses they have added and how many mileage expenses are left.
Just to check which mileage expenses are reported and which one is saved they had to go back all the way to the reports page.
Issues in summary
Adding each of the mileage expenses one at a time.
Had to add repetitive information
Had to remember how many expenses has been added.
No overview of all the expenses at once.
The user had to add one expenses at a time.
The user had to remember how any expesnes has been added, how many left, which one is saved or reported.
The user had to add multiple information over an over again such as Date, Vehicle Type, Cost Center, Project, and Route, for reimbursement
The user had no overview, just a sceen of multiple input fields.
😨
🧐
🧐
🥱
🫠
🫠
Old Design
The only screen functioned as a form to fill.
Impact
How we reduced 500+ complaint tickets in a month!
The success of the add bulk mileage feature demonstrates the importance of listening to
customer feedback and addressing their needs.
By designing a feature that addressed the root cause of the complaints,
we were able to reduce the number of complaint tickets significantly.
Hey, I'm Shy (a) ni,
Could you kindly access this page
on a desktop as it hasn't been
optimized for mobile viewing?
Thank you.