Elizabeth Tearoom
Research, design and develop a responsive website
MY ROLE: UX Designer and Front End Developer
TIMELINE: 3 Weeks
The Problem
Elizabeth Tearoom, a Western-style bakery based in Japan currently does not have an online option for providing it's customers a way to view or order it's baked goods other than through their social media platforms.
​
​
The Solution
Design a responsive website so that users may be able to view a menu, order online and choose to have items delivered or picked up.
RESEARCH
Stakeholder Interview
To learn more about Elizabeth Tearoom, an interview was conducted with the owner, Felipe Goto. He was able to give great insight on how his business developed and has grown through his social media following. Felipe also gave guidance to what he would like to see in a website design and provided some copy and images to help determine the look and feel of the site.
Google Survey
A survey was conducted to inquire about the experiences people have had with baked goods and received 30 Responses.
User Interviews
In addition to the Google Survey, user interviews were conducted to gain further insights into users online experiences with bakeries. An affinity diagram was created to help refine our results. Shown below are a few of the top insights.
User Persona
Juliana Sakae was created to better understand the Elizabeth Tearoom customer. Born and raised in London moved to Nagoya, Japan where she lives with her husband and two children. Juliana loves to try new foods and sweets, but misses the access she had to Western-style baked goods in London. While she is a stay-at-home mom, Juliana's schedule doesn't allow her the time it requires to bake them herself. Friends of hers introduced her to Elizabeth Tearoom, but finds that they only have an online presence via social media. Since Juliana isn't social media savvy, doesn't know how to place an order. She wishes they had a website in which she could place an order.
DEFINING THE PROBLEM
After refining the results from the Google survey and user interviews and having created Juliana as the user persona the problem statement was better defined.
Problem Statement
Juliana is a British expat living in Japan who misses Western-style baked goods, but doesn't have time to bake them herself due to her busy schedule. She loves Elizabeth Tearoom for its quality, taste, and nostalgia for home. However, Elizabeth Tearoom only has an online presence through social media platforms and does not have an official website to order from. Juliana is not very social media savvy, and is unsure how to place orders through those platforms.
How might we improve Elizabeth Tearoom’s online ordering process to be more streamlined so that Juliana can successfully order her bakery items with ease?
IDEATION
User Journey
Here we describe the journey of Juliana as she prepares for her parents upcoming visit and her desire to order a cake.
Competitor Analysis
Since Elizabeth Tearoom does not have a website of their own, a competitor analysis was done of other bakery sites to find how they function and what features they have that might get incorporated into the new site design.
Nana's Bakery
-
Menu items sorted by category.
-
Available for pick-up or delivery
-
Must make account to order.
​
Brigit's Bakery
-
Menu is difficult to locate
-
No option for delivery
-
Must book experience rather than just buy items.
User Flow
With Juliana's journey in mind, the user flow was defined to determine what steps she would need to take in order to order the cake she desires and minimize frustration.
PROTOTYPING
Sketches & Wireframes
With a simplified user flow to help Juliana's journey, initial sketches and wireframes were created. On the menu page, an "Add to cart" button was added so that Juliana or any other user could skip the item information page if they wanted to. This would be a great benefit for returning users.
Mid-Fidelity Wireframes
Moving into mid-fidelity by providing further details of the menu items and the addition of images started to give life to the Elizabeth Tearoom site.
Style Guide
The stakeholder provided inspiration to select the colors. He wants users, like Juliana, to experience the elegance and class that a London-style tearoom would offer, so that is why the pale pink and teal colors were chosen. Lora was selected as the font as it has different weights to provide enough contrast while maintaining a warm, inviting feel.
High Fidelity Prototype | View Mobile Prototype
The images used in the mid-fidelity were replaced with images provided by Felipe and the color palette was implemented for the high fidelity. With these changes, it is believed this will allow for users to move through the flow with ease.
USABILITY TESTING
Users were tasked with navigating and ordering a "Classic Victoria Sponge Cake"
Round One
Three users were tested and provided feedback. Some of the findings during the test revealed some pain points while navigating the tasks. The insights listed below were iterated upon during the high fidelity prototype.
Round Two
Three more users were tested in round two. Most of the feedback received after this round mainly consisted of users complimenting the use of colors, icons and imagery as they were all able to complete the tasks asked of them.
CONCLUSION
Overall, the design that was created provides a great initial solution to give Elizabeth Tearoom an online presence outside of their social media pages. If given more time some things that were discussed to add included a place for users to add reviews, a option to log-in to an account to be able to save orders and other preferences.
Additionally, interviewing additional users at the beginning and finding out more about their online shopping habits could have led to a more in-depth understanding of the features that users like or dislike about the online ordering process.
OTHER PROJECTS
Non-profit Website Redesign
