Responsive Web App
Updated a Legacy FinTech Dashboard for Seamless Integration of New Features
Use Case
As a small business owner, I need a user-friendly dashboard to streamline access to available early payment options and display all my markets in a single location.
This will enable me to conveniently monitor upcoming payments and adjust early payment rates for quicker receipt of funds.
Discovery & Definition
The legacy product originated as a proof of concept, with engineers and product managers collaborating to develop a tool that allowed users to quickly enable participation in deals and adjust rates as necessary.
However, as focus shifted towards the creation of a new and improved product, updates to the legacy dashboard were neglected, resulting in a cluttered, inefficient, and confusing user interface. This led to ongoing dependence on support from the Customer Success and Sales teams.
Additionally, the rigid structure of the dashboard hindered the product team's ability to introduce new features, while implementing significant UI changes required a substantial investment of engineering resources.
The Challenge
To integrate new markets beyond the existing ones, we tackled outdated code in the legacy application. Our design approach prioritized efficient changes to minimize development time and avoid disrupting current users.
Lean Learning Curve
Introduction to new financial terminology as well as a new layout for the users might disrupt users current smooth user experience
Dev Feasibility
We had to ensure that the new design would co-exist with the current front end and back end environments with least dev effort
Business Needs
The 3 types of new markets have different rules and regulations that alters the users experience differently for each market
THE PROBLEM
Analysis of the Current Dashboard
Design Explorations
Before delving into dashboard design, we explored efficient methods to modify the existing table, which holds the majority of information on the screen. Our guiding principles centered around ensuring responsiveness and enhancing the current user experience.
Extendable Columns
Expandable Vertical Rows
Action Panel
Scrollable Table
SOLUTION
Revised Dashboard
Incorporating the new market types and revamping the dashboard with a tab layout:
Based on the current screen analysis and the table form explorations these were the 4 key decisions made to the dashboard design
1
Introduction of horizontal tabs to incorporate new market types
Users can now easily navigate between different market types using horizontal tabs. This update provides visibility into the number of opportunities and associated values for each market, preventing revenue loss by keeping users informed about new opportunities.
2
The addition of tooltips provides users with detailed breakdowns of displayed values, enhancing dashboard usability
3
Consolidated split button for global actions
A single split button for global actions has been incorporated, improving user experience. Placing it below relevant tabs clarifies its validity for each market.
4
Enhancing Market Visibility
Introducing accent Colors for Clear Market Differentiation with the inclusion of five market types, compared to the previous two, assigning accent colors to each market tab will distinctly differentiate between markets for users.
This enhancement not only improves the visual elements of the dashboard but also facilitates user navigation and reduces the learning curve.
The Result
We completed the first design phase of the C2FO project in November 2023. To gauge the success of the revamped dashboard, we employed both qualitative and quantitative metrics. Success would be achieved if:
1st
Support inquiries to Customer Success and Sales teams regarding dashboard usability and functionality decreased by 20%.
2nd
Users effectively utilize the dashboard to access early payment options, resulting in increased early payment rates and faster receipt of funds, thus driving B2B SaaS revenue growth.
3rd
Sales team members, when impersonating users, can easily navigate the dashboard without requiring human assistance.
4th
The web app's NPS score remains stable despite changes to a six-year-old dashboard design that users were accustomed to.
Reflection
A significant takeaway from the project was realizing the importance of balancing functionality with ease of implementation. It's crucial to introduce new features and improvements to meet user needs while ensuring smooth implementation without disrupting existing workflows. Additionally, prioritizing user familiarity when introducing design updates emerged as critical. Users tend to resist changes that deviate significantly from their accustomed interface, highlighting the importance of incremental updates and seamless transitions to maintain user satisfaction and adoption.