FINSYNC is a Platform that provides financial management services for small businesses such as sending and receiving payments, accounting management, financial management, and payroll (think Quickbooks). While QuickBooks and other accounting software offer their customers banking, FINSYNC partners with banks as an additional offering ensuring they have an option that secures sustained customer retention and satisfaction.
Roles
Lead Product Designer, UX/UI Design
Timeline
3+ Year
Tools
Figma, Jira, Fullstory
Client
www.finsync.com
Collaborators
2 Designers, 1 Product Manager, 5 Developers
For over a decade, FINSYNC’s software had remained virtually unchanged. As expectations for modern navigation grew, the product began to feel dated and disjointed. Through heuristic evaluation, we uncovered redundant flows and inconsistencies across its many silos. With engineering resources stretched thin, a full rebuild wasn’t an option—so our team designed a solution that modernized the platform while honoring the constraints of its legacy system.
The Legacy FINSYNC Software
Given our limitations, we focused early on what was achievable. Through stakeholder interviews and FullStory analysis, we identified the product’s most-used features and prioritized them. This informed a mobile-first strategy centered on core functionality, becoming the foundation for a new design system where previously none existed.
Creating a Design System
Our process started with a mobile-first strategy focused on simplicity and scalability. With a product rich in diverse functions, we wanted to identify the essential interactions first, creating a foundation for a design system that could evolve naturally over time.
The new desktop experience introduced a consolidated left navigation, replacing the previous top bar and reducing cognitive load. On mobile, we implemented accordion components that improved scannability and allowed users to complete multi-step flows, like profile creation, on a single page, cutting down both clicks and friction.
Cutting Down on Clicks
We introduced new inline editing as a replacement for our previous modal approach, and it offered several key benefits:
Inline editing occupies less space, allowing more content to be visible on a single screen.
It supports embedded sections, making it easier for users to quickly scan groups of categories.
Users can continue interacting with left-side content, whereas modals previously blocked the full screen.
New Inline Editing
Seamless, Scrollable Profile Drawers
Profile drawers complemented our inline editing by giving users a single, scrollable space to access everything at once. This mirrored the continuity of our mobile experience, making personalization easier and allowing users to quickly scan and manage profiles without switching views.
As we begin migrating the legacy product into a new system, we’ve been able to uphold a core design principle: enabling users to complete their tasks with minimal steps, clicks, and screen changes. While many functionalities from the legacy system are still being integrated, early results show a more than 40% improvement in the speed of making payments and other core operations.
Other Projects: