The Bubbling
Teapot
Responsive Website
Let’s get cozy! A responsive website designed to drive customers and represent the cozy and whimsical small business, The Bubbling Teapot.
In this case study:
Competitor analysis
Primary interviews
Affinity mapping
Personas
User flows and task flows
Wireframing
User testing
Role: UX researcher, UX designer, UI designer
Overview
The Bubbling Teapot, a small cafe owned by my friend, provides a comforting, warm space for patrons hoping to enjoy a cup of tea. Every element, from the furniture to the menu, was designed to enhance this experience. However, the current website could be better utilized to advertise and direct customers to the cafe. In this project I hope to design a website that has the same welcoming presence the owner has poured into every other element.
We want to learn what current and potential customers value when visiting and searching online for local food establishments to create the best customer experience while visiting The Bubbling Teapot's website.
Research
I began with a competitive analysis of other cafes and food establishments in general. I wanted to understand common practices and patterns, what elements were done well and what areas weren’t being addressed.
Photo gallery- makes explicit the feature product but also shows and answers questions like what else is offered (drinks) and what the interior looks like.
Including photographs throughout the site beyond just a menu or order online page reminds visitors of the product as they explore.
Navigation bar puts “About” first. Implies the intent of the website is to share their story. This works for this specific bakery, which has gone viral and people are invested in their story.
Menu doesn’t include photos but it includes dates of the seasonal items, name, description and price- enough information to provide clarity for visitors and answers the questions users would have when wanting to search the establishment .
Home page includes email subscription - very simple and direct, does not leave questions as to what you’re signing up for or why.
Dedicated photo page increases efficiency for users who visit the site specifically searching for examples of dishes. Posting their own photos of the dishes helps the business control the narrative about their presentation rather than leaving impressions to amateur photos in reviews.
“Menu” in navigation does not take to a single page, instead shows the drop-down of multiple menus. Navigation to the user’s relevant menu becomes more efficient. Also allows user to learn that the restaurant has more than one menu.
The menu pages are arranged based on what seems to be popularity/what they think users are more likely to visit them for. Chronologically could be another way to arrange multiple menus.
Navigation bar includes the pages commonly expected across similar establishments. “Beer is it’s own page, showing it’s significance .
Event forms all on one page, but a different one for each location. Allows users to understand each location before deciding where to host their event.
CTA has high contrast and is found quickly after a blurb to create interest. Centering the CTA and keeping the larger, more prominent text brief helps encourage exploring the site and direct toward pages the business wants.
Photos on the landing page associate with the linked pages. Improves discoverability of these pages and clarity in case labels aren’t intuitive to the user.
Menu page leads to best sellers but not a full menu; this builds excitement toward their priority items and encourages users to click “order online” but does not align with user expectations of finding a full menu.
Online ordering is broken into sections. Name, description, and photos are included in each card. Prices and other details are only visible after selecting an item. This highlights essential & consistent info while prices can vary after selections.
Store locations can be found in the footer and contact page. It’s repetitive, but creates very forgiving discoverability of the contact information.
Current experience and perception
I conducted a usability test of the original website to understand how users currently perceive the cafe if they were to discover it online, how they would approach exploring the site, and whether they can find all the basic information about the cafe.
Along with providing their first impressions of the website, test participants were asked to complete the following tasks:
Navigate to the menu
Place an online order
Look up special events
Confirm operating hours
Key insights:
Users enjoy exploring and better understanding the local businesses in their area, especially when finding a place that matches their preferences.
Users appreciate being able to know menu details, including pricing, to plan ahead and compare options before visiting.
Users had difficulty understanding the target audience and the intended ambience of The Bubbling Teapot based on the website alone.
Users experienced challenges with navigating through the website and differentiating between similarly labeled pages.
Meet the customer
To summarize and help put these research findings into perspective, I present Jessica Bell — a potential customer for the Bubbling Teapot who would be visiting the cafe’s website to ensure it’s the place for them.
Defining business and customer
With Jessica in mind, I wanted to find what a user like them had in common with the cafe. Creating a Venn diagram of their goals helped me to prioritize what to incorporate in a design that serves the business and the user.
After building out my understanding of both the business and user goals, I could map out the happy path of a user visiting The Bubbling Teapot’s website. The user flow helps visualize what key pages to develop and how people like Jessica would come across them.
Bringing it all to life
One of the biggest needs in this project was ensuring that the website’s visual identity aligned with the cafe’s branding and physical presence. People should visit the website and immediately understand the cafe will be a cozy, whimsical place.
I created a mood board to begin the process of identifying how to convey these values and build upon the existing UI elements. The mood board helped me select new colors and brainstorm visual details.
Making it crystal clear
Transitioning from the moodboard to wireframe development for The Bubbling Teapot's website redesign, my focus shifted to translating the cafe's essence into a responsive digital experience. Based on my early research, I needed to prioritize improving navigation toward essential information and clear communication of the cafe's brand values.
By curating a cohesive visual identity and strategically placing key elements, the redesign ensured that visitors, whether on desktop or mobile, would be effortlessly guided to essential information, all with an experience that reflected the warmth and charm of The Bubbling Teapot itself.
Home page
Problem: Potential cafe patrons seek an understanding of an establishment’s amenities to ensure a place aligns with their needs. Current potential customers have trouble quickly understanding the aesthetic and goals of the cafe based on the website alone.
Solution: Including photos of the products and the physical cafe on the home page immediately communicates what the business is like and creates an upfront and welcoming atmosphere. Testimonials from other customers builds trust and insight into the cozy experience that the business wants to convey.
Original website
Final design
Food and drinks menu
Problem: Customers often discover and choose to support new food establishments through online searches, emphasizing the importance of intuitive and forgiving website navigation. The menu especially needs to be easily accessible and include all the necessary information.
Solution: Adding a menu page directly to the website allows users to explore without feeling like they are committing to placing an order. Including photos and descriptions of each item increases comprehension and helps build the user’s preparedness to visit in person.
Original website
Final design
About page
Problem: We’d like to explore ways to convey the brand values of the physical space onto the website to attract customers and have them feel connected to the cafe.
Solution: Incorporating photos to the about page not only breaks up the text to make the page more visually enticing to read through, it also allows users to feel more connected to the physical space by seeing who works there, the cozy furniture and decor, and more.
Original website
Final design
Events page
Problem: Aligned with earlier statements regarding navigation of the website, users also had difficulty differentiating between the “Events” and “Calendar” pages.
Solution: I combined the pages under “Events” which users expressed was an easier to understand label. As a community space where gatherings are encouraged, I also added the event request form, so that people visiting the website could immediately know they are welcome to hold their own events.
Original website
Final design
FAQ
Problem: We need to enhance our marketing to effectively showcase the authenticity of our products and the history of the cafe, which many patrons have confusion about.
Solution: Adding an FAQ page helps to tackle questions and concerns that people familiar with the area but not the cafe regularly have. It quickly provides a bit of history and any other context that might be missed otherwise.
Original website
[No FAQ page]
Final design
Testing and refining
I conducted two rounds of testing to refine the website, alternating whether participants tested the desktop or mobile version of the site to ensure that both delivered a similar experience. The tasks mirrored the usability test conducted during the research phase, allowing me to compare how the new design tackled previously identified pain points, and where more refinement was needed.
Iteration 1:
Initial UI elements including colors were selected to reflected the original website’s design. Participants did not associate the visual identity with coziness and instead expressed that the site felt outdated.
New colors were pulled from the moodboard
Iteration 2:
Users appreciated quickly gaining context about the cafe.
Patron testimonials and links to articles were included to further advertise the appeal of the cafe and build a sense of credibility rather than long descriptive text.
Hero banner was reformatted to better utilize the retail space and allow users to see other elements of the home page
Iteration 1:
Discoverability was improved as users could easily navigate to the menu. Users expressed feeling overwhelmed while looking through the menu and had trouble understanding certain elements.
Exploring the menu is the first and most important goal a majority of users want to complete. It should stay where it is in the navigation bar.
Increased the spacing to reduce the visual weight of menu items and re-write product descriptions.
Iteration 2:
Users appreciated having all context about menu items easily accessible.
Photos were added to menu items for cases where descriptions still left users feeling unsure.
Anchor links were created to help users jump through the menu and encourage exploration.
Iteration 1:
Page layout was adjusted into a checkerboard pattern to better use the negative space to guide the eye down the page while also having a more modern-feeling format.
Iteration 2:
Participants felt the page was easy to understand and easy to navigate to. No changes were proposed for the final iteration.
Iteration 1:
Users expressed difficulty differentiating between upcoming and past events and desire to know more.
Past events are no longer relevant to users and therefore a much lower priority. Created cards and divided into separate sections to visually convey that hierarchy.
Removed calendar and added date details to cards.
Iteration 2:
Participants appreciated the hierarchy of information in the event cards. Having the event date highlighted and at the top of the card received positive reactions.
Moved past events to an “archive” to further emphasize the upcoming events.
Iteration 1:
Participants felt the page was easy to understand and easy to navigate to. No changes were proposed beyond updating the UI elements.
Iteration 2:
Participants felt the page was easy to understand and easy to navigate to. No changes were proposed for the final iteration.
What I learned
I enjoyed seeing the growth of the design through each iteration, starting from the original website and my low-fidelity mock-ups, all the way to the final.
It was at times challenging to design the cafe’s drinks menu. While I had a clear consensus of what key features participants needed to see in a menu, there were many different layouts people came to expect and that I found in my secondary research. It was challenging to ensure I went with a design that would not only have the least resistance but also enhance the user experience.
While the research did not expose anything completely unexpected, this project highlighted the importance of breaking down the fundamentals of a competitor analysis research in order to understand and predict user expectations. Users are able to identify when a design feels “off” to them, but it’s the designer’s job to break that down further and understand what need isn’t being met that is causing them to feel that way.
While thinking of the user’s needs, I had to sacrifice some design choices the client originally felt celebrated their brand values. I approached trading out something my client wanted to keep by referencing my research, which provided evidence that users were not associating values such as “comfort and coziness” with the client’s original visuals.
Next steps:
Present and hand off the website redesign so that the client can accept and implement any changes. This will also be the time to further explain the design changes made so the client can best understand it.