Splitwise Redesign: Building a Scalable Design System

As part of my final project for an Advanced Interaction Design course, I redesigned Splitwise, a financial app, with a focus on creating a scalable design system in Figma. The goal was to improve consistency, streamline developer handoff, and lay the foundation for a more flexible UI.

Role
Product Designer

Class Project
Advance Interaction Design

Industry Finance

Year
2025 Winter Semester

About Splitwise

Splitwise is a financial app that helps people track and split shared expenses, commonly used among roommates, couples, and travel groups.

The Problem:

Splitwise’s current design suffers from visual inconsistency, likely due to multiple teams contributing independently, each interpreting the visual style slightly differently and without a shared design system to align them.

Key Issues identified:

  • Onboarding uses soft, pastel illustrations, while core app screens use flat-colored icons.

  • Button types are inconsistent & do not consistently follow a primary/secondary/tertiary hierarchy.

  • Top Navigation is inconsistent across add expenses screen and settling bill screens

My Approach:

To guide the redesign, I anchored my approach around three key principles:

  • Consistency: A shared language of components and tokens across the product

  • Accessibility: Enhanced color contrast, better font choices for numeracy, and theme flexibility

  • Scalability: A system that could grow with the product and support new features efficiently

Typography

I chose Karla as the primary font to address potential innumeracy bias and support better readability for its clean, approachable style.

I chose Montserrat as the secondary font to complement Karla while maintaining a clear visual hierarchy and modern aesthetic.

Why it matters: Financial UIs often deal with dense information. Legible, well-contrasted type directly impact usability and trust.

Color System

I refined Splitwise’s brand colors to enhance contrast and ensure compliance with WCAG standards, improving accessibility in both light and dark modes

I created a layered token system in Figma:

  • Primitives: raw color values

  • Semantics: meaning-based roles assigned to primitives

  • Mode-aware: Supports two theme modes (light and dark) and three role types (primary, secondary, tertiary) to ensure consistency and hierarchy across the UI.

Why it matters: This system provides a clear reference for designers and developers to easily apply consistent, accessible colors based on their semantic roles rather than individual values throughout the product.

Atomic Design

I used Atomic Design to structure components, organizing them as atoms (buttons, icons), molecules (input + label), and organisms (expense cards, nav bars). All components were built in a shared Figma library for smooth collaboration and developer handoff.

Why it matters: This modular approach not only ensures design consistency and reusability but also accelerates collaboration and streamlines updates, making the product easier to maintain and scale over time.

I created color variables—named color tokens like primary, secondary, and tertiary—that adapt automatically between light and dark modes. Instead of hardcoding specific colors everywhere, these variables let the design update consistently and efficiently.

Why it matters: This approach ensures visual consistency across the product, simplifies making global color changes, and enables smooth theme switching to keep the interface clear and accessible.

Variables

Hi-Fidelity Prototype

(click the prototype to explore in detail)

Learning:

  • This case study reflects my approach to building design systems that don’t just scale visually, they scale organizationally and strategically. I treated Splitwise not as a UI facelift, but as an opportunity to rethink structure, semantics, and collaboration at a systemic level.

  • I operated with empathy for users who interact with complex financial information daily, choosing type, color, and layout not for aesthetics alone but for clarity, trust, and accessibility. And I translated design intentions into tokenized assets that reduce dev guesswork and support fast iteration in both light and dark environments.

  • This work demonstrates how I think holistically, across UX, tech, and business needs, to build systems that empower teams, support personalization, and evolve with product complexity.