The story of how we re-designed Fyle’s Spender Dashboard

Hey, folks! I am Shubhangi, and I work at Fyle as a product designer. I joined Fyle as a newly graduated designer over a year ago, and in all this time, I have had the opportunity to work on several complex and exciting problems. This project was no different.

At the beginning of 2022, we at Fyle decided to revamp our existing spender dashboard to provide users with a better, user-friendly, and more efficient dashboard.

A Spender is any person who uses Fyle to get reimbursed for their business expenses or get approval for expenses they have done through a corporate card.

The dashboard is the page they view the first time they log into Fyle. It displays a set of necessary information and controls to make the usage of our app more efficient.

Most often, our users use Fyle without any prior understanding of how they can use Fyle. This makes it immensely important for us to create an intuitive experience.

Why re-design?

We did an in-depth study to understand our user’s pain points concerning the existing dashboard and their overall behaviour while using Fyle.

One of our users pointed out that “I’d like to see this dashboard simplified to the point where I can see what's strictly essential for me, with options to drill down further if needed.”

1. Hierarchy of information was not clear

The old design consisted of various functionalities and data for the spender to view.

Old Dashboard

However, we noticed that not all information was equally useful to the users. We dove into the usage data and found that some of the features were being used more than the others. The old design consisted of various functionalities and data for the spender to view.

Usage Data

Another problem was that there was no clear data segregation based on the usage. The accordion structure made it difficult to view tasks and overwhelmed the user with many stats. We sought to fix this problem during the redesign.

2. Tasks  section was not prioritised

One of the major pain points of our users was not knowing that they had to complete expenses and create and submit reports for approval. Tasks as a feature provided a space on the dashboard to remind users about things pending on them.

However, tasks were not prioritized or highlighted enough for the users to view.

3. Adding an expense could be simplified

Adding an expense is one of the most common actions on the dashboard. There are five different ways in which a user can create expenses. However, one of these is used 82% of the time, but all five methods of creating an expense were given equal importance/priority on the dashboard.

CTAs in the old dashboard

4. Removing sections that were not in use

There were certain sections on the dashboard, such as the Fyle Ad-ins, the Reports and Advances sections on tasks that reported less usage. These contributed to an added level of complexity and made it difficult to focus only on what is important.

Unused sections like Fyle Add Ins

Our Goal

From our user research + analysis of the old design, we knew that the dashboard had to be simplified, and a clear hierarchy of information had to be maintained. Our goal was simple:

Create a dashboard that allows the user to submit expense reports in the least amount of time

We also wanted to keep the web app experience consistent with our mobile app to an extent, so that the users don’t have to learn separate behaviours on two different platforms.

Wireframing and Exploration

Exploration is one of the most critical parts of any design project. This was when we discussed several ideas and even experimented with some out-of-the-box solutions.

Wireframes

Some Important Design Decisions

Improving the Information Architecture

We clearly segregated all the information we wanted to show on the dashboard into:

  • Stats
  • Actionable Tasks
New Dashboard

Making Add Expense more efficient

As mentioned earlier, 82% of the time, users used the add expense button, while the other four ways of adding expenses (add mileage, per diem, bulk add expense, bulk mileage).

We introduced a single split button instead of having 5 different CTAs (like in the old design).

Add expense CTAs

Segregating & Prioritising Tasks

Tasks were further divided into:

  • Urgent Tasks (these would be conditional and would only appear every once in a while)
  • Frequent Tasks (these would appear more frequently and need the user’s attention almost every month)
Tasks

Providing Visibility to Cards

90% of spend on Fyle is card spend. Hence, it made sense for us to provide more visibility of card spend and even add additional functionalities on the dashboard to make the experience more convenient.

Users can now add a personal or a corporate card from the dashboard. It gives visibility of the cards already added and the incomplete and unreported expenses for each card added. We also made the card UI more personal and distinguishable for different types of cards (i.e., corporate and personal cards).

Corporate Credit Cards

Final Design

The brand new dashboard

User Testing

Every designer knows that no design is perfect. We needed to understand the perspective of our users to know what was working and what needed to be improved with the new designs. We approached some of our current spenders who use Fyle to test the user flow with the help of prototypes.

This helped us gain some interesting insights, based on which we made improvements and fixed minor issues...and Viola! The designs were ready for implementation.

Of course, things don’t end at implementation either. Once the designs are implemented, we will track usage for tasks and stats, get feedback from users regarding the problems they are facing, and continue to iterate to provide the best experience for our users.

Before I wind up...

Like any company project, this one was also a team effort. Harsh Thacker helped me with the design process and aided in making crucial design decisions. Aditya Bansal defined the project's scope and assisted in conducting successful user testing sessions. Yashwanth Madhusudan and Swapna Ranjit Nayak provided critical and valuable feedback and support during the entire initiative.

Shubhangi Kaushal

More of our stories from

Design
Swapna’s Working Manual

If we are going to work together, this doc will help us reduce many surprises on the path and make our relationship stronger.

Read more...
How did we revamp Fyle Accounting Integration Platform?

Follow the journey of this noob product design intern and checkout how he redesigned a complete integration platform!

Read more...
Redesigning the Fyle Chrome Extension

Learn how we redesigned the world's best Chrome Extension for expense management!

Read more...
The story of how we re-designed Fyle’s Spender Dashboard

Find out how we designed Fyle’s web-app dashboard to be more user-friendly and efficient.

Read more...
How to create icons in Figma?

Are you struggling to create icons? Find out how you can easily create icons in ~3 min in Figma, even if you have no experience.

Read more...
Our approach to redesigning a dashboard

The roller coaster ride of redesigning dashboards from Ideation -> Visual Design -> User Testing. Read on...

Read more...
Why and how did we redesign our mobile app experience?

Learn the art of redesigning a user facing application without breaking the internet!

Read more...
The story of a first time manager and design leadership

My self-reflection as a first-time Manager leading Design at Fyle.

Read more...
How we re-designed icons in the Fyle app

Shyani talks about her experience and learnings with her first major design project at Fyle!

Read more...

All Topics