Payback Case Study | Allison Drake

Payback – UX Case Study

Role: Primary UX Researcher & Secondary Developer
Team: 5 designers/developers
Tools: Figma, Zeplin, GitHub, Google Forms, Zoom, React, HTML/CSS

Overview

Payback is a web application designed to help users manage group expenses and split bills easily. The app targets friend groups and families who frequently share purchases and need a seamless tool to track and resolve shared payments.

Problem

It’s often difficult and time-consuming to calculate and manage group transactions. Users need a quick, intuitive solution to split bills, manage balances, and avoid awkward payment reminders.

Users

Kate, College Student (18–23): “I love going out and doing activities with my friends on the weekends.”
Lives in Philadelphia and frequently splits bills with her group.

Our research targeted a primary demographic of users aged 16–32. Through user interviews, we discovered that careers, relationships, and tight-knit communities all influence how and when people split expenses. College students, early professionals, and young families are most likely to manage group spending — whether that’s at restaurants, for shared subscriptions, or during travel.

My Role

Led discovery research: surveys, interviews, personas, journey maps
Defined MVP features based on user pain points and feasibility
Moderated usability testing and synthesized findings
Developed front-end pages using HTML, CSS, React
Collaborated with the primary coder to organize assets and ensure build consistency

Scope & Constraints

Design and develop a full-stack app in six months
Determine and focus on core MVP functionality
Postpone advanced features like API integrations and notifications

Process

Discovery & Research

We began with in-depth discovery interviews to understand the context of group spending. We also developed a project canvas model to align on business and user needs, conducted a SWOT analysis, and performed competitive and task flow analyses. This led to the creation of well-rounded personas, empathy maps, and journey maps that grounded our design process in real user pain points and behaviors.

Competitor Analysis

Analyzed apps like Venmo, Splitwise, and Zelle. Found limitations such as paywalls, confusing user flows, and lack of collaborative spending features. These insights shaped our MVP priorities.

Design Concepts

Based on discovery insights, I created empathy maps, journey flows, and wireframes to ideate on user-centric solutions. These early design artifacts helped me identify pain points and opportunities, which directly shaped iterative UI concepts. The image below shows how specific research takeaways informed visual decisions at each stage.

Usability Testing

Conducted iterative usability tests with prototypes, developed scripts, and introduced severity charts to prioritize issues. Collaborated with the design team to refine flows and align with user expectations.

Development

We developed over 20 responsive pages using React. I focused on translating Figma and Zeplin mocks into code, maintaining design consistency through modular components. The app was deployed on Vercel, and GitHub was used for version control. We iterated based on test feedback and ensured each screen had mobile-first responsiveness and consistent layout hierarchy.

Developed navigation, page structure, modals, and linked everything together.

Outcomes

Launched a working MVP of Payback on Vercel: Live Site
Balanced researcher and developer roles to align design, feasibility, and functionality
Created a user-centered experience through thorough research and testing

Working across research and development deepened my understanding of feasibility and user-centered design. This project sharpened my communication and collaboration skills and showed the value of aligning research insights with build constraints.

Payback App