Project Type: Concept / Product Design Role: Lead Product Designer Tools: Figma, Tokens Studio, Preline, IBM Carbon, Notion Timeline: 4 Weeks Platform: Web Dashboard + Mobile responsiveness Deliverables: End-to-end product design, design system tokens, interactive prototype
2. Context & Problem
Small and medium-sized enterprises often struggle to maintain a clear view of their financial performance. Their tools are fragmented — spreadsheets for expenses, banking apps for transactions, and separate CRMs for customer data.
Lack of automation for recurring financial tasks
Limited design consistency across web tools
Complex data presentation causing user fatigue
No unified view of income, expenses, and forecasts
3. Objective
To design a centralized financial dashboard that allows SMEs to:
Integrate with accounting, invoicing, and bank APIs
Personalize insights through tokenized design variables and light/dark modes
Track key business metrics and cash flow at a glance
Set and measure business goals dynamically
4. My Role
As the Lead Product Designer, I was responsible for:
End-to-end product experience design
Establishing scalable design tokens and semantic variables
Creating reusable UI components within Figma
Mapping out data-driven user journeys
Designing the prototype experience for stakeholder demos
1. Background
Project Type: Concept / Product Design Role: Lead Product Designer Tools: Figma, Tokens Studio, Preline, IBM Carbon, Notion Timeline: 4 Weeks Platform: Web Dashboard + Mobile responsiveness Deliverables: End-to-end product design, design system tokens, interactive prototype
2. Context & Problem
Small and medium-sized enterprises often struggle to maintain a clear view of their financial performance. Their tools are fragmented — spreadsheets for expenses, banking apps for transactions, and separate CRMs for customer data.
Lack of automation for recurring financial tasks
Limited design consistency across web tools
Complex data presentation causing user fatigue
No unified view of income, expenses, and forecasts
3. Objective
To design a centralized financial dashboard that allows SMEs to:
Integrate with accounting, invoicing, and bank APIs
Personalize insights through tokenized design variables and light/dark modes
Track key business metrics and cash flow at a glance
Set and measure business goals dynamically
4. My Role
As the Lead Product Designer, I was responsible for:
End-to-end product experience design
Establishing scalable design tokens and semantic variables
Creating reusable UI components within Figma
Mapping out data-driven user journeys
Designing the prototype experience for stakeholder demos
1. Background
Project Type: Concept / Product Design Role: Lead Product Designer Tools: Figma, Tokens Studio, Preline, IBM Carbon, Notion Timeline: 4 Weeks Platform: Web Dashboard + Mobile responsiveness Deliverables: End-to-end product design, design system tokens, interactive prototype
2. Context & Problem
Small and medium-sized enterprises often struggle to maintain a clear view of their financial performance. Their tools are fragmented — spreadsheets for expenses, banking apps for transactions, and separate CRMs for customer data.
Lack of automation for recurring financial tasks
Limited design consistency across web tools
Complex data presentation causing user fatigue
No unified view of income, expenses, and forecasts
3. Objective
To design a centralized financial dashboard that allows SMEs to:
Integrate with accounting, invoicing, and bank APIs
Personalize insights through tokenized design variables and light/dark modes
Track key business metrics and cash flow at a glance
Set and measure business goals dynamically
4. My Role
As the Lead Product Designer, I was responsible for:
End-to-end product experience design
Establishing scalable design tokens and semantic variables
Creating reusable UI components within Figma
Mapping out data-driven user journeys
Designing the prototype experience for stakeholder demos
5. Research & Insights
Through interviews with small business owners and analysis of platforms like QuickBooks, Wave, and Zoho Books, I uncovered key insights:
Users preferred visual financial summaries over text-heavy dashboards.
Goal-setting features motivated consistent engagement.
Real-time updates and bank feed integrations were top priorities.
Visual consistency and responsive UI ranked higher than advanced analytics for early-stage SMEs.
These findings shaped the structure and hierarchy of BizFinTrack’s experience — prioritizing clarity, simplicity, and speed.
6. Design Process
a. Structure & Information Architecture
I began by defining the core navigation pillars:
Overview (Cash Flow, Insights, Goals)
Transactions (Linked Accounts)
Goals (Milestones & Targets)
Reports (Performance Metrics)
Settings (Integrations & Profile)
The layout followed a three-panel grid system, optimised for readability and quick scanning.
b. Design System Foundation
To ensure scalability, I built a design foundation using:
IBM Carbon token structure
Preline components for accessibility and grid alignment
Figma variables for semantic colour management
Light/Dark mode support
Every token (spacing, typography, elevation, colour) was assigned semantic naming conventions, ensuring developers could scale across future modules effortlessly.
c. Visual Design & Prototyping
Key design choices:
Minimal colour palette (blue-accented neutrals)
Rounded modular cards for metrics
Consistent elevation layers to emphasise hierarchy
Progress rings and dynamic goal bars for motivation cues
Responsive data tables with sorting and tagging
The interactive prototype allowed full navigation between dashboard sections and included animated transitions between state changes.
7. Key Features
Feature
Description
Smart Dashboard
Real-time visualization of income, expenses, and goals using dynamic graphs.
Goal Tracker
Users can set financial targets and view performance progress visually.
API Integrations
Seamless linking to accounting tools, banks, and payment systems.
Dark/Light Mode
Adaptive theming powered by semantic tokens and mode variables.
Design Tokens
Structured variables for colours, typography, spacing, and components to ensure scalability.
8. Results & Learnings
Although a conceptual project, the outcome demonstrated how a system-first approach could make complex financial data simple and engaging.
Impact:
60% faster component design via tokenized variables
100% alignment with dev-ready code structures (Preline + Carbon)
Clearer hierarchy and readability compared to traditional dashboards
Key learning: A strong design system foundation early on saves significant design and development time later, allowing for consistent scaling across modules and themes.
9. Reflection
BizFinTrack reinforced my belief that even financial tools can feel human, friendly, and empowering. This project showcased how tokenized design and modular architecture enable flexibility and long-term growth without sacrificing simplicity.
It also strengthened my experience designing systems that balance business intelligence with usability, merging analytical depth with emotional design.
Have a dream project?
Let's transform your vision into stunning reality. Reach out today and start the journey to a remarkable brand presence.
