Our approach to redesigning a dashboard

Hey, I am Harsh Thacker. I am a designer at Fyle. In this article, I will discuss a redesign project I was recently involved in - The Admin Dashboard. Before I write more about our work, let's discuss a little about dashboards.

Users should be able to access the most relevant data, functions, and controls from a dashboard.

With the amount of data in a product, it is common for users to be overwhelmed with dashboards. Hence product teams need to organize information in a way that is easier to consume.

There are many approaches taken to simplify dashboards in today's world. Every digital product or service should keep the psychological needs of its end-users in mind while selecting a suitable method. Four basic principles guide the approach taken to design a product dashboard.

  • Make sure the users are always in control
  • Be efficient and save time for your users
  • Keep users aware of the current state of all data
  • Last but not least, Keep it simple, stupid!

We need to understand these user requirements and add the best design practices to create the perfect dashboard.

Why did we redesign the dashboard?

Old admin dashboard

Since Fyle is moving from an Expense Management Platform to a Spend Management Platform, our admin dashboard should be optimized to help the user derive meaningful insights from the spending pattern of their company. The current dashboard tells a little about their spend pattern.

Through previously conducted user interviews, we knew the main goal for admins at Fyle is to complete their tasks as quickly as possible. Most admins also have other responsibilities at their companies and wish to spend the least time managing and reimbursing expenses. The dashboard redesign began only after scrutinizing the user experience and usage of the current dashboard.

User Experience (Design Principles)

At Fyle, we realized our dashboard made the users aware of a lot of information, but it was not easy for them to process all of it. Hence most of our users did not use the dashboard to get a company overview or perform tasks. They used the sidebar to perform these actions. Our tasks design in the dashboard did not align with Gestalt's laws of visual hierarchy, prägnanz, or proximity to reduce cognitive effort on the admin.

An admin could not see their company's current spend pattern. This spend was hidden in the second scroll of the dashboard and was considered insignificant.

Usage Data

To understand more about the usage, we analyzed real-time data and went through Hotjar recordings to understand what journeys on the dashboard have the most interactions. This helped us comprehend the perspective of admins and how they were using the dashboard.

Usage data of our old dashboard

The Admins at Fyle have several sub-roles that can be assigned to employees based on the function they perform in the org. However, in ICP orgs most of the Admin-related actions are performed by the Admin, who has access to all org functions in Fyle. Other roles are not used as much.

Our user distribution (relevant for admin dashboard),

  • 26.3% are Admins
  • 1.7% are Finance
  • 0.8% are Verifiers
  • 0.06% are Payment Processors
  • 0.7% are Auditors
  • Rest are Spenders

Insights

  • Admins who have access to all functions in the org constitute most of our Admin dashboard users. The numbers for other roles are relatively low. Therefore, we can work on one dashboard for Admins that serves all personas.
  • The company spend-related stats are not present anywhere on Fyle. The dashboard should ideally be the place for it. This will be useful for the Admins to plan their budget and get an overall view of the company expenditure.
  • Statistics are essential, but actionable tasks for admins that must be performed frequently are equally important.
  • Admins are most interested in viewing the Expense Reports page. Here they review expenses under unverified or unapproved reports, possibly to verify these reports. It is recommended that expense reports be the top priority on the dashboard.
  • The next most viewed page is the Expenses page. Admins may want to consider these to check for incomplete cards and other not reported expenses.

Our Approach

We chose to divide the information we want to show on the Admin Dashboard into:

  • Actionable tasks  - Tasks that they perform daily to aid the operations of their org
  • Statistical Data - Tactical information that will be useful to the Admins in planning and getting a general overview of business expenses

Both these sets of information solved a specific purpose. Keeping them together meant an overload of information was bound to surface. Hence we divided this into two separate pages- Tasks and Spend Overview.

In this blog, I will only talk about one of these two pages to reduce cognitive overload on the reader ;-)

Actionable Tasks

As the product demanded, we grouped tasks as per the module they fell below. 'Report Verification' and 'Report Approval' were combined under Employee Expense Reports. This module was prioritized as it was the most used in our product. Two other modules shown in tasks were Reimbursements and Cards.

Apart from completing their tasks, admins also wish to be in control of the pending work of their spenders. Admins' lives become easier when employees submit card expenses, verify their Fyle accounts, approve expenses, etc. To enable this and give more control to the admin, we highlighted sending reminders on the tasks page. The admins could also set auto-reminders for their employees to complete their Fyle duties.

Final Designs

Final Designs

The UI visually highlights tasks more than reminders which is also the hierarchy we wanted to establish. All components used in the above screen were to maintain the Fyle Design System.

User Testing

After creating these concept designs, we made prototypes and tested them out with our customers. They reviewed our prototypes and helped us improve our user journeys. We incorporated a few changes suggested by customers into the design in response to these user tests.

These screens were implemented quickly by the Engineering Team at Fyle and are now a part of our product.

But this is not the end. Design is an iterative process toward maintaining a meaningful experience. Our next steps for the Tasks Dashboard will be to track usage and continue to improve this experience.

Harsh Thacker

More of our stories from

Design
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