Ever After Tearoom & Eatery
PROJECT OVERVIEW
Local Café Website Redesign
Ever After is a Taiwanese eatery based in Irvine, California, specializing in a variety of drinks, desserts, and organic, healthy dining. They also pride themselves in being very pet friendly and part of their profit goes to private homeless animal shelters. Over the course of 3 weeks, I redesigned the home page and implemented additional menu pages for easier customer navigation and ordering.
Client
Ever After Tearoom & Eatery
Role
Solo UI/UX Designer
Timeline
3 weeks (November - December 2023)
Tools
Figma, Figjam
THE PROBLEM
Lack of Accessible Information
As a customer, I found myself confused while perusing through Ever After’s website. Where was the menu? How do I contact them? What is the point of this website? The current Ever After website is not properly serving the needs for the company in terms of customer usability as I discovered through a website audit, competitive analysis, and user interviews. This is why it’s essential for a business to have a website:
THE CHALLENGE ⚡
How might we design the website so customers can easily navigate and quickly access the information they need?
MY SOLUTION
A Complete Website Overhaul
As an overview, my solution is comprised of a redesign of the homepage as well as the implementation of additional menu pages (specials, drinks, food, desserts, and dog food).
BEFORE
When hovering over the images at the bottom, the menu subcategory names appear, each linking to their respective category. This gives a succinct and comprehensive overview of their menu items.
AFTER
Item Category Hover State
Menu Categories
In order to reduce clicks and avoid redirection to an external link, I designed a specials and a standard menu as additional pages on the website. The subcategories (drinks, food, desserts, and dog food) all have individual tabs within the menu.
Item Description Pop Up
To avoid clutter on the menu, when an item is clicked, an information card pops up with further information about its ingredients. This is especially helpful to those who are attentive to healthy ingredients for themselves and for their dogs.
THE IMPACT
Creating a Cohesive and Intuitive Experience
My project focused on designing a comprehensive website for a new local business, highlighting their mission and extensive offerings. I transformed a single-page site with confusing information into a multi-page design, providing updated information for customers.
Although the design isn't set to launch, I received qualitative validation from three Ever After customers:
Now, let’s jump into the research and design process! 🔍
THE RESEARCH PROCESS
Understanding the Foundation for Redesign
Website Audit
Ever After Tearoom currently has only one page. I scrolled through the page in order to understand the information hierarchy, which features could be kept, and which features could be improved/expanded on. My client also mentioned that they wanted to keep it simple and reduce the number of images on the landing page.
Below are the major features I zoned in on during my UI audit of the homepage:
Competitive Analysis
As Ever After is based in Irvine, California, I did a competitive analysis of popular boba shops also located in the same area. I chose to focus on the websites of Cha for Tea, OMOMO, Raretea, and Sunright—making sure to note which features were user-friendly, intuitive, and met customers’ expectations.
From these websites, I found inspiration in the information architecture such as the navigation bar, the footer, the about sections, and menu item displays. Features that remained a consistency between all four competitors are on-site menus and about sections/pages. One feature that was not as present was easily accessible item descriptions. The redesign could leverage this feature to provide a more streamlined process that sets them above other competitors.
The rest of the features found on competitor websites are detailed in the chart below.
User Interviews
Initial user interviews were conducted with 3 users to gain insights on their general experience with a boba ordering process and their expectations.
Questions asked:
Can you walk me through your usual process when ordering boba online?
What do you typically look for when visiting a boba shop website?
Which features are most important to you on a boba shop website? (e.g., online ordering, location finder, promotions)
What type of content or visuals do you expect to see on a boba shop’s website? (e.g., images of drinks, customer reviews, promotions)
Does a website’s design help influence your decision to explore more or place an order? Why or why note?
Is there anything else you would like to mention about your experience with boba shop websites?
Common pain points
Sketches
My initial sketch consisted of the home page and the menu (drinks, food, dessert, and dog food menus was initially thought to be stacked). The client asked to keep the design simple, so I decided against including more in-depth pages such as careers and locations.
Before I started on my low-fidelity wireframe, I created a sitemap that would help me visualize what pages I need linked on the navigation bar.
Besides the home page, all the menu pages were going to be the same structurally. Because of the simplicity of the design, this helped me kickstart my low-fidelity wireframe.
Iterations
After the website audit, competitive analysis, and initial sketches, I created a low-fidelity wireframe that mapped out my idea of visuals, information text, and screens. Through feedback from users and peers, I re-iterated my wireframes before settling with my final hi-fidelity prototype as seen in my solution.
Home page iteration
Specials menu page iteration
Takes too long to scroll between item categories
Item descriptions look cluttered
Images seem too big for a menu
Would like a way to see that these items are the top items in the regular menu pages
Decreased scroll time with re-arranged item display
Neat and organized look
Starred categories indicating top items
Before
Before
The hours under the about section is repetitive and oddly placed
Would like to see some form of community-based trust since it’s a business
Moved hours to footer for convenience
Added testimonials from Yelp to build community trust
After
After
I conducted a usability test on 8 of Ever After’s current customers on my most recent iteration and gathered further valuable input. The interviews were conducted on Zoom and Discord in order for me to see their screen and track their interaction flow. At the end of the usability test, I use a single ease question (SEQ) to quickly measure the success of my design.
Task: Choose a drink, entrée, and dessert on the website and find the external order link.
After each user finished the task, I asked them to rate the task simplicity from 1-7 with 1 being most difficult and 7 being most easy. 7/8 of the customers rated the task a 7 while 1/8 rated it a 6. The average SEQ was a 6.875.
When asked the explain the score, the main takeaways were:
the design is simple, intuitive, and easy to follow
it was easy to see which items were the most popular
everything was where they expected it to be
the item popup is good at avoiding clutter on the menu
Usability test
What’s next?
Competitor Designs 👀
Reflections
It is important to understand the designs of competitors — especially those that represent the industry standard. These designs are familiar to users.
Design Changes 🎨
Iterations are important! It is easy to become attached to the first solution you think of, but be open minded to constant design changes.
If I had more time, I would design the mobile version for customer convenience. I would also add an additional page about Ever After’s mission to donate some of their profit to private homeless animal shelters. I believe this would resonate more deeply with customers, encouraging them to support such goals.