Pay up with TabUp

A solution for simplifying group payments

Project Details

In 2024, I assisted Grace and Mercy Foundation's (G&M) technology team with re-designing their landing page and porting into Webflow. G&M wanted to the new design to highlight their core values, impact, initiatives and approach.

Timeline

8 weeks

Role

Lead Webflow Developer, UX Designer
Webflow, Figma, CSS, Photoshop, ChatGPT

Tools

Platform

Desktop and Mobile Web

Website

View Prototype

Evaluation of Problem Space

The Problem

Younger generations overspend due to social pressures. Since Gen Z has grown up in a society full of accessible entertainment options and social media, they are the generation most likely to over-consume due to this combination of entertainment and social pressures.  They are the catalyst of growth for the experience economy.

Secondary Research

A study conducted by Qualtrics on behalf of Intuit Credit Karma, found that social pressures place a burden on individuals finances and the misalignment in spending behaviors leads to friendship dissolution.

Competitive Research

  • I found SplitWise was cumbersome because users have to manually enter every expense or receipt for every trip
  • I reviewed Venmo's group functionality, which, like Splitwise, requires users to manually enter each expense to be split evenly among the group.

User Interviews

I conducted five user interviews within my target audience (19-27, goes out 2x week, NYC) to dig deeper into whether social factors  were causing people to overspend, or if people were comfortable communicating financial boundaries.

Analysis of findings to propose a design solution

Affinity Mapping

I categorized responses from each interviewee into either a motivator, behavior or pain point, then I grouped each post-it into similar themes.

Legend: Pink = Pain Points | Blue = Behaviors | Yellow = Motivators

The interviews revealed that that P2P payment apps do not effectively solve group payments because small purchases often go unnoticed, tracking every receipt is cumbersome, and people frequently forget to reimburse. The insight that I found to be most compelling to dig deeper in is that many people feel anxious about putting a card down for the group, but they are willing to do it if no one else offers, as long as they know everyone in the group.


Knowing that my most compelling insight was that people have anxiety putting their card down for the group but are still willing to do it led me to my How Might We (HMW) Question.

How might we ease anxiety of financial liability for group purchases in order to instill more trust and financial balance within a friend group?

User Persona

After I analyzed the outtakes from the affinity map I created a persona that represents my target user.

Meet Ben

"The Frugal Friend"
22
Media Coordinator
NYC

Behaviors

  • Has friend group of 8 core people
  • Puts card down if necessary
  • Goes out on a weekly basis for happy hour to split wings/pitchers with 5-6 friends

Motivations

  • Keeping track of expenses amongst friends versus constant back to back Venmos
  • Prioritizes social gatherings

Pain Points

  • Unfair splitting
  • Tracking expenses
  • Maxing out personal budget

Task Flow

Key user stories were categorized into the core epic of Quickly Paying functionality. This guided the task flow which came from the perspective of illustrating a user onboarding, creating a group, adding their friends, and itemizing a tab.

Design for a seamless and efficient user experience

Sketching

Before sketching, I gathered inspiration for screens and actions in my task flow. Since the MVP aimed to provide a quick and seamless way to split and itemize payments with friends, my sketches explored different methods for adding friends to a group and itemizing a bill. I also considered the number of steps in the onboarding process to ensure users could easily grasp the concept without feeling overwhelmed.

Wireframing

Once I landed on a few possible solutions I began creating Low-Fi Wireframes in Figma. These were translated into mid-fi frames and tested in two rounds of 5 people over zoom and in-person. I had each testee walk through 5 different tasks including onboarding, creating a new group, adding group card to Apple Wallet, itemize a reciept and locate all prior transactions.

Low-fi Wireframes
Mid-Fi Wireframes

Iterating

After testing I compiled the feedback and assessed which changes to prioritize based on which provided the highest value and impact.

I prioritized the following:

  • Add friends through shared link
  • Decline/Accept a charge to build trust
  • Communicate concept idea at onboarding stage
  • Explain Tax/Tip charge is included
  • Explain how to use card more clearly

Before: Add Friends with Location Services

After: Add Friends via shared link

Before with Cash Pool

After Cash Pool Removed

Developed accessible and intentional branding

Color Palette

The UI Library I created to capture TabUp's look and feel was focused around the brand adjectives I chose which were "modern", "youthful", "innovative" and "present".

I chose slate blue as my primary color,  warm coral as a secondary and shades of dark purple as a neutral. Blue which is important because this is financial app, dark purple feels elegant and modern and the pop of warm coral injects the youthful undertone of my audience.  Since accessibility was a major consideration I used shades and hints of these three colors.

Logo Iteration

V1: I knew I wanted to visualize the TabCard since that is a prominent feature of the MVP, but felt this version did not flow together well
V2: Added the hand to flow into the U more seamlessly
V3: Tested using the same 3 signal lines that Tap Pay Icons use to visualize the Tap Pay feature
V4: Final Lockup, removed the signal lines to keep the logo  modern, professional and approachable

Tied everything together for the final prototype

Final Designs

View Prototype

Key Learnings

Enhanced product-thinking: This project opened myself up to thinking through how design affects adoption strategies, onboarding experiences and use of new technology (like NFC cards).

Forward Thinking

I would measure the impact of my solution by understanding how many reimbursement conversations were avoided because of TabUp and any areas that still need improvement. This will involve gathering user feedback to assess the effectiveness of the app in reducing social friction and streamlining payment processes.


Thank you for reading! If you would like to hear about TabUp more in depth please reach out!  ◡̈

TabUp Landing Page

For more on TabUp, check out another project I worked on, a landing page on Mobile and Desktop.