.png){kind=small}
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
.jpg)
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
Competitors
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.
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.
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.
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.
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.
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.
.png)
.png)
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.
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.
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.
