How did we revamp Fyle Accounting Integration Platform?
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.
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.
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.
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.
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.
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.
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.
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.
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! 🚀👏