A Sweet Affair Bakery Desktop & Mobile Redesign
Overview
The vision for A Sweet Affair Bakery’s redesign starts with the B2C checkout process on orders placed through their desktop and mobile platforms. The goal of this project was to identify usability issues, critical features, and to simplify the steps taken to order their products; with two subsidiary goals being to accurately reflect A Sweet Affair Bakery’s core values and update the visual quality of their website.
Role
UX/UI Designer
User Research
Visual Design
Interaction Design
​​​
​User Experience Mapping
User Interface Styling
​Low & High Fidelity Mockups
Iteration Design
Dates
February - March 2025
Self Guided - 4 Week Sprint
Background
“Their site doesn’t really give them much justice...”
-Anonymous Anne
A Sweet Affair Bakery and cafe has locations in Walnut Creek and Danville, CA. They are continually hailed as the premier stop for baked goods, while specializing in an "old time" style and quality products. Their renown has continually been recognized by Diablo Magazine as a local favorite and one of the "Best of the East Bay" in both 2020 and 2024. However, while this popular establishment is well known, their platform requires redesign.
I am a freelance ux/ui designer, designing a pitch package.
In preparation for this project, I completed Daniel Scott's Figma UI UX Design Essentials course on Udemy and the YouTube version of Google's UX Design Certificate course. I am the sole designer for this project and I have taken on the responsibility of designing a website that reflects A Sweet Affair Bakery's quality products, across both desktop and mobile platforms. I will be in contact with the stakeholders like the owners of A Sweet Affair Bakery to negotiate a contract. The contract will include testing and iterating on a prototype in preparation for bringing the design into development.
Some key achievements over the last few months:
-
Constructing a workflow and design process. This has helped familiarize me with Design Thinking and end to end processes necessary for ui/ux and product design.
​
-
Improved usability across platforms. Usability tests were not conducted by the stakeholders before my project began. As the sole designer, I have conducted usability tests that put users first and foremost to determine what works and does not work.
​
-
Establishing a foundational design system. Creating a set of assets including components, visual language, brand guidelines, etc. has given me the foundation necessary to take this project from ideation to development.
Research & Planning
CHALLENGE
A Sweet Affair Bakery’s key challenge: simplifying the checkout process and incorporating an online ordering system built into the site itself, rather than relying on third party systems. Additionally, at face value the website in its current form does not accurately reflect core values or quality products.
​
The solution to these challenges include eliminating redundancies, eliminating unnecessary extra steps in the ordering process, creating a new ordering system, and finally, the high fidelity mockups will accurately reflect A Sweet Affair Bakery's core values and quality products. ​
USABILITY TEST
​The empathy maps below were made from the usability tests. The tests consisted of users being instructed to place an order and respond to a series of questions related to their experience. After each test and interview, the questions would be revised before meeting with the next user. The categorized insights and results were then used to create three archetypal personas. The focus was determining user frustrations, goals, and tasks.
USABILITY TEST GOALS
-
​Understand user frustrations, goals, and needs​
-
Uncover pain points in user journey​
-
Determine whether the website accurately reflects the quality of their products and their company's core values​
-
Determine how many steps it takes to order online
INSIGHTS
& RESULTS
User Flow
-
Needs logical user flow
-
Redundancies in navigation bar
-
Order button placement
Menu Concerns
-
Picture quality
-
Items missing
-
Enticing menu
-
Cannot order off menu
-
Needs clear item description
Desired Features
-
"Order Now" system
-
Ability to order directly off menu
-
Click "+" on menu items to add to cart
Visual Quality
-
Needs visual quality improvement
-
Needs clear color and style
-
Show the bakery is family ownedD
PERSONAS BASED ON INSIGHTS & USABILITY TEST RESULTS
Design Solution
INTRO
I constructed a user flow roadmap to address a few pain points previously mentioned in, "Research and Planning." These include, "needs logical user flow", "redundancies in nav bar", and "order button placement." I addressed these issues through a few changes.
The first feature change was to delete redundancies and replace them with a singular easy to find and use, "ORDER NOW" button on each page. Second, a logical user flow was created. Third, additional redundant nav features like "gallery" were eliminated. Lastly, button placement in terms of their order of appearance on the page was organized in the roadmap.
USER FLOW
MOODBOARD
Next, I conducted a competitive analysis of Flour Bakery in Boston and Paris Baguette in the Bay Area of California. The goal was to brain storm themes and visuals. While the look and feel of my final design differs greatly, this mood board informed my work moving forward.
To fix the pain points of, "needs visual quality improvement", "needs clear color and style", and "show the bakery is family owned", I constructed a mood board which presented a a few important categories like alternative logos, fonts and colors, imagery, and advertisement styles. I chose advertisement styles because they do a great job of synthesizing tone and themes.
STYLEGUIDE
For styling, I created a design system which includes a styleguide and components. The idea was to have a useful foundation that would serve the development process and improve the pain point of visual quality.
COMPONENTS
LOW FIDELITY
WIREFRAME
To address menu concerns and the desired features list, low and high fidelity wireframe mockups were created. Through this process, A Sweet Affair Bakery's website was fully redesigned.
The menu concerns that were addressed include, "picture quality", "enticing menu", and "clear item description." In response to these, the high fidelity mockups have high resolution images for each item, delicious looking image choices, and examples of item descriptions that can be updated with stakeholders at a later date.
The three desired features that were addressed include, "an 'Order Now' system", "ability to order directly off menu", and "a '+' on menu items to add to cart." All features were added.
HIGH FIDELITY WIREFRAME
Conclusion
If I could do this project again, there are a few things I would have done differently:​​
​
-
Design a fully functional prototype to include with deliverables​
-
Meet with the stakeholders beforehand to obtain user data ​
-
Narrow the scope early on in the project to leave time for more iteration