All projects

Splitwise

A redesign of Splitwise, the app for sharing expenses with friends, family and colleagues.

A billboard on a train platform shows the redesigned Splitwise app: two phones with the group overview and an expense screen, the app icon, and the line Behalte den Überblick, teile Reisekosten unkompliziert. Three young people wait on the platform in front of it.

Project

Redesign

Team

Lea Dannenhauer, Hannah Moser, Gregor Baars

My part

Market analysis, information architecture, app structure, UI design, storytelling, style guide

When

October 2023 – June 2024

Watch the film

Splitting expenses is an everyday problem most people know. Splitwise already does a lot of useful things, but our own experience with it showed clear room for improvement in usability and functionality. So we took it apart and rebuilt it.

Analysis

First we mapped the screen flow of the existing app to understand its structure and navigation. A competitor analysis gave us ideas for new features. Then we rated every function with the Kano model and decided what stays, what gets better and what goes.

Remove

  • Note board

Unnecessary for how people actually use the app.

Improve

  • Inviting friends via QR code
  • Scanning receipts

Already there, with potential.

Add

  • In-app payments
  • Automatic currency conversion

Ideas from the competitor analysis.

Screen flow of the existing Splitwise app: about forty screens connected by arrows, from sign-in and onboarding through creating a group and inviting members to adding an expense and choosing how to split it.

User research

Our target group was people aged 16 to 45 who regularly share expenses with friends, family or colleagues. We interviewed 10 former Splitwise users about their needs and frustrations and turned their answers into four personas.

How might we make the topic of money more approachable?

How might we offer a long-term solution for expense tracking?

How might we make it quick and easy to record expenses?

Conception

To decide where each piece of information belongs, we built an information architecture. It gave us a clear hierarchy of functions, which we used for our first sketches and layout tests. Storyboards helped us understand user flows and brought up ideas for future features.

Part of the information architecture for the Friends section. From Friends, branches lead to settling debts, reminders, statistics, converting to EUR, exporting, viewing transactions and the list of expenses, each with its own sub-items.

Design

We turned our favourite paper sketches into wireframes in Figma. For three key screens, each of us designed three versions. We compared them and combined the strongest ideas into one direction.

Then we designed every screen, built a component library and wrote a full style guide.

  1. Wireframe of the overview: a greeting with your total balance, tabs for Groups and Friends, and a list of groups, each showing what is owed. A bottom bar with groups, a plus button and profile.
  2. Wireframe of a group: group name and your balance, three buttons for settling debts, statistics and group balance, then a list of expenses with item, person and amount.
  3. Wireframe of adding an expense: a category icon next to the name field, a euro icon next to the amount, buttons for payer and split, and icons for date and camera above the keyboard.

Visual design

Colour

  • #FF9E10
  • #0C7887
  • #6DB8B0
  • #E64A4A
  • #F8F8F4
  • #FFFFFF
  • #AEAEAB
  • #7C7C7A

Components

The bottom bar in three states: groups, plus and settings icons, with the active one in orange. The plus button is always orange.
Components: a person chip with photo and remove button, a currency chip reading IDR, Euro, a slider labelled Erinnern and its filled state, and a group card in four states, default, slid aside with an orange pin, pinned with a small pin icon, and slid aside with a grey pin to unpin.

Outcome

The final design brings a fresh, vibrant interface and new features that answer our three questions.

The prototype loads from Figma once you start it. Open in Figma

Film

The video loads from YouTube once you press play. Watch on YouTube

More projects

  1. steps

    Bachelor project with Hannah Moser

    A tablet app for choreographers. We did everything ourselves: finding the topic, research and interviews, wireframes, UI design, prototyping and testing.

    • Research
    • Interviews
    • Wireframing
    • UI design
    • Prototyping
    • Testing
  2. cooKI

    Speculative future project

    A fictional product for the kitchen of the future, built on induction cooking. The focus was on designing its UI.

    • Concept
    • UI design