FairShare

Role:
UI/UX Designer
Project Type:
Mobile App
Tools:
Figma, Next.js, Adobe Illustrator
Timeline:
January 2024 - Ongoing
Team:
4 Designers, 3 Developers (Jan-May 2023) 2 Designers 3 Developers (Current)
Links:
Overview

Designing for the Realities of Shared Expenses

Managing shared expenses often creates confusion and tension. FairShare simplifies bill splitting and group expense tracking to make balances clear.

Originally developed as an interdisciplinary BCIT project, FairShare evolved into a focused MVP centered on shared expense workflows.

Impact Snapshot

  1. Improved uneven bill-splitting completion 40% → 75% by restructuring split logic.
  2. Reduced user hesitation during bill splitting through contextual confirmation patterns.
  3. Designed and tested 5 core mobile workflows.
  4. Narrowed scope from broad fintech concept to focused shared-expense MVP.
High-fidelity mobile app mockups showing FairShare’s onboarding screen and group expense dashboard in a dark-themed interface.

My Role & Scope

As a Product Designer, I translated research into a flexible shared-expense system that reflects real-world group dynamics.

  • Defined the shared-expense system model, narrowing scope to a focused MVP
  • Synthesized research to shape flow structure and interaction patterns
  • Designed and iterated core bill-splitting flows for group-based scenarios
  • Aligned system logic, UI, and constraints across design and development
  • Led usability testing and analysis to inform iteration
Understanding The Problem

Where Shared Expense Tools Create Friction

Managing personal finances is already complex, but many tools treat shared expenses as fixed, linear processes. As contributions rotate and reimbursements lag, this creates friction in tracking who paid and who owes what.

Group of young adults sitting together in a shared apartment, representing roommates as a key demographic for shared expense management.
Research

Current Behaviors and Tools

Shared expenses are currently managed through a mix of dedicated apps and informal workarounds. The comparison below highlights how each approach structures balances, splits, and interaction models.

Tool
Primary Focus
Interaction Model
Friction Observed
Splitwise
Group balance tracking
Manual entry + chronological ledger
Manual adjustment for complex splits

Balance clarity depends on scanning feed
Settle Up
Group expense tracking
Ledger + balance visualization
Reduced legibility in balance bubbles

Final balance lacks visible breakdown
Notes App / Manual Tracking
Quick informal record keeping
Freeform list, no automated balance logic
No automatic balance updates

Easy to miss entries

Requires off-platform coordination

Key Insights

Synthesizing findings from user research and competitive review revealed several consistent patterns:

Manual Entry Breaks Consistency

Manual input leads to inconsistent tracking and drop-off.

Splitting Rules Don’t Match Real Life

Uneven payments and reimbursements lack flexible support.

Trust Barriers Limit Feature Adoption

Unclear permissions and data usage reduce adoption of advanced features.

Overwhelming at First Use

Complex navigation increases initial cognitive load.

Designing the Solution

Flexible and Automated Shared Expense App

FairShare reflects how group finances work in practice, rather than forcing users into rigid systems.

The solution focuses on:

1.

Flexible Expense Splitting

Supports uneven payments and shared bills to reflect real-world scenarios.

2.

Reduced Effort Through Clear Flows

Streamlined entry and clear sequencing reduce coordination effort.

3.

Clear Shared Context

Shows who paid, who owes what, and how balances evolve over time.

4.

Transparent Automation

Uses secure bank integration while maintaining clear data transparency.

Design Process

Story Mapping

Story mapping reframed shared expenses as an ongoing, multi-step experience rather than a single transaction.

This helped identify key moments where users needed context, allowing flows to be structured around sequencing actions and maintaining visibility over time.

Early Iterations

Early iterations explored different structures for receipt confirmation, group assignment, and bill splitting. The focus was balancing flexibility with clarity while reducing unnecessary steps.

FairShare's earlier iteration of the receipt transcription and bill splitting flow.

Usability Testing

Five participants completed task-based testing across three flows:

  • Basic personal expense management (goals, budgets, and cards)
  • Receipt scanning and itemization
  • Group expense flows including bill splitting and repayment

Findings:

  • Uneven bill splitting (40%) had the lowest completion rate.
  • Layered UI and multi-step decisions increased hesitation.
  • Receipt confirmation noted as intuitive, with near-complete success.

Restructuring the Experience

Based on testing, the flow was redesigned to reduce cognitive load by sequencing decisions and preserving receipt context during splitting.

Iteration 2 — Contextual & Flexible Flow

FairShare's earlier iteration of the receipt transcription and bill splitting flow.
Final Product

Core Shared Expense Management Flows

The final design simplifies shared expense management by reducing upfront decisions and keeping key actions visible within a single flow.

 

Flexible Expense Entry

  • Users confirm receipts first without committing to group context.
  • Group assignment is deferred, allowing more natural task flow.
Step-by-step receipt scanning flow showing capture, automatic transcription, review, and editable receipt details before confirmation.

Contextual Group Management

  • Group selection happens only when needed.
  • Receipt updates dynamically with group context.
Mobile screens showing a receipt being manually assigned to a group, with a dropdown list of groups displaying member avatars and current balance status.Group expense overview screens showing member balances, pending and settled expenses, and colour cues indicating who owes or is owed within a shared group.

Inline Bill Splitting

  • Splitting interface is embedded within the receipt view
  • Eliminates the need to toggle between drawers and details
  • Maintains visibility of itemized expenses during splitting
Mobile screens showing flexible bill splitting flow, including split by amount, percentage, and item-level assignment. Screens demonstrate participant selection, real-time balance updates, and final settlement summary.

Visual System & Category Framework

The visual system prioritizes clarity in a data-dense financial context. A restrained palette reduces noise, allowing amounts, balance states, and primary actions to stand out.

Color and iconography create a consistent category system across groups and transactions, supporting faster recognition and reducing reliance on text.

Together, the system reinforces clarity, consistency, and user trust.

Visual design system showing FairShare’s logo usage, typographic hierarchy, and core colour palette as well as colour and iconography for the category system.
Validation & Impact

Final Validation

A second round of usability testing validated the refined design.

Findings:

  • Uneven bill splitting completion increased from 40% to ~75%.
    Participants required significantly less assistance compared to earlier testing.
  • Clearer task sequencing reduced hesitation.
    Removing layered drawers improved contextual visibility during splitting.
  • Group assignment achieved 100% completion.
    Deferred commitment reduced early decision friction.
  • Core receipt confirmation remained intuitive.
Lessons Learned

Designing for Real-World Use and Implementation

Real-world flows are rarely linear.
Uneven payments, shared responsibility, and delayed reimbursements quickly complicate “simple” interactions. Validating flows against real financial behavior is critical.

Scope is an active design decision.
Prioritizing bill creation, splitting logic, and balance clarity ensured the MVP remained usable while aligning with development constraints.

Design intent needs to survive implementation.
Clearly documenting flow logic, edge cases, and rationale helped preserve UX decisions as technical trade-offs emerged.

⇱ view project