How did we revamp Fyle Accounting Integration Platform?

Hi, I am Saurabh. I joined Fyle as a Product Design Intern, and during my internship, this was one of the major projects I worked on. This project lasted around three months, teaching me a lot about how to own and design a complete project from scratch. So, here I am, giving you a walkthrough of how that journey went for me.

Okay, but what is Fyle Integration Platform?

Fyle’s Integration Platform is where the handshake happens between Fyle and the organization’s Accounting Platform (QBO, NetSuite, Sage Intacct). Here our design specifically addressed the Fyle-QBO handshake.

But why this handshake?

  • The organization exports all the expense records stored in Fyle to the accounting platform for reconciliation purposes which is further used for auditing purposes.
  • This step is very critical for the financial operations of a company and is carried out by the finance department or Admin, depending on the company’s structure.

Why revamp?

The initial version of Fyle Integration platform was primarily an MVP version and developer-driven. Hence the ease of different user journeys was not considered in multiple places. As our user base grew, various features' scalability, discoverability, and usability started becoming an issue, and our customer support team was loaded with piles of tickets.

Here I have outlined a few essential issues out of many:

1. Importing and Exporting Expenses

Import and Export were the two main action items in any Integration platform. In the old dashboard, once the user carried the “Import/Export” operation,

  • They were taken to a different page(Menu→Import/Export) where the user had to carry the same Import/Export operation again.
  • Also, Import as an action could have been entirely automated; hence, the user's manual intervention was not needed.
Dashboard - Old Design
Import & Export - Old Design

2. Discovering Import-Export Failures and Resolving the Errors

Discovering the failed entities during export and export failure was hidden inside the Expense Groups menu, and our users always wondered where to find them.

  • Export groups UX Copy does not tell anything about failures.
  • The page did not reveal anything about the reasons behind the export errors and the next step to resolve the errors to make them exportable again.
  • Users had to go and individually check all the errors in each of the expenses - which was a lot of steps

Let's look at a messy path → If 20 expense exports got failed, → The user first wondered why the expense count is different in accounting → They land here → No clue, reached CS or somehow discovered expense group —> find the particular expense → Still no error → Visit inside → visit the mapping tab, found the error by luck →  Wondered about error resolution → Reached CS Team.

Expense Group module - old design. This is where the user needs to go to know about an export failure that happened

3. Scattered IA

Settings Page - The IA of the settings page was so scattered and hence making any changes to the config was a lot harder

Discovery of handshake aka Mapping Records:

  • Mapping is a configuration entity that tells A in Fyle is B in the Accounting platform.
  • While it was expected to have past mapping records separately, the records were available inside the Settings page, making the discovery harder.
Category Mapping - old design
Creating New Mapping - old design

Discovery of Export Records - The expense group is a place where both failed, and successful exports can be found

Dashboard - Wastage of real estate + Lack of needed information

4. Inconsistencies in UI

Even though it is an essential part of the product, integrations still looked different from other platforms as they were not aligned as per our Fyle Design Language. The inconsistencies in UI introduced a learning curve for the users here, which increased the chances of committing the mistakes.

Our Approach

After we outlined the problem space, we set up our objectives.

To create a self-serve design for accounting integrations that is easy to configure and use while involving minimal-to-no hand-holding from customer support.

Capturing Existing Journey and Gaining domain expertise knowledge

Since the integration world was new to me, I did frequent joint exercises with the product, engineering, and design to gain domain expertise knowledge quickly while capturing the existing user journey. This gave me a better perspective about the users, their pain points, and most of the edge cases.

Exploring and understanding the integrations platform

Nailing the Navigation

After iterating through many solutions through brainstorming with other stakeholders and my teammate Aishvarya Gupta, we finally settled on our IA

Break down of Navigation Menu

1. Dashboard

  • Export Action
  • Export Information
  • Errors (if any)

2. Export logs - Export Log is where you can quickly locate your successful exports with all the required details.

3. Mappings - Records our entries which says A in Fyle is same as B in QBO

4. Configurations - A place where you can find, edit and update your Fyle-QBO configurations anytime.

Old vs New Sidebar

Designing Supercharged Dashboard

The primary purpose of Fyle-QBO integrations is to export expenses as per users’ configuration to their QBO account successfully. Everything else is just to support this action.

Automating Import as a Function

  • While Import was an important action, later on, I found that the system can automate importing the expenses from Fyle based on configuration. Hence removed this action from the interface to keep the dashboard actions minimal.

The Export as a Function

  • It is a single-click action now, and users can perform the action while staying in the dashboard, without navigating to a different page
  • After exporting, the user could get visibility of the export stats and errors incurred during the process.

Error Handling and Resolution

  • Error handling is a super important aspect; here in integration, it was absolutely needed. To avoid the current messy path and better discovery, the dashboard was a great place to provide information about any export errors.
  • Along with discovery, I provided the resolutions for each error to unblock the users asap.

Successful Exports Log

  • Being a separate standout entity in Sidebar, It was easy to discover all successful entries.
  • I provided a quick natural filter to quickly find any specific entries in a particular time duration which was a complete miss in the old design.
  • Aesthetically improved the interface of the table to scan through the information quickly.
Export Logs

Mappings

  • Mapping is of different types like Employee Mappings, Category Mappings, Project Mappings, Class Mappings, and many more, depending on their configuration. Each sub-menu is designed to hold entities of one specific mapping, thus making it scalable.
  • Sometimes the newly created items are not mapped well, which can easily be identified through the colour-coded chips tag and the no of stats.
A section of Category Mappings Screen

Configurations

To get started, all users must configure their Fyle-QBO integrations once during onboarding. These configurations decide how the exports will be carried out and recorded.

In the new design, the structure of Post-Onboarding configurations has been kept similar to the new Onboarding design for a similar experience and easy recognition.

A section of Post Onboarding Configuration - New Design

User Testing

  • For user testing, we carefully designed the critical actions the user needs to perform and prepared a Figma link.
  • I observed their approach to accomplishing the tasks and the paths they followed. This gave me a better perspective on designing the dashboard error discovery section.

Challenges faced

  • Competition Analysis - The only reference was the old platform in front of us. There was no competitor offering a similar solution, so we had no outside references.
  • Accounting heavy initiative - The whole initiative required us to understand many accounting processes and terminologies. Which was challenging but exciting.

Learnings and Credits

As a product design intern, it was my first big initiative. Here, I got the opportunity to own the entire initiative, while experimenting and learning at each and every step of the process.

This project was only possible because of the guidance and support I got from the team at Fyle. I'd like to thank Swapna R Nayak and Aishvarya Gupta from my Design team at Fyle for guiding me well throughout the project. I’d like to thank Gayathri Sridhar for helping me to understand the integration platform better. Shwetabh Kumar and Ashwin for helping with technical support and awesome dev work. All the internal stakeholders for their valuable feedback throughout the process.

To the whole team effort! 🚀👏

Saurabh Singh

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