The redesign of Sweet Bun Bakery, a local Tampa business in urgent need of assistance, focuses on creating a user-friendly website to showcase their extensive range of baked goods, pastries, and specialty cakes.
Sweet Bun Bakery
Role
Tools
Duration
UX Researcher, UX/UI Designer
Figma, Todoist
8 weeks
OVERVIEW
Product
Sweet Bun Bakery, a family-owned establishment, specializes in crafting traditional Chinese pastries, custom cakes, and freshly baked goods—all prepared in-house. Nestled in the heart of the community, Sweet Bun is a quaint bakery catering to locals and holds the distinction of being the sole Asian bakery in town. The website is plagued by glitches, inefficiencies, and a lack of an online ordering feature, making navigating and placing orders a challenging experience for visitors.
Problem
Sweet Bun Bakery, a family-owned establishment, specializes in crafting traditional Chinese pastries, custom cakes, and freshly baked goods—all prepared in-house. Nestled in the heart of the community, Sweet Bun is a quaint bakery catering to locals and holds the distinction of being the sole Asian bakery in town. The website is plagued by glitches, inefficiencies, and a lack of an online ordering feature, making navigating and placing orders a challenging experience for visitors.
Goals:
Enhanced User-Friendliness:
Create a user-friendly website that is easy to navigate, especially for individuals who may not be familiar with web navigation or have limited literacy, including non-English speakers.
Improved Accessibility:
Ensure the website is accessible to a diverse audience, including the elderly, non-English speakers, and those with varying levels of digital literacy.
Clear Presentation of Custom Cakes:
Provide a clear and organized display of custom cakes on the website, including labeled pictures or names to assist customers in differentiating between the various cake options.
Efficient Ordering Process:
Streamline the online ordering process, making it efficient and straightforward for customers to place orders for custom cakes, pastries, and baked goods.
Mobile Responsiveness:
Ensure that the website is mobile-friendly, as a significant number of users may access the site through their smartphones.
Integration of Online Payment Options:
Enhance the online payment process, potentially integrating secure online payment options for customers who prefer digital transactions.
By addressing these goals, the redesigned Sweet Bun Bakery website aims to create a more inclusive, efficient, and engaging online experience for its diverse customer base.
Sweet Bun Bakery Existing Website
This reflects the current state/layout of the website. The next step entails researching its usability and user-friendliness, uncovering any flaws to inform a more user-centric redesign
Overview
For my user interviews, I had my participants do some usability testing on the existing website to determine what was working and what wasn’t for the users. My chosen participants were either customers visiting the bakery that day or employees of the establishments.
Research
User Interview & Website Auditing
8 participants - participants were asked to look up Sweet Buns Bakery located in Tampa, FL and to provide feedback as they navigate the website freely
6 women, 2 men → (6 of the 8 have visited Sweet bun bakery previously)
3 in 20s; 4 in 30s; 1 in 60’s
Most were able to easily locate the business, via google.
First Impressions
Visual errors were everywhere such as double logo placement, misalignment of the photos.
Glitches throughout the website
All the animations were distracting and makes it difficult to see.
Pictures of the cake and baked goods were aesthetically pleasing.
Buttons that did not do as stated
All stated that placing an order was easy, they were all capable of calling the business for info, however it was an inconvenience.
Website lacks any info on cake sizes and prices. Must call in for info, which they find the prices to be inconsistent.
TARGET AUDIENCE
Families
Dessert lovers
Local residents, specifically of Asian descent
Celebrations and Event Planners
Food Enthusiasts
Beneficial features
Clear CTA’s
Links
Ability to make online orders
Clarifications of the different cakes for phone call orders
Info - size, prices
Interview Takeaways
The site needs to better represent the company’s brand
The site navigation needs to be more intuitive for users.
Online orders is a priority
Both costumers and employees had difficulty navigating through the site due to glitches and delay loading time.
All users favored the theme, aesthetic and brand of the company.
The site looks unorganized due to all the misalignment and placements of the pictures and baked goods info.
Ideate
Brainstorming ideas
Using insights from user interviews and competitor analysis, I utilized this information as a foundation to brainstorm and identify strategies to redesign the website for improved user-friendliness.
Ideate
The Mood Board
The owners of Sweet Bun Bakery wanted to maintain the site's original theme, characterized by bright, feminine, and playful elements. They preferred color schemes of pink and blue that are welcoming and engaging. Keeping this vision in mind, I crafted a mood board to visualize their concept.
PROTOTYPE
Entering the prototype stage, my focus was on developing a straightforward ordering system for Sweet Bun Bakery's specialty and custom cake services. Additionally, I aimed to enhance the website's organization to effectively showcase all the products they offer.
Low-Fidelity Wireframe Sketches
Low-Mid Fidelity Wireframes
High-Fidelity Wireframe
Testing & Iterating
Prototype
Low-Fidelity Wireframe Sketches
Beginning with some sketches, I aimed to retain the overall structure of the original design while enhancing its organization and cleanliness for a simpler feel. The current website appears cluttered, with uneven images and misalignment. Being a bakery, there are numerous photos of baked goods, pastries, and cakes. Therefore, my main priority is to showcase their products without overwhelming users with an abundance of heavy images everywhere.
Prototype
Low-Mid Fidelity Wireframe
I transformed some of my sketches into digital wireframes. I deliberated extensively on whether to include product information or to keep it simple and focus solely on displaying the products. Upon considering the ingredients and details for the products, the design seemed too cluttered and overwhelming. As a result, I chose to just showcase the pictures.
Additionally, when designing the online cake ordering feature, I aimed to keep it straightforward and simple. This is because the majority of Sweet Bun Bakery's customers are either older or not as tech-savvy.
Prototype
High Fidelity Wireframe
The three main pages i focused on are:
Landing page. The landing page of a website is crucial because it serves as the first impression for visitors, setting the tone and expectations for their experience. It plays a pivotal role in capturing attention, conveying the brand's message, and guiding users towards desired actions, ultimately influencing their decision to stay and explore further or leave the site.
Cake order page. Main added feature, making it essential for businesses to meet customer expectations, streamline sales processes, and expand their reach to a broader audience.
Cake customization, which allow users to personalized or custom order a cake of their preference.
Testing & Iterating
To evaluate the usability of my designs, I conducted thorough usability tests and gathered feedback from the same participants I initially interviewed.
Participants:
Female - Mid 60s (Local Sweet Buns consumer)
Female - 30s (Local Sweet Buns consumer)
Female - 30s (non-local)
Male - 30s (non-local)
Male and female - 20-30s (Sweet Bun Bakery employee)
Participants were tasked with navigating the prototype through three specific assignments
Task 1: Check out Menu
Explore the website to discover the full range of offerings available. Take a look at the menu to browse through the selection of pastries and cakes offered by Sweet Buns Bakery
Your task is to navigate to the website and tell me what kind of products and services they offer.
Follow-up Questions:
How easy did this task feel to you?
Did you find anything that made the experience difficult or challenging?
What were some features that you found helpful?
What were some features that you found to be dissatisfied with?
Do you have any input that could elevate the experience?
Research Goal: The user successfully found the variety of bakery items offered by Sweet Buns without encountering any difficulties.
Task 2: Place an order
Proceed to order a custom specialty cake and complete the process by reaching the checkout page.
Your task is to look through the cake options, and placed a cake order for Birthday cake 10.
Follow-up Questions:
How easy did this task feel to you?
Did you find anything that made the experience difficult or challenging?
What were some features that you found helpful?
What were some features that you found to be dissatisfied with?
Do you have any input that could elevate the experience?
Research Goal: The user successfully selected a custom cake, personalized it according to their preferences, provided their personal information, and selected a pickup time.
Task 3: Navigate freely
Explore the prototype at will and assess its effectiveness in delivering information and details about the business.
Your task is to navigate throughout the entire website.
Follow-up Questions:
How easy did this task feel to you?
Did you favor the UI and looks and theme of the website?
What did you like and dislike about the website aesthetically?
Did you find anything that made the experience difficult or challenging?
What were some features that you found helpful?
What were some features that you found to be dissatisfied with?
Do you have any input that could elevate the experience?
How likely are you to pay Sweet Buns Bakery a visit?
Research Goal: The user comprehended the business concept and its motto, navigating the website efficiently and comfortably with minimal confusion or errors.
Final overall summary:
After conducting usability testing, a significant amount of feedback was collected, encompassing both positive and negative aspects. A prevalent pattern emerged within the feedback that will greatly aid in the iterative process of website redesign. Certain features will undergo redesign to enhance user-friendliness, while others will either remain unchanged or receive slight adjustments.
Positive Feedback:
Aesthetically pleasing
Easy to read and see
Pictures are captivating
Organization is clean and simple
Negative Feedback:
Hover is unfavorable
Pictures are too large
Unable to exit pictures
Confusing between custom cakes and specialty cakes
Need name of cakes clarifications
