NovaPay —
Design System & Interactive Prototype for Mobile Banking
A comprehensive fintech banking application designed from the ground up — starting with a complete design system in Figma (variables, tokens, 20+ components, mobile and desktop screens), through to a fully interactive coded prototype built with Next.js and Tailwind CSS. This project demonstrates end-to-end product design: research, information architecture, design system foundations, component library, responsive screen design, and a working interactive prototype.
Banking,
redesigned
NovaPay is a fintech banking application designed from scratch — demonstrating how a modern mobile banking experience can be built systematically from design system foundations through to a working interactive prototype. The project covers the full product design spectrum: research, information architecture, a token-based design system, a reusable component library, responsive screen design across mobile and desktop, and a coded prototype that brings every screen to life.
The design challenge: create a banking app that feels trustworthy and professional while remaining intuitive for everyday transactions — balancing information density (account balances, transaction history, analytics) with the simplicity users expect from modern fintech products.
Token-based
foundations
The design system was built from the ground up using Figma variables — color tokens, typography scales, spacing values, and border radius variables. This token-based approach ensures consistency across all screens and makes the system easy to maintain, theme, and hand off to development.
| Foundation | Details | Purpose |
|---|---|---|
| Color Tokens | Primary, secondary, success, warning, danger palettes with light/dark mode values | Semantic color system enabling theme switching and accessible contrast ratios |
| Typography | Inter font family · Display, heading, body, caption scales | Hierarchical type system for clear information scanning in financial contexts |
| Spacing | 4px base unit · 8-point grid · Consistent padding and margins | Rhythmic spacing for clean, professional layouts across screen sizes |
| Border Radius | 4px (inputs) · 8px (cards) · 12px (panels) · Full (avatars, badges) | Consistent rounding that balances approachability with financial professionalism |
20+ reusable
components
The Figma component library includes 20+ reusable components built with variants — buttons, cards, inputs, navigation elements, transaction rows, chart elements, and more. Each component was designed to work across both mobile and desktop breakpoints, with consistent interaction states (default, hover, active, disabled).
Every screen
mapped
| Screen | Purpose | Key Elements |
|---|---|---|
| Dashboard | Financial overview at a glance | Available balance · Account cards · Upcoming bills · Spending overview chart · Recent transactions |
| Transactions | Complete transaction history | Filterable list · Category badges · Date grouping · Search · Amount display |
| Transfer | Send money between accounts | Recipient selection · Amount input · Account picker · Confirmation flow |
| Cards | Card management | Virtual/physical card display · Card details · Freeze/unfreeze · Spending limits |
| Budgets | Spending category tracking | Category budgets · Progress bars · Monthly comparison · Overspend alerts |
| Pay Bills | Bill payment management | Upcoming bills · Payment history · Auto-pay setup · Reminders |
| Analytics | Financial insights & trends | Income vs spending · Category breakdown · Monthly trends · Savings rate |
| Profile & Settings | Account configuration | Personal info · Security settings · Notification preferences · Theme toggle |
From concept
to prototype
This project followed a structured design process — each phase built on the previous to produce a comprehensive, production-ready design system and interactive prototype.
• User needs analysis
• Feature prioritisation
• Information architecture
• Typography scale
• Spacing & radius variables
• Figma variable setup
• Variant architecture
• Responsive behaviour
• Interaction states
• 15 desktop screens (1440px)
• Dark mode variants
• User flow diagrams
• Tailwind CSS styling
• Framer Motion animations
• Responsive & dark mode
Every choice
justified
Key design decisions were made based on fintech best practices, user expectations, and the need to balance information density with clarity.
| Decision | Rationale | Alternative Rejected |
|---|---|---|
| Dashboard as financial hub | Users need to see balance, recent transactions, upcoming bills, and spending trends at a glance — reducing the need to navigate between screens for routine checks. | Minimal dashboard with just balance — forces unnecessary navigation for common tasks. |
| Token-based design system | Figma variables enable systematic theming (light/dark), ensure consistency across 30+ screens, and create a single source of truth for developer handoff. | Hard-coded color values — impossible to maintain at scale and prevents systematic dark mode. |
| Mobile-first with desktop adaptation | Banking is primarily a mobile activity. Designing mobile-first (375px) ensures core flows work on the primary platform, then expanding to desktop (1440px) adds density without compromising the mobile experience. | Desktop-first — results in cramped mobile layouts that don't account for touch targets and thumb zones. |
| Dark mode as first-class feature | Banking apps are used at all hours. Dark mode reduces eye strain, saves battery on OLED screens, and signals a modern, premium product. Built into the token system from day one. | Light-only — misses user expectations for modern fintech apps and forces retrofitting later. |
| Lucide icon system | Consistent stroke weight and style across all icons. Open-source, well-maintained, and available as both Figma components and React components — bridging design and code. | Mixed icon sources — creates visual inconsistency and complicates implementation. |
Interactive
walkthrough
The coded prototype brings every screen to life — explore the dashboard, transactions, transfers, cards, budgets, and more. Built with Next.js, Tailwind CSS, and Framer Motion.
Interactive Prototype — Scroll & tap to explore
Best experienced on mobile viewport · Open in new tab
From design
to code
| Layer | Technology | Why Chosen |
|---|---|---|
| Design | Figma (Variables, Components, Auto Layout) | Industry-standard tool with variable support for token-based design systems |
| Frontend | Next.js · TypeScript | File-based routing maps naturally to screen architecture; TypeScript for type safety |
| Styling | Tailwind CSS | Utility-first approach mirrors design token values; rapid prototyping with consistent output |
| Animation | Framer Motion | Declarative animations for page transitions, micro-interactions, and chart reveals |
| Icons | Lucide React | Same icon set used in Figma designs — pixel-perfect design-to-code consistency |
Visual foundations
What I
delivered
What this project demonstrates
This project shows my ability to build a product from the ground up — starting with design system foundations (tokens, variables, components), designing responsive screens across mobile and desktop breakpoints, and validating the entire system by building a working interactive prototype. Every design decision is backed by fintech UX best practices, and the coded prototype proves every interaction works in production.
