Case study type: Mobile application to assist users with splitting their restaurant bills.

Scope: Solo UX/UI Design project for my apprenticeship. Overseen by Senior UX Design Mentor

Role: UX Designer, UI Designer

Tools: Figma, Photoshop, Illustrator, After Effects

Project Summary

After a quick research, I discovered that a great amount of users were unsatisfied with the current apps available for bill splitting--specially with the apps dedicated to splitting restaurant bills.

Implementing the design thinking process, I uncovered users' specific needs and created a mobile application to solve their frustrations.

What's the Problem?

People that dine together need an easy, accurate, and reliable way to split checks at restaurants because people end up paying more than their fair share.

The Solution

Provide a mobile application that:

01

Minimize human error by allowing technology to calculate the fair shares

There would be no need to use an external calculator, the app will do the math

02

Giving users full control over adding items, labeling items, and adding tips/taxes

Users can keep track of each person’s food item and also charge them the appropriate tax and tips if applicable (no one will pay more than what they actually owe)

Additionally, users can add any other relevant expenses, like if they carpooled to the restaurant and they want to split the gas.

03

A messaging screen to enable quick communication between vendor and customer about order updates, pick up/delivery coordinations, or any other questions

Payments can be done right away and builds trust between the app and user because they're already familiar with their preferred payment apps

But, how did I get here?

This is the research method is used to empathize with the users and understand their frustrations from different angles.

Competitive Analysis

User interviews

User Stories & Flows

User surveys

Persona

Prototype testing

Key research takeaways

Users don’t want to manually calculate everyone’s portions.

Users were frustrated that they had to use a calculator or even a piece of paper to split the bill. They also dislike how long it takes to split the bill, it can usually distract from the conversations going on. However, many of them prefer to settle their portion of the bill right away.

Users want flexibility

Users expressed not having full control over simple tasks, like labeling items or adding tips/taxes to calculations, with existing apps. They also seek a solution that allows them to incorporate their favorite payment apps.

Other mobile applications have a messy interface.

Some users weren't aware that there were apps available for splitting the check. The ones that were aware, have used Splitwise and didn't like that the UI was messy. A lot of these lists (bills) created were unorganized.

Low-fidelity prototype testing

Homescreen

01

When asked about their overall feeling of the home screen, users stated that seeing how much they owed as soon as they logged in caused unwanted urgency and stress. Instead, they want the information to be presented in a way that was less "in their face".

02

I decided to remove the first large button that indicated how much they owe, and left the list of "unsettled" bills. The lists of unsettled bills provide a monetary value that is easier to digest. 

The Visual Design

The color green was selected to instill trust between users and the application; along with rounded typefaces and shapes, reinforces the professional and inviting tone.

High-fidelity screens

Creating a bill

Allowing the app to do the calculations and split the bill takes the responsibility off the users, minimizing human error.

Editing the bill

Allowing users to update any part of the bill and at any moment allows them to keep track of each person’s spending and gives them the full control users want.

Options to pay

Users can use popular forms of payment, like Venmo or Zelle, to settle bills.

Final thoughts

One of the biggest takeaways from this project is to try to test the product as much as I can. Before fully designing the screen with visual elements, like color, I tested out a low-fi prototype and figured out that the home screen information was stressing out the users.

It was very surprising to see how the "Split it" screen in the low-fi prototype was easy to navigate, but after color and other visual elements, it caused confusion and users struggled to navigate it. This experience solidified the importance of not getting attached to my designs because sometimes it might not solve the problem.