FinanceFlow — Eron Begiqi

Overview

FinanceFlow had accumulated 4 years of feature additions without a cohesive design strategy. Power users had developed workarounds; new users churned within their first week. The brief was clear: make the product feel like it was designed, not assembled.

The constraint was equally clear: we couldn't break the mental models of existing power users who had memorized every workflow.

My Role

Lead UX/UI Designer

Timeline

14 weeks

Team

1 designer (me), 2 engineers, 1 PM

Tools

FigmaFigJamMazeHotjarLottie

Deliverables

UX research report
48-component design system
Responsive prototypes
Motion specifications
Dev handoff documentation

Process

4 phases

013 weeks

Research

Deep-dive into how real users navigated the existing product, and what they actually needed day to day.

24 user interviews across 3 segments (analysts, managers, executives)
Heatmap and session recording analysis — 2,400 sessions reviewed
6 core workflows accounted for 80% of all daily usage
70% of interactions clustered in the top-left quadrant of the screen
Biggest pain: finding specific data across multiple disconnected views

Segment

Count

Score

023 weeks

Wireframes

Rapid exploration of navigation paradigms before committing to a direction. Three radically different approaches tested.

3 competing navigation paradigms prototyped at lo-fi fidelity
Moderated usability testing with 12 participants per concept
Progressive disclosure pattern outperformed alternatives in all tasks
Command palette interaction (⌘K) reduced navigation time by 60% in testing
Card-sorting exercise with 18 participants informed the information architecture

035 weeks

Design

Building a cohesive system from the ground up — not a collection of screens, but a living design language.

48-component library covering all product surfaces
5 responsive breakpoints with consistent spatial rhythm
WCAG AA compliance across all components
Dark mode variant with independently tuned contrast ratios
12 data visualization patterns with color-blind-safe palettes

043 weeks

Delivery

Close collaboration with engineering to ensure the design intent survived implementation.

Weekly design-engineering syncs throughout the build sprint
Motion specifications with exact easing curves and durations
Edge-case documentation for 34 identified error and empty states
Two rounds of QA review with annotated feedback
Post-launch monitoring for 4 weeks, 3 iteration cycles

Handoff specs

Font size14px / 1.6

Spacing8px grid

Radius8px / 12px

Shadow0 2px 8px 0%

Duration200ms ease-out

Components

ButtonCardInputModalToastNav

Outcomes

Results

Faster task completion

Average time to complete top 6 workflows

Fewer support tickets

Navigation-related tickets in the first 60 days

Longer sessions

Average session duration increased significantly

NPS score

Up from 24 pre-redesign — a 43-point improvement