RESPONSIVE WEBSITE
ELNO
ROLE
DURATION
TOOLKIT
Background
ELNO is a local tea shop located in Los Angeles, CA that sells handcrafted drinks and freshly made boba. They recently started serving desserts starting with donuts and later including small cakes. They opened up in 2023 and have been building a reputable brand. As a regular at the shop who adores their drinks, I was motivated to help expand their reach by designing a website where customers can learn more about their story. I reached out to the ELNO owners and was able to work with them closely for this project.
Problem
ELNO’s current website focuses solely on online ordering and displaying menu items, lacking features that could enhance customer engagement and increase their social presence.
Solution
Increase their visibility to potential customers searching for new boba or tea shops online by designing a responsive website that makes it easy to access additional information about the shop such as their mission and location + hours.
COMPETITOR ANALYSIS
I reviewed the websites of four well-known boba shop chains to assess their strengths and weaknesses. This evaluation offered valuable insight into common design trends and key branding elements within the industry.
02 USER INTERVIEWS
I conducted a stakeholder meeting with one of ELNO's owners to learn about their journey, business vision, and goals for the website redesign. I then interviewed 6 individuals who have purchased boba before to understand their expectations and preferences for a tea or boba shop website. Through an audit test of ELNO’s current website, they identified pain points in their user experience.
Stakeholder Goals
Build a more professional website to further grow as a business: Wants a simple yet effective interface that tells their story and provides more visibility of their community.
To continue to uphold ELNO’s core values: Sharing Vietnamese culture through a diverse selection of drinks, fostering a community-centered environment, and maintaining consistency in using high-quality ingredients for their customers.
Key Findings
Main purpose of visiting a tea shop’s website is to view the menu or hours: Prefer straightforward designs where menu is easily accessible. Appreciate detailed descriptions of menu item’s ingredients, customization options, and pricing.
Some mentioned if a shop doesn’t have a website, it lacks credibility: Although many do not actively visit a boba shop’s website, they trust a shop less if they don’t have an online presence.
Liked how current website organizes menu into sections: Needed further explanations on category titles (e.g The Delta, The Mountain, etc) and all suggested each menu item have a photo of the drink so they can make more informed choices.
Current ELNO website did not meet all the expectations: Felt that the online ordering process was straightforward and easy, but it was missing key information like an About page.
Organizing common themes into an affinity map:
Gravitate towards shop/product photos, Expects founder's story, Interested in diverse menu, Need clear category names, Seeks out customer reviews
03 USER PERSONAS
From the research, I decided to center my designs around 2 user personas who have their own distinct goals when searching for a boba spot, where one prioritizes aesthetics and the other values quality, in order to create designs that are accessible and resonate with a larger community.
04 FLOWCHARTS
Many participants prioritized finding the shop's menu to see what they offer so I mapped user flows of possible paths users take when exploring ELNO’s menu and making an online order. The goal was to create a straightforward experience that helps users easily find key information and make informed choices.
KEY
View Menu: Explore online menu to view drinks and desserts
Online Ordering: Add items to cart and make an order.
05 WIREFRAMES
I sketched and digitized multiple versions of key pages, experimenting with different layouts and style elements. Through user testing, I identified which designs were the most intuitive and visually appealing. This iterative process helped shape the high fidelity wireframes, ensuring they aligned with both user preferences and ELNO’s brand.
Creating tablet and mobile wireframes for improved responsiveness.
06 WIREFRAMES
I refined ELNO's brand identity by selecting colors and visuals that complemented the palette of their menu items. Using the style guide, I applied these elements to the wireframes, creating more cohesive and visually harmonious designs.
07 USABILITY TESTS
I conducted usability tests on the desktop wireframes with 6 individuals who have visited a boba or tea shop before as well as 2 stakeholders. The study aimed to identify potential areas of improvements in the designs.
Performed 4 Tasks
#1
Explore the Homepage
#2
Navigate to and explore the Menu page
#3
#4
Navigate to and explore About page
Key Findings
Increased trust with new branding, commenting on how the new designs felt more intentional and gave a sense that ELNO cares for its customers.
All liked the color palette, describing it as “cozy, calming, and grounding”. They liked how it matched the color of the drinks which further highlights the menu items.
Many confused on what to expect on the “Store” page with some assuming it’s a merchandise page and gave suggestions of renaming it to “Location” or “Details”.
Appreciated the photos and descriptions for each menu item as well as the explanations for the categories because it gives them a better idea of what ELNO offers. Some suggested making the alignment on the menu items to be uniformed and have some visual distinction between categories.
Enjoyed the “About” page’s design and expressed the pictures caught their attention first, enticing them to read further. Some suggestions on shortening copy because they preferred simple and brief stories.
08 ITERATIONS
These insights helped shape a more user-centered design, ensuring the app remains intuitive, informative, visually interesting and appealing for those seeking to learn more about a boba shop.
08 FINAL PROTOTYPE
I designed responsive prototypes for desktop, tablet, and mobile to ensure a seamless and similar user experience across all devices. This adaptability guarantees that ELNO’s website remains consistent, inviting, easy to navigate, and functional, whether customers are browsing on a large screen or ordering on the go.
Desktop
Tablet
Mobile
09 REFLECTION
Lessons Learned
Collaborating with a Real Client
I learned how to balance the expectations of the stakeholder while keeping the user’s needs and goals at the forefront of my design. It was essential to clearly communicate my design decisions to the owner, showing how each choice could support and help grow their business. Overall, working with ELNO was especially fulfilling because it’s a tea shop I genuinely love and frequently visit.
Being Adaptable and Resourceful
Due to the project’s time constraints and ELNO’s busy schedule, I wasn’t able to receive assets or information such as brand images of their menu items or official statements for the “About” page. To fill these gaps, I sourced images from their Instagram and Yelp reviews that best reflected their brand. I also used insights from the stakeholder meeting to write the copy for the redesign.
Next Steps
Update Assets
Use photos curated by the ELNO team. Get official statements from the owners to better represent their story.
Community Page
Design a page that showcases ELNO’s diverse community. Implement a gallery of customers enjoying drinks and their testimonials.
Add Catering
Create a Catering page where visitors can fill out and submit a form with their order information.
Check out the next Case Study!
BACK TO TOP