taptiplogo

Tip Calculator educates
American tipping culture

When I first came to the United States, I often struggled and felt awkward in a certain tipping situation. Since I had a lack of tipping experience here, I thought it would be helpful if there is a tip calculator educating travelers and international students about American tipping culture. Finally, I gathered another designer and developer, and we remotely collaborated to see if the concept would work.
 

Timeframe
Aug 2019 - Jan 2020

Role
Visual Design
Interaction Design

User Research
A/B Testing
Dev Handoff
Project Management

Tool
Figma
Google Forms
Illustrator
After Effects

Team
2 Designers
Software Engineer

GOAL

How might we build a seamless tipping experience while educating users?

goal2-1

People from different countries are not often sure of tipping conventional rate and whether to tip or not in a wide range of tipping situations in the U.S. They need a way to learn tipping etiquette and relevant cultural education.

APPROACH

The largest challenge was scope in a timeline and technical limit.

Since we are a small team with fewer resources in a limited timeline, we decided to focus on our efforts on improving the MVP features.

RESEARCH

Tipping culture around the world

It was interesting to see many countries tend to have tipping customs and discovered that most countries in East Asia and Southeast Asia don’t have much of a tipping culture except for some vacation spots where many travelers visit. We decided to scope people from those countries. 

05-TapTip-map-2

KEY RESEARCH INSIGHT

Our users want to learn American tipping etiquette.

We also researched what countries in East Asia and  Southeast Asia send the most travelers and international students to the U.S. We found out that most East Asian countries, China, Japan, South Korea, and Taiwan were on the list.

research-insight2
We conducted a Google form survey of questionnaires with 67 people to get quantitative data. We found out people have no idea whether they need to tip or not in many different situations and what proper tipping rate is. Surprisingly, we learned people would be willing to use the app if it educates about American tipping etiquette.
 
research-stats

MVP FEATURES

Tipping conventional rate and etiquette education are delivered for

16

different tipping services under the 4 categories, such as Restaurants, Transportation, Hotels, ETC. Based on the data from research, we concluded to focus on the features such as the tip rate recommendation and the tipping etiquette education for 16 different tipping scenarios.

App flow

Fairly simple, straightforward app flow 

Once the user opens the app, it prompts a geo-location permit modal. The geo-location automatically brings the sales tax of the service into the result screen depends on which state the user is located in.

Then, the user goes through a quick tutorial and a couple of questionnaires. If the user uses any services in Type-A and Type-C, then they need to put the subtotal of that specific service. And of results, it brings the suggested tipping amount rate and relevant etiquette information.

flow

DESIGN SYSTEM

Reusable components for design consistency

We applied 6:3:1 color rules based on the dark theme for more sufficient color contrast. 60% Dark Gray, 30% Gray, and 10% Accent Green. This rule improves the legibility specifically for this type of heavy number-driven design. Sufficient color contrast between foreground and background helps the user to read the numbers easier. Also, carefully designed the reusable UI components, We used Montserrat for better legibility of numerals

taptip-designsystem-

RESULT SCREEN

3 types of result screen
 for 16 services

type1-3
Type-A includes the receipt summary, split the check, and the suggested tip amount slider. Type-A only corresponds to the restaurant category.
type-2-1
Type-B has the tip amount range module. Type-B corresponds to Cafe, Takeout, Valet Parking, Housekeeping, and Front Desk.
Type-C has the suggested tip amount slider. Type-C corresponds to Buffet, Taxi, Uber, Shuttle Bus, Limo Driver, Hair Dresser, Nail Shop, Home Delivery, and Tour Guide.
type-3-1

Questionnaire

A couple of steps to Get quick answer

Once the user opens the app, they receive a prompt which is a couple of questionnaires on the landing screen so the user can get the answer quickly.

quiz2-1
slider02

Tip Rate Slider

Adjust tip amount by moving the slider

TIPS FOR TIPS

Learning American tipping etiquette
Tips-for-Tips-top-part-3
ken-profile

“TapTip app user interface is clean, modern, and easy to navigate.”

 

Kenneth NG, Engineer at SpaceX

result

Launching on Google Play Store

We successfully launched the TapTip app on Google Play Store. Our next goal is monetization from the app. We are researching possibilities for opportunities. We are keeping all the processes recorded as well so that we can use the strategy and method for future iterations.


*Note- Unfortunately, This project is currently paused due to COVID-19-related retail business closures and travel limitations in the U.S. after launching the MVP.

Wanna see more?

This TapTip case study is just such a movie trailer. It shows just some high-level points of the design process. If you'd like to see more about my work, I'd love to find a time to chat over Zoom with a cup of tea!

Next Project

Huntington-Bank-Cover3-1
Huntington Bank

Mar 2019 - Sep 2019

Redesigning the website to streamline information for four different audiences in the new brand ecosystem.