Sugar Bliss Bakery – Mobile App Case Study
The Product:
Sugar Bliss Bakery, an imaginary bakery based in Halifax, Nova Scotia, was created solely to demonstrate my design capabilities in Figma as part of a Google UX Design Professional Certificate project. This concept showcases a user-friendly online platform designed to facilitate seamless browsing, customization, and tracking of freshly baked goods, including cakes, pastries, and gluten-free options.
My Role:
This project, completed as part of the Google UX Design Certificate, focuses on the digital needs of Halifax’s customers by streamlining the online ordering experience. The goal is to solve usability challenges so customers can easily navigate, explore the bakery’s offerings, and place orders efficiently without disrupting their busy routines.
The Goal:
The objective is to design a user-centric app for Sugar Bliss Bakery that provides a flawless browsing and ordering journey. Features like intuitive navigation, comprehensive product descriptions, and clear online payment methods will enhance customer engagement and satisfaction..
Tools:
Figma, Photoshop, Illustrator.
Disclaimer:
All names, images, and content presented here are fictional, created solely for the purpose of showcasing my design capabilities in Figma, with the assistance of AI. Sugar Bliss Bakery, along with any referenced personas, locations, or services, is entirely imaginary and intended for demonstration purposes only.
The problem
Busy professionals in Halifax face challenges when it comes to purchasing freshly baked treats from Sugar Bliss Bakery. Traditional ordering methods, like in-store visits or phone orders, can be inconvenient and time-consuming, especially during a busy day. Without a seamless digital option, it’s difficult for these customers to enjoy the bakery’s offerings in a convenient, accessible way.
The goal
The goal is to design a user-centered mobile app and website for Sugar Bliss Bakery that provide a flawless browsing and ordering experience. By incorporating features such as intuitive navigation, detailed product descriptions, easy customization options, and secure online payments, the platform aims to boost customer engagement and simplify the ordering process. The objective is to offer a convenient, accessible, and enjoyable experience that aligns with the needs and fast-paced lifestyles of busy customers.
Design process
User Research and Insights Gathering:
To kick off the project, I conducted user research through interviews and surveys, aiming to understand the specific needs and pain points of Sugar Bliss Bakery’s target audience. This research helped me pinpoint usability challenges and understand what busy customers truly value in an online ordering experience: efficient browsing, clear customization options, and reliable order tracking.
Defining User Personas and Journey Mapping:
Based on my research findings, I created user personas to represent the bakery’s primary customer segments. This helped me empathize with the users’ needs and design with a user-centered mindset. Mapping out their journeys further clarified essential touch points, ensuring that each stage of interaction aligned with their goals, such as quickly finding items or setting a preferred pickup time.
Sketching and Wireframing:
I began with rough sketches and then moved to Figma to develop low-fidelity wireframes, outlining the app’s main screens and user flow. These wireframes served as the structural foundation, with a focus on intuitive navigation that allows customers to explore the bakery’s offerings effortlessly.
Prototyping:
Once the wireframes were solid, I advanced to high-fidelity prototyping in Figma, incorporating visuals and interactive elements. Here, I applied Sugar Bliss Bakery’s branding colors and aesthetics, ensuring that the design felt inviting and aligned with the bakery’s identity. The prototype included essential features like product browsing, customization options, and checkout flows, all designed to create a seamless user experience.
Final Design and Developer Handoff:
After completing the final prototype, I prepared detailed design specifications, including a style guide, color palette, and typography guidelines. I worked closely with developers during the handoff to ensure that every aspect of the design was accurately implemented, providing assets and collaborating on any adjustments needed for a smooth launch.
Persona Summary: Olivia Mitchell
Understanding the User
As a busy marketing manager, Olivia’s tight schedule often leaves her with little time to stop by the bakery. She needs an efficient online ordering system that allows her to browse and select her favorite treats quickly. Olivia values punctuality and expects her order to be ready on time, allowing her to indulge in sweet treats without impacting her day’s productivity.
Persona Summary: Ethan Anderson
Understanding the User
Ethan, a freelance graphic designer, treasures family traditions and wants a reliable way to purchase fresh baked goods to share with his loved ones. His unpredictable work schedule makes in-store visits challenging, so he needs an easy, online ordering option to secure the treats his family enjoys. Consistency in quality and availability is crucial for Ethan, as it lets him focus on enjoying special moments with his family.
User Journey Map
The journey map for the Sugar Bliss Bakery app demonstrates how it supports both personas’ needs. From exploring delicious categories like donuts and cupcakes to quickly selecting personalized options, the app streamlines Olivia’s need for a fast, hassle-free ordering experience and Ethan’s desire for unique treats to share with family. This efficient, intuitive flow allows them to place orders for their favorite baked goods in minutes, eliminating the inconvenience of long lines and ensuring a satisfying, personalized bakery experience tailored to their busy lifestyles.
Key Features
Easy Category Navigation: Users can quickly browse through categories like Donuts, Cupcakes, Cakes, and more, making it simple to find favourite treats.
Product Customization Options: Each product offers customization, such as flavour, quantity, and dietary preferences, ensuring users get exactly what they want.
Real-Time Cart Updates: The cart updates in real-time, allowing users to review and modify their selections before checkout with ease.
Convenient Checkout with Pickup Scheduling: A streamlined checkout experience that allows users to choose their preferred pickup time, ensuring their order is freshly prepared and ready upon arrival. Simple payment options make the process quick and easy.
Order Tracking and Confirmation: An order confirmation page provides estimated pickup times, tracking details, and location information for added convenience.
Promotional Banners and Discounts: Eye-catching banners highlight ongoing promotions or discounts, encouraging users to explore new offerings and save on their purchases.
Refining the Design Process
The design process for the Sugar Bliss Bakery app began with Storyboards, capturing key user scenarios like busy individuals quickly browsing for treats or customizing orders for special occasions. This step ensured a user-focused approach and helped define the app’s goals.
Next, I created a User Flow to map out a seamless journey from browsing categories—such as donuts and cupcakes—to customizing orders and completing checkout. This flow guided the development of Paper Wireframes, which highlighted essential elements like category filters, detailed product views, and a simple checkout process.
Moving to Digital Wireframes, I refined the layout and user interface, incorporating vibrant branding elements like playful typography and bold imagery. Accessibility was a key focus, ensuring features like readable fonts and intuitive navigation worked for all users.
A Low-Fidelity Prototype tested functionality, focusing on navigation and feature placement. Feedback from this phase informed the creation of a High-Fidelity Prototype, which added vivid visuals, interactive customization tools, and polished branding. This final design delivered an engaging, user-friendly experience, blending efficiency with the charm of the Sugar Bliss Bakery brand.
Polished Experience Seamless Bakery Orders
The high-fidelity prototype for Sugar Bliss Bakery offers a refined and engaging experience, emphasizing a smooth, intuitive ordering flow tailored for busy customers looking for quality treats. This prototype simplifies the user journey, ensuring customers can easily navigate through selecting bakery categories, viewing treat options, and customizing their orders with flavours, quantities, and dietary preferences.
The design prioritizes user needs with a seamless ordering process, clear item descriptions, and customization options. Additionally, it supports easy order tracking and provides estimated pickup times, giving users a clear overview and sense of control over their orders. This attention to detail enhances user confidence, making the process enjoyable, efficient, and reflective of the high standards of Sugar Bliss Bakery.
Crafting Delight Through Color and Design: The Visual Identity of Sugar Bliss Bakery
The visual design for Sugar Bliss Bakery uses a carefully chosen color palette that captures the warmth and charm of the bakery’s brand. Each color has been thoughtfully selected to enhance user experience and reinforce the inviting, artisanal quality of Sugar Bliss.
- #D9D9D9 – “Icing Sugar”: A soft gray symbolizing powdered sugar, used for buttons indicating sold-out items. This shade creates a subtle, elegant distinction, keeping the design uncluttered.
- #959595 – “Gray Fondant”: A neutral gray akin to smooth fondant icing, providing a stable base that allows brighter colors to stand out, much like a fondant layer enhances cake decorations.
- #FFE4F0 – “Blossom Frosting”: A delicate, pastel pink inspired by natural fruit frosting, used as a background to bring a soft, welcoming atmosphere.
- #FF7DB8 – “Raspberry Jam”: A vibrant, fruity pink similar to raspberry jam, highlighting buttons and interactive elements, adding warmth and energy to the design.
- #EE2A7B – “Berry Tart”: A rich, deep pink that reflects the color of a mixed berry tart, used for icons and accent elements to introduce a joyful, playful touch.
- #674235 – “Cocoa Bean”: A deep chocolate brown used for text and logo elements, representing richness and quality, aligning with the bakery’s artisanal values.
Font Choice – Inter: The Inter font complements this color palette well, offering a clean, modern typeface that ensures readability while matching the bakery’s contemporary yet cozy aesthetic.
This color scheme and font choice work together to create a visually cohesive, inviting experience, reflecting the sweetness and craft of Sugar Bliss Bakery.
Step-by-Step User Journey: Sugar Bliss Bakery
Category Selection (Frames 1-6)
Home Screen
Welcomes users to the Sugar Bliss Bakery app, showcasing categories and key features.
Key Features: Top navigation bar with profile icon, banner for promotional offers, and main categories such as Donuts, Cupcakes, Cakes, and more.
Login Screen
Allows users to log in and access their personalized account.
Key Features: Username and password input fields, “Log In” button, and access to “My Account” page upon successful login.
My Account Screen
Displays user profile details and order history for a more personalized experience.
Key Features: User information including full name, email, address, birthday, and previous orders.
Home (Logged-In State)
The user returns to the Home screen after logging in, with promotional offers visible.
Key Features: Promotional banner and category options available for selection.
Category Selection Screen
Allows users to select product categories to start browsing.
Key Features: Category options, including Donuts, Cupcakes, and Shopping Bag icon.
Empty Shopping Bag Screen
Displays when the Shopping Bag is empty.
Key Features: Message saying “A Sweet Adventure Awaits” with a “Browse Now” button to explore products.
Product Browsing (Frames 7-12)
Donut Category Screen
Shows the menu for donuts, with an easy scroll-through option.
Key Features: Scrollable category menu at the top, “Donuts” button highlighted, and shop icon indicating active browsing.
Category Selection Screen Product Details Screen (Classic Glazed Donut)
Opens detailed view for selected product.
Key Features: Product image, name, price, ingredients, and quantity options with “Add to Cart” button.
Cupcake Category Screen
Displays cupcake options.
Key Features: Category highlighted, shopping cart icon updated, and products such as “Sparkling Citrus Surprise.”
Product Details Screen (Sparkling Citrus Surprise)
Detailed product view for the selected cupcake.
Key Features: Product image, price, description, ingredients, quantity adjustment, and “Add to Cart.”
More Product Exploration (Frames 13-18)
Special Edition Product Screen
(Red Velvet Royal)
Shows limited edition item details.
Key Features: “Limited Edition” sticker, detailed view with “Add to Cart” option.
Bread & Beyond Category Screen
Displays various bread products, such as brioche and rainbow bagels.
Key Features: Category menu with bread options, helping users browse more products.
Product Details Screen
(Cinnamon Swirl Brioche)
Shows the brioche product in detail.
Key Features: Image, price, name, and ingredients, with an option to adjust quantity and add to cart.
Shopping Bag Icon (with Items)
Indicates items in the shopping cart.
Key Features: Shows an updated icon with the number of items added to the cart.
Cart Screen
Opens the shopping cart page.
Key Features: Store location and hours, with items available for review.Bread & Beyond Category Screen
Shopping Cart (Frames 19-20)
Cart Review Screen
Allows users to review and modify cart items.
Key Features: Item details, tax, and total sections with the option to proceed to checkout.
Checkout Screen
Checkout page for entering payment and pickup details.
Key Features: Fields for pickup time and payment information, along with “Place Order” button.
Order Confirmation (Frames 21-24)
Order Processing Screen
Displays processing message after placing the order.
Key Features: Message indicating the order is being prepared.
Order Complete Screen
Shows confirmation with a map and order details.
Key Features: Map with bakery location pin, order number, and estimated wait time.
Location Screen
Provides store details such as images, hours, and contact information.
Key Features: Information about store hours and an option to call or navigate.
Order Ahead Prompt
Encourages users to order in advance.
Key Features: “Order Ahead and Skip the Line” button, redirecting users back to the Home page.
Sugar Bliss Bakery UX/UI Prototype
For the best experience, please view this prototype on a desktop. Some elements may not display optimally on smaller screens.
Takeaways from This Project
Working on the Sugar Bliss Bakery project highlighted the impact of prioritizing the user experience. By focusing on a user-centered approach, I was able to design intuitive navigation and mobile accessibility, catering to busy customers who need quick, seamless access to bakery items.
Ensuring visual consistency through a cohesive color palette and clean layout helped reinforce the brand’s charm, making the experience feel polished and inviting. The optimized checkout process allowed for customizable options like pickup time, which boosts convenience and customer satisfaction.
I also learned the importance of accessibility and engagement by integrating clear communication and an appealing design, which encourages exploration while promoting inclusivity. Finally, by designing for scalability, the app can easily grow with new features or products, ensuring future updates won’t disrupt the user experience.
Overall, this project emphasized how thoughtful, flexible, and visually appealing design can create an enjoyable and reliable app for customers.