Role
Solo UI/UX Designer
Timeline
3 weeks
November - December 2023
Tools
Figma, Figjam
PROJECT OVERVIEW
Local Café Website Redesign
Ever After is a Taiwanese eatery located in Irvine, CA, known for its organic meals, specialty drinks, and pet-friendly atmosphere, with proceeds supporting homeless animal shelters.
Over 3 weeks, I redesigned the home page and implemented menu pages to improve navigation and the ordering process.
Ever After Tearoom & Eatery
THE PROBLEM
Difficulty Finding Key Information
As a customer, I found myself confused while perusing through Ever After’s website. There was only a single home page with general information about the eatery. 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 product teardown, competitive analysis, and user interviews.
To understand the foundation of the problem, it’s essential for a business to have a website because it…
Provides the most updated and accurate information
Builds trust, credibility, and presence
Helps with online discoverability and SEO
THE CHALLENGE
⚡
How might we design the website so customers can easily navigate and quickly access the information they need?
MY SOLUTION
Revamping the Website for Clarity and Usability
As an overview, my solution is comprised of a redesign of the home page as well as the implementation of additional menu pages (specials, drinks, entrées, desserts, and dog food).
Transformed Home Page
One part of my entire redesign solution is to rework the home page so that it gives off a friendly feeling and provides easy-to-access general information about the eatery. The main components of this page is the mission statement, a preview to Ever After's offerings, and customer testimonials. The address, contact information, social media, and hours are located in the footer.
Ever After's Home Page
Implementation of Menu Items
One major feature that Ever After's original website lacked was their list of menu item offerings — instead, they had one button that had an external link, leading customers off the official website. In my redesign, I added extra navigational pages to include drink, food, dessert, and dog food menus for the convenience of customers who may want to view up-to-date selections.
Menu offerings with subcategories
Item Description Pop-up
To avoid clutter on the menu, when an item is clicked, a 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.
Strawberry Matcha Pop-up
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 yet set to launch, I received qualitative validation from three Ever After customers:
"The aesthetics are appealing and feels very cohesive and put together."
-User A
"The links to the full menu on the Specials page are convenient and the scale of everything is visually appealing."
-User B
"I like that the site is very easy to navigate and the pop-ups don't clutter the screen with more information."
-User C
THE DESIGN PROCESS
🎨
Now, let's jump into the design process!
RESEARCH
Product Teardown
To identify areas for improvement, I conducted a product teardown of the initial website to understand the structure, visuals, and usability challenges.
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 in competitor designs 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
To better understand how regular and new customers engage with eatery/boba shop websites, I conducted 3 semi-structured interviews. The goal was to uncover expectations, frustrations, and opportunities for improving usability and communication on Ever Afters’s website.
3 Boba Shop Customers
…shared how they explore boba shop websites, what makes them trust a shop enough to order, and how visuals and clarity shape their impression of the brand.
Key Findings🔎
From my competitive analysis and user interviews, three core themes consistently emerged:
1.
Confusion Stops Conversion
Users find it frustrating and discouraging to order from a restaurant’s website when there is a lack of clear images, descriptions, and prices.
2.
Unpolished Sites Impact Bounce Rates
A poorly designed website (e.g., unattractive visuals, typos, or hard-to-navigate layouts) can deter users from placing order or exploring the menu further.
3.
Friction with Ordering is Discouraging
It is frustrating when online ordering systems are hard to locate, confusing, or involve extra fees. Clear and easy-to-find ordering options are critical.
IDEATION
Sketches
Based on my product teardown, competitive analysis, and user interviews, I sketched several ideas that became the foundation of the first mockups. With these sketches, I was able to visualize the layout and brainstorm interaction ideas. 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.
BUILDING AND TESTING
Design Iterations
The 2 major design decisions were informed by usability testing and constant feedback from customers and peers.
Home Page
Before
Users found the original website (single home page) to feel cluttered, didn't know where to look first
Reported not sure whether to trust the business based on its website
Didn't realize Ever After donated to private homeless animal shelters
After
Highlighted Ever After's mission statement as the business's core value to align with customers' with the same sentiments
Added customer testimonials from Yelp to build community trust
Moved opening hours as well other important general information to footer for convenience
Specials Menu Page
Before
After
Users reported that it took too long to scroll between each item category
The item descriptions look too cluttered and the images seemed too big for a menu
Decreased scroll time with rearranged item display and item description moved to pop-up
Implemented starred categories that indicate special/favorite items
Decreased the size of interface elements for easier readability of more items
REFLECTIONS
Competitor Designs as Inspirations 👀
I learned that it's important to understand the designs of competitors — especially those that represent the industry standard. These designs are familiar to users and understanding their user flows will help my designs feel comfortable and intuitive.
Always be Open to Design Changes ⚖️
Iterations are important! It is easy to become attached to the first solution you think of, especially within a familiar problem scope, but be open-minded to constant design changes.
WHAT'S NEXT?
Evolving the Ever After Experience
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 through Ever After.
Made with love and lots of nova lox bagels (๑•ᴗ•๑)
Design is better together — let's connect! 🤝
Resume