The Corridor

Boba Shop Kiosk Design

Team: Yang(Cindy) Jin, Daniel Xie, Zhaorui Zhang
Timeline: 4 weeks | Nov 2024 - Dec 2024
Tools: Figma, Google Slides, Google Docs

Figma Prototypes Slides Deck

Project Overview

This project focused on designing a user-friendly self-service kiosk for The Corridor, a boba shop catering to Gen Z customers. The goal was to streamline the ordering process, reduce wait times, and enhance customer satisfaction by addressing practical pain points. Through user research and iterative prototyping, the kiosk design prioritized clarity, ease of customization, and seamless navigation. Key features included Featured Drinks and Past Orders shortcuts for quick selections, an adjustable kiosk height for improved accessibility, and clear drink customization visuals to simplify the ordering experience. The final design aimed to create a smooth and enjoyable experience for every customer interaction.

My Contributions

In this project, I was responsible for creating both low-fidelity and high-fidelity prototypes in Figma, conducting user research to identify customer needs, and designing the physical kiosk structure for accessibility and usability. I also developed user personas to guide design decisions, crafted a moodboard to establish the visual direction, and prepared presentation slides to effectively communicate our design process and outcomes. Additionally, I led the final showcase, presenting our kiosk design, guiding attendees through its features, and encouraging them to interact with the system firsthand.

Online Research Summary

Kiosk Advantages

Kiosk Disadvantages

Reduced Wait Times: Self-service kiosks streamline ordering, allowing customers to place orders more quickly without waiting in line, which can enhance overall customer satisfaction in high-traffic locations.
Increased Revenue Opportunities: Kiosks can be programmed to upsell or cross-sell, encouraging customers to add extras to their orders, which has shown to increase average order size by up to 20%.
Improved Order Accuracy: Visual menus allow customers to select items and customization options precisely, reducing the chance of order errors, which can be especially beneficial in boba shops where drinks often have many customization options.

Lack of Human Interaction: Some customers prefer interacting with a person, especially if they have questions or need help with complex orders. Reducing staff interaction can lead to a less personal experience
Technical Issues and Downtime: Like any technology, kiosks require regular maintenance and are prone to occasional malfunctions, which can lead to customer frustration if they aren’t promptly resolved.
Higher Initial Investment: Setting up a kiosk involves upfront costs for the equipment and installation, as well as potential maintenance costs over time. This can be a significant expense for small businesses

Competitive Analysis

Common Pain Points

Technical Downtime and Malfunctions
↓
Kiosk black screen

User Interface and Usability Issues
↓
Unintuitive Design

Limited Accessibility
↓
No adjustable Height Option

Storyboards

Scenario: First-Time User Confusion

A first-time customer enters the shop and is unfamiliar with using the kiosk.

The customer feels hesitant and unsure how to operate the kiosk, slowing down the ordering process.

An employee is available to introduce the kiosk to first-time users, answering any questions and guiding them through the steps.

The customer gains confidence in using the kiosk and completes their order smoothly. They feel comfortable using the kiosk independently on future visits.

Scenario: Frequent Reordering

A regular customer who frequently orders the same drink wants a fast way to reorder without going through the entire customization process.

The customer has to reselect options for their preferred drink each time, which feels repetitive and time-consuming.

The kiosk offers a “favorites” feature where customers can save their usual order for quick access.

The customer selects their saved order in one click, completing the process quickly. This feature adds convenience and builds loyalty.

Scenario: Express Order Needed

During off-peak hours, a customer with a simple order wants to grab a quick drink without waiting.

The current ordering process doesn’t allow quick, express options, even for straightforward orders, leading to unnecessary wait times.

An express ordering option is available on the kiosk for commonly ordered items.

The customer selects the express option, places their order swiftly, and receives their drink without delay, enhancing their experience.

Scenario: Difficult Locating Kiosks

A young adult enters a boba tea shop during peak hours, looking to place an order quickly.

They struggle to find the kiosk due to unclear placement and end up waiting in line at the counter, increasing their frustration.

The kiosk is positioned near the entrance, making it immediately visible to customers as they enter.

The customer sees the kiosk right away, uses it to place an order quickly, and avoids waiting in the long counter line. Their experience is faster and more convenient.

User Research Interview

Process:

Crafted interview question guide
Selected a few boba shops around San Diego, CA
Interviewed in total of 6 people at different boba shops
Recorded video or audio with notes

Analysis:

1. Technical and Usability Challenges

1.1. Slow and Unresponsive Interfaces

Participant 4: "Boba shops don’t usually have good Wi-Fi connection, so sometimes I have to start the system over... they’re often older computers, so they’re slow."
Participant 2: "Sometimes I have to press the button multiple times for it to work."
Participant 4: "When I enter my phone number, I like to type it all at once, but they make me type it in slowly, one number at a time."

1.2. Outdated Hardware Impacting User Experience

Participant 4: "The kiosks use older computers, and it’s obvious when you’re trying to navigate quickly. They lag behind, which is annoying."
Participant 1: "It feels like they’re using technology from the last decade. Sometimes I can’t even tell if it registered my press."

2. Confusing Navigation and Layout

2.1. Difficulties Navigating Menu Categories

Participant 1: "Some drinks come with foam or something, and you have to opt out of it. That can change up where the toppings are located."
Participant 3: "The categories throw me off... you go in and have to scroll around to find things, and sometimes it’s just hard to find what you’re looking for."

2.2. Poor Layout of Options Causing Mistakes

Participant 2: "The gift card option is closer to the confirm button... I tend to click on it instead of the credit card option by accident."
Participant 3: "The layout doesn’t always match what I’d expect... I end up clicking around trying to find things."
Participant 5: “The most inconvenient part is when you want to edit or delete items from your order after selecting them. Sometimes, the kiosk doesn’t provide an intuitive way to see the items in the cart or to edit them quickly.”

3. Lack of Clear Visuals and Instruction

3.1. Small and Hard-to-Read Text

Participant 2: "The text on the interface is kind of small, so it takes more time to read and slows down the process."
Participant 4: "When I’m rushing, the small text makes it hard to quickly confirm my choices."

3.2. Unclear Icons and Button Functions

Participant 2: "Some icons or buttons don’t clearly communicate their functions... it takes more time to figure out what they mean."
Participant 3: "Sometimes I have no idea what an icon is for, so I end up clicking around just to see."

4. Membership and Sign-In Confusion

4.1. Misleading Membership Sign-In Prompt

Participant 3: "The kiosk asks for my phone number upfront... it might make people think they’re signing up just by entering their phone number."
Participant 2: "If you don’t want to sign up, but still need to enter a phone number, it’s confusing. It should be at the end of the process."

4.2. Phone Number Requirement

Participant 3: "I think asking for a phone number right at the start can feel invasive. It would make more sense to ask at the end when you get a notification."

5. Limited Control Over Customization and Ordering Experience

5.1. Issues with Drink Customization Options

Participant 1: "Sometimes the toppings or add-ons are confusing... if a drink has foam by default, you have to manually remove it, and it changes the layout."
Participant 3: "For my store, there’s no option to add or remove some ingredients easily, so people get confused about how to customize."
Participant 6: "But sometimes, after I place an order, I might change my mind about things like the sugar level. The problem is I can’t just adjust it—I have to cancel the whole order and start over."

5.2. Inconvenient Placement of Tipping Option

Participant 4: "I’m not a fan of the tipping option showing up since I’m ordering for myself... it’s confusing, like should I tip or not when no one is helping?"
Participant 1: "The tipping screen pops up, and it feels strange when I’m the one doing the work."

6. System Downtime and Reliability Issues

6.1. Frequent System Freezes and Restarts

Participant 4: "Sometimes I have to start the system over, especially if the connection isn’t stable."
Participant 1: "If I’m moving too fast, the screen sometimes freezes or doesn’t register, so I end up starting over."

6.2. Lack of a Reliable Backup Option

Participant 3: "If the kiosk goes down, there isn’t really a backup... and if there’s a line for the cashier, it just creates more wait time."
Participant 2: "When the kiosk isn’t working well, you’re just stuck waiting. It’d be nice if they had more options when the system is slow."

7. User Perception of Kiosk as Inferior to Human Interaction

7.1. Limited Personalization and Recommendations

Participant 3: "If I want to know what’s good, the kiosk isn’t going to help with that. It doesn’t have the same personalized touch."
Participant 4: "Kiosks don’t give you recommendations like a cashier can... so sometimes I feel like just going to the counter."
Participant 6: "Recommendations for popular or signature items would be great, especially for first-time customers. That would make it easier to choose."

7.2. Reduced Comfort and Flexibility Compared to In-Person Ordering

Participant 2: "If I’m in a hurry, it feels like the kiosk is just slower and harder to use than a quick conversation with a cashier."
Participant 1: "In-person is just easier when I know exactly what I want because it’s faster to just say it and go."

Hi-Fi Clickable Prototype

Selected Screen Designs

Starting Page

Member/Guest Login

Enter Phone Number

Featured Drinks Catagory

Milk Tea Catagory

Selected Drink with Description

Customization

Checkout

Payment

Ending Page with Order Number

Physical Interactive Kiosk Design

An innovative boba shop kiosk designed to address key pain points in the boba checkout experience.

Placement

Our kiosk is designed to be placed at any boba shops that are striving to provide a smooth and welcoming checkout experience for their customers while improving their brand images and shopping reputations.

Height Adjustable Feature

Our kiosk screen is thoughtfully designed with height accessibility in mind, addressing a key issue identified during our user research. Users can effortlessly adjust the screen to their preferred height by simply dragging it up or down, ensuring a comfortable experience for teenagers, taller individuals, and people with disabilities alike.

Seamless Style and Function

The Corridor kiosk embodies our brand identity not only through its digital interface but also in its physical design and aesthetics. The warm, milk tea-inspired tones on the kiosk's body, paired with boba-themed decorations and our signature logo, create a cohesive visual experience that reflects brand authenticity and fosters customer loyalty.

The checkout symbol and credit card slot are strategically positioned next to the screen for easy accessibility. Additionally, the physical order ticket is printed from the side of the kiosk, allowing users to conveniently retrieve it.

Process

1. Material Selection

We went to Home Depot to carefully select medium-density fiberboard (1/4 in. × 2 ft. × 4 ft.) with the appropriate size and hardness for our kiosk structure.

2. Design and Planning

Using Inkscape, we calculated the dimensions for cutting the wood boards and designed the engraved patterns.

3. Laser Cutting

At the UCSD Makerspace, we used a laser cutter to precisely cut the wood boards according to our design specifications.

4. Assembly

We glued all the wood boards together and attached magnets in the appropriate positions to ensure stability and functionality.

5. Finishing Touches

We painted the exterior and added artistic patterns to give the kiosk an appealing and polished final look.