How Happy Lemon redesigned its website and online ordering in response to the pandemic.

High Fidelity Prototype

Please note that while Happy Lemon is a real business, this project was an unsolicited redesign.

Roles: Research, UX, Prototyping, Visual Design

Project Length: 4 weeks


Happy Lemon Seattle is a collection of 5 café stores in the Seattle area that serve Taiwanese style bubble tea beverages, smoothies, and snacks.

Due to preventive measures against COVID-19, stores can't have as many customers in them as before. This means that foot traffic has significantly decreased which also negatively affects store sales.

How might Happy Lemon increase the number of orders and store sales, while adjusting to limited capacity?


To better understand the order process of Happy Lemon customers, I focused research on people who have ordered from Happy Lemon or another similar store. All participants were familiar with ordering food or drinks online as well.

Three people were interviewed in-person. I accompanied two participants to a Happy Lemon store and observed their order process, and picked up an order from a different store for the third person after they ordered online. Interviews were conducted shortly after the orders were completed.

Interview Findings

  • Photos are especially important in scanning the menu. Key information like flavors and cost should be easy to find at a glance.
  • How busy the store is can impact whether participants decided to order online or in-person at that moment.
  • Freshness of the drink is important (such as ice melting). Order notifications through text or email are appreciated.
  • Time is also a big factor in ordering. It should be quick and orders should be predictable so the customer can make the most of their time and get in and out. If someone is running errands, it should be convenient for them to pick up the order on their way to the next place.
  • All participants preferred less ice in their drinks as a customization option, because they felt like they would get more value for the price. Amounts of sugar in the drink vary depending on the flavor (fruity vs milk tea for example).


To find top competitors, I searched Google and Yelp with keywords like "boba" or "bubble tea" specifically around the Seattle area. These competitors ranged from those only in Seattle, to local franchises part of a larger chain.

Competitive Research Findings

  • All competitors are using third party ordering systems or delivery apps. For example, OrderToGo/Mealkeyway for order systems or UberEats, Caviar, Postmates, Grubhub, etc for delivery/pick up.
  • Menu photos are usually static and users cannot interact with these.
  • Photos make a big contribution to the brand impression and the “feel” of the website. Photos + social media posts can be differentiators since there are so many competitors with similar offerings.
  • There should be several clear categories (online orders, menu, locations) that make the purpose of the website clear. There doesn’t need to be too much extra info on the website (testimonials, updates, etc) since additional info can be sprinkled into the menu and online ordering systems.

User Persona

Information Architecture

Since this was a redesign of an existing website, I referenced the original Happy Lemon Seattle website for a rough draft of how their information is organized.

Using the original website along with a feature roadmap that ranked pages by priority, I created a Site Map for the redesign.

Keeping in mind that the goal of the redesign is to help with online orders, I focused on the "Order Online" and "Menu" pages as the main gateways into the online ordering flow.

Interaction Design

From here, I created low fidelity wireframes for the home pages on desktop, tablet, and mobile. These were drafted with the primary user task of ordering a drink online for pick up.

From competitive research, I noticed that common strengths were clear Call to Actions. This led me to emphasize the "Order Online" and "See Menu" buttons through prominent positioning.

Examples of the desktop and mobile home screens are pictured below.  

Order Flow Process - Desktop

Since the user will pick up their order at a store, the first part of the flow focuses on finding the Happy Lemon store the user wants to pick up their order from.

From here, the order flow goes into:

1. Selecting an item

2. Customizing this item

3. Reviewing and confirming the order

4. Choosing whether to Pay Now or Pay in the Store

5. Entering payment details (if paying online)

6. Choosing how to receive order notifications (email or text message)

7. Finalizing the order

Menu - Desktop

This page is for users who might want to browse the menu before ordering online or visiting in person. After displaying available items, there is a Call to Action at the bottom of the menu which brings the user to the online ordering flow.

High Fidelity Wireframes

To prepare for prototype testing, I created high fidelity wireframes of the homepage, menu page, and order flow process. These were all based off the low fidelity wireframes and focused on how the user might order a drink online. Below are several examples.

Homepage & Menu - Mobile

Because of the limited space available on mobile, I wasn't able to carry over all of the elements from the desktop version and so broke up the middle Stores section into smaller components.

For example, the user taps on boba icons to see pop up windows that show relevant info for that store. If the user wants to see more details, they can tap the "More Info" button to be directed to a fuller page with store details.

The Menu page is also displayed on the right side image. It displays the same information as the desktop menu, but readjusts elements due to spacing and screen size.


With all of the wireframes for the homepage, menu, and online ordering I created a high fidelity prototype that was tested with 3 participants.

Based on feedback from user testing, there was one main area where participants got confused and all pointed out. This was for adding additional options to their drink.  

Additional comments and heat map image showing where participants clicked are included below.

Based on feedback, I made adjustments to image and text positioning to make it more clear that there are more customization options available by scrolling. Some parts of the modal were intentionally cut off to indicate that the user needs to scroll, and I also added instructions under the product image on how to proceed.

Additionally, wording was slightly adjusted to make it clearer what is already included in the item being used for this example flow. For example, one participant thought that tapioca was already included in the drink based on the product image.

Based on this feedback, I made it extra clear what was included in the drink and what was not as the user went through the order process. Adjustments are marked with the pink rectangle.


It should be natural and intuitive for the user to go through a flow. If they need to guess or can't find certain parts immediately, this causes frustration and confusion.

Ways that I can help guide the user are through visual cues (accurate product images), clear descriptions, and the hierarchy of elements.

All of these blend together to help the user tell at a glance what they should be doing.

UI Kit

After finalizing iterations and the high fidelity wireframes, I gathered all the UI elements into a kit for future reference. These include the Color Palette, Typeface, Buttons, and Inputs.

Final Designs

As a frequent customer of Happy Lemon, this project was an interesting way to dive into the design of a local business that I've seen grow over the years. With things shifting to online, many businesses had to adapt to new ways to provide their goods and services.

Tackling a very real problem like this one helped me concentrate on designing for business impact. In this case, the redesign would directly affect store revenue.

Whether it is for a collection of stores like Happy Lemon Seattle, or some sort of digital product, I hope to always keep the impact of my designs in mind and balance this with the user's experience.