Sense – Retail Banking white label & Design System

Designed and developed a comprehensive design system and mobile app prototype for a white-label retail banking solution that enables financial institutions to offer advanced account management, financial insights, and product marketplace capabilities to their customers.

MY ROLE

Design system architecture, user flows, IA, interactive prototypes for the full banking experience.

THE TEAM

One designer, four developers, art director, and a PO.

TIMELINE

Q2–Q3 2019

CHALLENGE

The business needed to transform their bespoke banking app (originally built for Aldermore Bank) into a scalable white-label solution that could be efficiently customised and resold to other financial institutions. The system required modularity, consistency, and flexibility to support easy branding adaptations while maintaining a robust user experience across three key phases of functionality.

SOLUTION

I implemented a system-based approach using Atomic Design methodology to create a comprehensive design system that served as the foundation for the entire product. The solution was developed in three strategic phases:

  1. Core Banking (MVP): Created functionality for connecting multiple bank accounts via Open Banking APIs, enabling money transfers and spending categorisation

  2. Financial Wellbeing: Designed interfaces for personalised insights, spending analysis, budgeting tools, and goal-setting features

  3. Marketplace Integration: Developed a framework for third-party financial products, offers, and vouchers, creating monetisation opportunities

The process involved extensive cross-team collaboration, user journey mapping, information architecture development, and iterative prototyping—from low-fidelity wireframes to fully interactive high-fidelity prototypes.

Watch a video recording of the full high-fidelity prototype

Process deep dive

User-Centred Approach

I began with a thorough audit of existing projects and concepts to establish visual direction and identify key user journeys. Working with product owners, we developed detailed user stories to guide the design process.

Example: Savings goals user stories

Journey Mapping

Before diving into visual design, I created comprehensive user flow charts to align stakeholders on core functionality and user paths. This "how it works before how it looks" approach ensured we addressed actual user needs rather than just aesthetic considerations.

Example: User flow of managing savings goals

Iterative Design Process

The design evolved through multiple fidelity stages:

  1. Sketching: Rapid exploration of layout concepts and information hierarchy

  2. Low-fidelity wireframes: Refined information architecture and functional relationships

  3. High-fidelity mockups: Detailed screen designs with full visual treatment

  4. Interactive prototypes: Clickable experiences for stakeholder review and validation

Sense Design System

ACHIEVEMENT

The core achievement was creating a comprehensive design system that:

  • Followed Atomic Design principles (atoms → molecules → organisms → templates → pages)

  • Established reusable component libraries in Figma

  • Provided clear guidelines for adaptable branding elements

  • Ensured consistency across all interface touchpoints

  • Facilitated efficient designer-developer handoff

This systematic approach enabled the product to grow organically while maintaining design integrity and brand flexibility, essential qualities for a white-label financial product.

Hi-fidelity screens gallery

OUTCOME

The Sense Design System and banking prototype successfully:

  • Provided Jigsaw with a marketable white-label product for rapid deployment

  • Reduced development time for customisation by establishing modular, reusable components

  • Created a scalable architecture that supports continuous product evolution

  • Enabled consistent branding adaptation while maintaining usability principles

  • Established a comprehensive design system that streamlined the design-to-development handoff

TECHNOLOGIES/METHODS USED

  • Design: Figma, Atomic Design methodology

  • Research: User story mapping, user flow diagrams

  • Development: React Native

  • Project Management: Jira, Google Docs

  • Process: Iterative prototyping (sketching → low-fidelity → high-fidelity)

Previous

CSC Pricing