UW Information School Project

Blend

A service redesign of the current tipping experience at cafés through a personalized "tip later" mobile app, updated Point-Of-Sale (POS) interface, and physical artifacts.

My Role

User Research

UX Design

UI Design

Service Design

Timeline

Apr - May 2024

4 Weeks

Tools

Figma, Photoshop, Illustrator

Team

5 Designers

My Contributions

I co-led the team as a primary product designer for the Blend App UI, guiding our service design project targeting both café customers and employees. I developed the core theme reimagining tipping, which became the foundation for our UI design, testing, and presentation. My leadership and design expertise were instrumental in creating a cohesive, intuitive experience integrating seamlessly into the café ecosystem.

Customer & Employee User Journey Maps

I created comprehensive user journey maps for both customers and employees, identifying key pain points in the tipping process, which guided our research and ideation efforts.

Ideation & Storyboarding

I facilitated team creativity by leading bodystorming exercises and co-creating illustrated customer scenarios, which guided our ideation process.

Experience Prototype Test Facilitator

I co-led the experience prototype tests, acting as the primary interviewer to guide participants, administer A/B tests, and collect feedback through post-test questionnaires.

Videography & Directing

I directed, filmed, and assisted in editing Blend's service design video, crafting a cohesive narrative that brought our customer and employee scenarios to life.

Logo Design, Theme, Design System

I created the logo and central theme of "tipping as a friendly handshake," which inspired the app's colors, typography, and layout.

Mobile App UI Design

I co-designed the App UI and flow, which influenced the POS interface. I created prototypes from low to high-fidelity for iterative testing.

Solution Overview

Problem Space

The current tipping process within cafés, facilitated by default digital payment interfaces like Square and Clover, often creates social pressure and discomfort for customers while disconnecting the act of tipping from rewarding the human-facing service provided by employees.

Clover POS Tipping UI

Opportunity

Reimagine the holistic café experience by introducing a more personalized tipping process that fosters genuine connections between service workers and customers—as natural and welcoming as a friendly handshake.

AGENCY

Restore customer discretion and agency over tipping practices

ALLEVIATE

Alleviate any social discomfort associated with tipping

ANTHROPOCENTRIC

Highlight the human-centered service

Service Design Solution

Introducing Blend (3-Part Solution)

Redesigned POS Interface

with a slider mechanism and a “tip later” function.

Physical Employee Stamps that highlight the drink's creator and a QR code that leads to the Blend app.

Tip-later App

A tipping, rewards, and messaging app for both customers and employees.

Transforming the Customer & Employee Experience through Blend

"Tip Later" Pop Up

Home Screen for Café Visits

Scan the QR Code to Access the Blend App

Customer

Leaves Café

Leaves the cafe with their drink in hand, pleased with the service and the tipping options.

Employees Receiving Customer Messages

Exits Cafe

09

Employee

Receiving Tips through Blend

Post-shift, checks app for total tips and customer messages receives, feeling rewarded.

Tips Received Pop-up

ENGAGING WITH THE BLEND APP


Exit Cafe

01

07

Personalized Barista Stamp on Drink Cup

INTERACTING WITH THE DRINK

QR Code to Access Blend

ADJUSTING THE DRINK

DRINK-MAKING & WAITING

CAFÉ ENTRY

Customer Experience with Tipping Slider

Employee

Receiving Payment

Sees total amount paid if "Tip Now” is selected or "Tip Later" indication.

04

ORDER PLACEMENT

Customer

Regular Café-Goer

Enters their regular café, ready to order their usual drink from their familiar barista.

Employee

Café Barista

Diligently serving regular customers at a busy local café.

Customer

Placing Order

Orders their usual drink with their preferred adjustments.

Employee

Receiving Order

Takes the customer’s order, confirming any adjustments.

Customer & Employee greet each other, catching up.

POS Tipping Slider

Separate POS screens for customer and employee privacy.

Customer

Paying & Tipping

Choose between"Tip Now" or "Tip Later." If "Tip Now," they adjust tip using a slider.

Customer

Waiting for Drink

Patiently waits for their drink in the waiting area.

Employee

Making the Drink

Diligently prepares the customer's drink.

Customer

Receiving the Drink

Takes a sip of their drink and requests a minor adjustment to the drink.

Employee

Handling the Drink

Offers customer a taste test of their drink and makes any desired adjustments.

07

05

Customer

Scanning the QR Code

On the Employee Stamp

Scans the personalized Barista stamp with a QR code on their drink, opening the Blend App.

Employee

Serving Other Customers

Continuing to take and prepare the orders of other customers.

Drink exchanged

Customer

Using “Tip Later” & Custom Messaging through Blend

In-app, selects barista to tip and sends a personalized message.

Employee

Receiving Messages through POS Interface

Sees customer messages while taking others’ orders.

08

05

04

03

01

01

02

06

08

Customer Messages on POS Interface

Employee POS Ordering System


Employee Satisfaction over Personalized Tips

User Research

Methodologies

We employed various methods to analyze existing tipping experiences, understand the socio-cultural attitudes on tipping, and identify factors influencing holistic user behavior.

Contextual Interviews

Field Observations

Competitor Analysis

Wizard of Oz Prototypes

Main Research Questions

01

How do customers and employees at cafés perceive the current tipping process?

02

How do payment interfaces and the human-facing service influence customers' and employees' tipping experiences?

Investigating the Current Tipping Culture

Seattle's tipping culture has become increasingly aggressive in recent years, with digital payment screens suggesting tips of 20%, 25%, or even 30%. This trend makes customers uneasy about tipping more often, while also pressuring workers who need tips to earn a living wage. (1)

Why tipping in cafés?


Cafés offer a unique setting to study tipping due to their quick service model. The rapid pace of transactions and brief customer interactions in a café setting create distinct challenges and opportunities for enhancing the tipping process.

Interviewing Customers & Employees

We conducted on-site interviews with customers and employees at local independent cafés, capturing real-world tipping interactions and perspectives of café-regulars.

  • 7 Café Visits

  • 4 Customer Interviews

  • 4 Employee Interviews (Baristas & Managers)

Synthesizing Data

We sorted insights by customer and employee perspectives, revealing shared attitudes about tipping but also highlighting the disconnect between these groups.

Key Insights

Customers & Employee Insights

Key Insights

01

Customers feel pressured to tip due to social norms, leading to a lack of agency in their tipping decisions.

"I tip because I'm supposed to, not because I fully agree." C2

02

Employees dislike the current tipping culture as well.

"Seattle tipping culture is not good - food is already expensive, people don’t tip that much… in Seattle [cafes]." E3

03

The tipping interface causes dissatisfaction among customers.

"The tipping screen guilt trips you into tipping. It’s like directly asking for tip." C2

04

Employees prefer separate screens rather than swivel screens.

"I feel awkward when turning the iPad around to customers. (cause it feels like forcing people to tip)" E2

05

Customers' tip amounts don't always correlate with the service quality, indicating a disconnect between service and tipping.

"How the employees act doesn’t have much affect on my tipping behavior" C3

06

Employees believe that the human-facing service they provide should be rewarded through customer tips.

"People say that [tipping] has gotten out of hand…but not in [cafes] since it’s hands-on service...there is more work involved. [It’s] part of the experience." E4

07

Customers experience discomfort when employees observe them in the process of tipping.

"I feel pressure when a server is standing there waiting for me to go through the check out and tips." C1

08

Watching customers tip makes employees feel uncomfortable as well.

"When the [customer] tips and pays, I step away…I try not to be starting down at them" E3

09

Customers' tipping preferences vary based on whether they dine in or take out, the café setting, and their order amount.

"I feel happier to tip if I sit in the cafe as opposed to grab and go." C2

10

Employees have mixed feelings about viewing customers' tip amounts.

“I feel the pressure if they tip me a fair amount that it has to be a perfect drink” E4

Design Challenge

How Might We

Based on our research findings, we identified the core design challenge: transforming the tipping process to benefit both customers and staff members.

How might we redesign the tipping experience in cafés to be more meaningful for customers and more rewarding for employees?

Meaning for Customers:

  • Preserving agency in self-tipping

  • Establishing transparency in who receives the tips

Rewarding for Employees:

  • Removing discomfort in watching customers tip

  • Promoting the human-facing service led by café employees

  • Providing instant gratification

Customer Journey Map

Identifying Key Touchpoints for Redesign

From our interviews, we developed user journey maps to visualize the emotional and cognitive trajectories of both customers and employees throughout a typical café visit. These diagrams, spanning from entry to exit, helped us identify key problem areas and opportunities for redesign.

Main Problem Areas

Café POS transactions create mutual discomfort: customers feel pressured when tipping, while staff feel awkward observing, leading to tension during payment.

The gap between service provided and service experienced in café order can lead to tension, as customers may feel unsatisfied while busy employees rush to serve others.

Ideation Brainstorm

Brainstorming through Experience Prototyping

Our ideation process was guided by key pain points identified from our design challenge and joint journey maps. We enhanced this process by using experience prototyping techniques, particularly body-storming and improv, to physically re-enact scenarios between customers and employees.

Early Concepts

We generated more than 20+ concepts that reimagined the tipping process and highlighted various touch points of interaction between people and interface.

  • 01 Third Party “Tip Later” Function

    Upon completing the payment, customers receive a QR code linked to their order. They have a 2-hour window to scan the code and tip any desired amount.

    02 Employee Stamps

    Employees have physical stamps that can be placed on each coffee cup to let customers know who made their drink, encouraging customers to tip post-service.

  • 03 Tip via Phone

    Customers tip directly from their phones by scanning a QR code specific to the employees at the cashier making their drink.

    04 Customer Loyalty Program

    Incentives and recognition is provided for customers who regularly tip well, encouraging them to continue their current behaviors.

  • 05 Sliding Tip Screen Bar

    A sliding bar replaces the standard  tipping buttons, allowing customers to more effortlessly adjust the amount across a dynamic tipping spectrum.

    06 Pay As You’d Like

    The screen encourages customers to pay what they wish, without specifying any set amounts.

  • 07 Introduce Personalized Messages

    Use customer’s and  barista’s names on the tipping interface for greater engagement.

    08 Tip with Money/Compliments/Emojis

    Option to give a compliment or emoji reaction instead of or in addition to a monetary tip.

  • 09 Employee Shout-Outs

    Post-payment - present quick and easy options to send a shoutout to an employee, such as by tapping a ‘star’ emoji or ‘thank you’ emoji

    10 Virtual Cash Tip Jar

    A virtual cash tip screen that visually showcases the total tips collected throughout the day.

  • 11 Hidden Tip Amount

    After a customer has tipped, the tipping amount is hidden for both sides, so only the total amount of the order is present to both customers and employees.

    12 Tipping Tokens

    Customers can buy reusable tipping tokens through the cafe app to give to specific employees, or they can physically drop the tokens into designated jars for each employee.

  • 13 Paying On Your Way Out

    Customers settle their bills and tip on a kiosk by the door when they exit.

    14 Pre-Tip Options

    Before the tip options (ex: 15%, 20%, 25%), a screen asking customers if they’d like to tip is shown. This screen shows two options: “Not today, sorry” and “Yes, I’d like to leave a tip!”

Down-selection

We selected our top 10 ideas through dot-voting, guided by down-selection principles based on our research insights and user journey map findings.


6 Design Principles

  • Emphasizes the human element of the service provided

  • Empowers customers by giving them more control

  • Reduces social awkwardness associated with tipping

  • Realistically implementable in typical café operations and environments

  • Allows for cost-effective prototyping within the project timeline

  • Both digital and physical interaction points for both customers and employees.

Ideal Customer & Employee Personas

We created personas to represent our target users, revealing the similar values yet differing needs that create tension between regular café goers and service workers. This dynamic informed our design approach.

Chosen Service Design Solution

We synthesized multiple concepts into one holistic service design solution that aimed to satisfy our target personas and illustrate the flow of interactions between digital and physical touch points.

Touch Point 01

Tip Later Option

POS interface introduces a "Maybe Later" option, providing customers with the flexibility to decide on their gratuity at a later time.

Touch Point 02

Employee Stamps

Drink cup features a personalized barista stamp with a QR code to access customer rewards and the "Tip Later" feature.

Touch Point 03

Tip & Rewards App

The QR directs to the app, where customers can tip the barista, leave a message/emoji, and view their rewards.

Touch Point 04

Barista Feedback

Through the same app, baristas can view their tips and read the personalized messages left by their customers.

Experience Prototype

Prototype the Café Experience for Usability Testing

Despite time constraints, we created a mock café to test our digital and physical prototypes with 3 participants using the Wizard-of-Oz method. This experience-focused setup allowed us to observe the customer journey in context, gather authentic feedback, and identify interaction issues between customers and employees with our prototypes.

Scenario Breakdown

We tested 2 customer scenarios in our mock café, with participants roleplaying as regular cafe-goers and interacting with our barista while going through their typical café routines, thinking aloud. We then asked specific questions to gather feedback after each scenario concluded.

Roles

  • Facilitator & Interviewer (Me)

  • Barista

  • Videographer

  • Notetaker

  • The Blend App Wizard Operator

Props

  • iPad (for Blend POS Interface)

  • Employee Stamp with QR Code

  • iPhone (for the Blend App)

  • Café Backdrop

  • Café Signage & Menu

  • Employee Name Tag

  • Order Receipt

  • Payment Reader Prototype

01 (Scenario A) Participants tipped via the Blend POS interface.

02 (Scenario B) Participants "tipped later" via the Blend app.

03 (A/B Test Scenario) Participants tried 2 versions of the Blend POS interface (slider vs. buttons)

04 (Post-test Questionnaire) Participants answered Likert scale questions on their customer experiences.

Usability Test Insights

Participants responded positively to our holistic café service redesign. They particularly appreciated our Blend system, which includes a redesigned POS interface and a "Tip Later" app. Feedback from participants provided valuable insights for improving the usability of both the app and interface.

All participants enjoyed having agency over when and who to tip through the “tip later” function.

“I like that I don’t have to give appreciation immediately. Maybe I can go to my office and do this.” P3

2/3 participants preferred the POS tip slider because it made tipping more fun.

“I like the tip slider, it’s a fun interaction. It’s a reward for spending money.“I like the tip slider, it’s a fun interaction. It’s a reward for spending money.” P2

All participants appreciated being rewarded for their purchases.

“So nice that I got 7 stars — felt magical that im getting this.” P1

2/3 Participants missed the QR code on the Employee Stamp featured on the drink cup.

“I think I just don’t look at it (the cup) normally. Unless I’m actually drinking it” P3

2/3 participants felt that the rewards system lacked sufficient context, creating confusion on its purpose.

“I feel like I would want to see how many stars I have and what I’m working towards.” P2

Introducing

Blend

Redefining the current tipping ecosystem through a redesigned POS interface and a "tip-later" mobile app that prioritizes the human connection between customers and employees. Blend offers both digital and physical interaction touch points to enhance the overall café experience, making tipping more meaningful for both parties.

Blend: Humanizing the Tipping Experience

Pause/Play

01

Blend App

I worked with two other designers to produce the Blend App UI. The app includes personalized tipping with custom messages as well as a rewards system to incentivize café loyalty through tipping consistency.

Initial Customer "Tip Later" Flow

Home Screen Iterations

LO-FI ITERATION 01

HI-FI ITERATION 02

EXPERIENCE PROTOTYPE

We streamlined the home screen by highlighting the main barista and recent cafe visit, reducing visual clutter to focus on the key action of tipping.

We aimed to highlight the customer's current cafe, promote tipping, and display earned rewards clearly.

We prioritized a cohesive visual hierarchy that humanized the tipping process for the customer.

FINAL VERSION

Additional metadata for customers to keep track of their café interactions.

Increased font size for greater legibility.

Customer appreciation

Updated the copy and added a "giving" emoji to emphasize support.

Simplified the café card to show only workers, past orders, and rewards.

Floating dark navigation bar that matches the "give a tip" button, establishing visual alignment and increasing scrollability

Primary call-out box for tipping the barista with order information.

Image-first café card with basic metadata on engagement & reward level

Barista photo to humanize the employee.

Simplified copywriting

Pronounced QR Code Scanner to call attention to the Employee Stamp

Rewards & Tip Pop-Up Screen Iterations

LO-FI ITERATION 01

FINAL POP-UP SCREENS

HI-FI ITERATION 02

GIVE A TIP POP-UP

SEND A MESSAGE POP-UP

EXPERIENCE PROTOTYPE

We aimed to make the pop-up friendlier by focusing on the barista and adding personal touches through the descriptions.

We made a secondary differentiated pop-up asking customers provide a tip, explaining they'd earn more rewards by doing so. This addresses user requests for clearer reward information in relation to tipping.

We wanted to engage customers with a pop-up message to show their latest cafe order and reward details when they opened the app from scanning the QR code on the Employee Stamps.

Based on user feedback, we created a separate pop-up to send a message to baristas for customers who have tipped at the POS. We also added more information about customer’s rewards and order details.

Added a “Thank You” message for visiting the cafe.

Increased surface area of the “View Rewards” CTA to encourage customers to tap

Included Drink Order

Explained how tipping increases rewards to incentivize customers

“Give a Tip” CTA button

Dark-themed separate pop-up to different between messaging and tipping the barista.

Increased the pop-up's real-estate to add more breathing space to include more information.

New “Send a Message” CTA button.

Adding section that show the total rewards and what they can get, to clarify the value of earning rewards.

Added Barista photo to create a more personal touch

"Who to Tip?" Screen Iterations

FINAL "WHO TO TIP" SCREEN

LO-FI ITERATION 01

HI-FI ITERATION 02

EXPERIENCE PROTOTYPE

We added a "Who do you want to tip?" screen at the beginning of the tipping flow to allow customers the choice of which employee to tip given that they may have interacted with multiple baristas during their visit.

We improved the UI with a compact vertical layout, added order details, and included a group tipping option, enhancing readability and allowomg for convenient one-tap actions.

Based on user feedback, we clarified the "everyone" tipping option and simplified the order display, creating a more cohesive design, improving usability for busy customers on the go.

Included order & reward details to help inform customer decision-making

Simplified the drink order section to match the rest of the UI and improved the information layout for clarity

Vertical layout to match the rest of the UI and keep information compact.

Added a tip "everyone" option so customers can show support to the whole team on shift, reflecting the collaborative nature of service.

Explained that the "everyone" tip option splits the amount evenly among staff

Tipping "Confirmation" Screen Iterations

FINAL CONFIRMATION SCREEN

LO-FI ITERATION 01

HI-FI ITERATION 02

EXPERIENCE PROTOTYPE

We aimed to showcase a clear confirmation that the customer’s tip and message has been received by the employee as well as information on their earned rewards.

We incorporated the employee photo and updated the copywriting to be more inviting to encourage ongoing customer support.

We added falling stars with sound for visual delight after tipping, simplified text to reduce cognitive load, and created a more appealing rewards card with a redeem button to encourage customer action.

Put at the center the tipped barista to highlight their importance and clearly show who the customer chose to tip

Updated rewards card for greater visual appeal and a redeem rewards CTA button

Reduced the tip amount text smaller to match the message, drawing focus to the employee image and earned rewards

Visual indication of confirmation screen

Updated the rewards copywriting to show how many rewards the customer earned from their tip

Added falling stars with sound to create a more sensorial and delightful completion of the tipping procedure

Clearly show the stars earned and total stars to give customers a better overview of their rewards

More humanized copywriting

Final Customer "Tip Later" Flow

Blend App for Customers

Initial Employee Access Flow

Employee's Tip & Message Screen Iterations

FINAL TIP & MESSAGE SCREEN

LO-FI ITERATION 01

HI-FI ITERATION 02

EXPERIENCE PROTOTYPE

We created a simple scrollable list featuring each customer’s tips and messages.

We further simplified the layout for ease of use, adding symbols, improved copywriting, and clear filtering options.

Based on feedback, we added more customer order details while emphasizing their supportive messages. Employees can now "heart" messages, which customers can see, establishing mutual acknowledgement and connection.

Emphasized customer messages to strengthen the human connection beyond tips.

Updated copywriting to indicate total tips earned

Included profiles to further personalize each customer

Expanded customer cards with their drink order to contextualize their tip and message

Added stars to indicate your “regular” repeat customers

Heart option to encourage employees to engage and communicate back

Copywriting that shows if the tip is for an individual or everyone.

Added filters for sorting tips by recency, amount, etc

Incorporated “E” to indicate they tipped everyone

Final Employee Access Flow

Blend App for Employees

02

Blend POS System

I helped guide, provide feedback, and support for the two designers who created the Blend POS system UI, which was largely inspired by the App UI. Our goal was to make tipping at the POS more enjoyable, flexible, and customer-driven, while also considering employee needs.

A/B Test of Two Blend POS Screen Iterations

FINAL POS TIP SCREEN

Based on customer feedback, we integrated the more fun-to-use slider feature with the incremental buttons for greater tipping precision while preserving its flexibility. We also added a "custom amount" option, allowing customers to manually enter their preferred tip.

Reflection

Success Metrics

Ideally, we would test Blend in a 2-week pilot in one or two local cafés. We'll compare sales before and after, and interview customers and employees about their experience. This will help us measure adoption, assess service improvements, and gather feedback for further product refinements.

User Safety Considerations

To mitigate misuse of the messaging and tipping features, we would implement a rigorous three-strike reporting system, resulting in account suspension and loss of tipping privileges.

To promote positive interactions, we would offer kind message suggestions and use AI to detect inappropriate language, triggering "Are you sure?" prompts. Users could also report and remove offensive messages. These features support the app's main goal: expressing gratitude rather than enabling unfiltered customer-employee communication.

Key Takeaways

Given more time, we would test our prototype with employees and cafe management to get their input on our design and the business practicability behind the “tip later” function.

Experience prototyping and service design illuminated the entire customer and employee journey, unveiling deeper emotions and motivations. This insight enabled me to craft seamless digital and physical touch points, resulting in a cohesive and engaging experience. By looking beyond isolated screens, I was able to design a holistic human experience that resonates on multiple levels.

Thank you to the most wonderful team of Service Design Enthusiasts & Café-Lovers!