UX/UI CASE STUDY

Sprinkles Bakery

E-Commerce UX • Local Delivery • Ordering Flow

Sprinkles Bakery is a school UX project focused on creating a warm, approachable online ordering experience for a local bakery.

The goal was to help customers browse fresh baked goods, understand delivery options, and complete an order with confidence.

Responsive Sprinkles Bakery website showcasing cupcake browsing, ordering, and branded product imagery.

Role

UX/UI Designer

Duration

School Project

Tools

Figma
Illustrator
Photoshop

Deliverables

E-Commerce Prototype
User Flow
Visual Design
Usability Testing

Overview

Sprinkles Bakery is an e-commerce concept designed for customers who want the comfort of homemade baked goods with the convenience of online ordering and local delivery.

Problem

Local bakeries often compete with large delivery platforms, but their websites may lack the clarity, trust signals, and streamlined ordering flow customers expect from modern e-commerce experiences.

Outcome

A warm, easy-to-use bakery ordering prototype that supports product discovery, delivery clarity, and a smoother checkout experience.

Process & Methodology

Research & Discovery

Sprinkles Bakery research and discovery board showing user needs, goals, pain points, opportunities, and early project insights.

I explored how customers browse bakery products online and what information they need before feeling ready to place an order.

Competitor Analysis

I reviewed bakery and food-ordering experiences to identify common patterns, usability issues, and opportunities for a more personal local bakery experience.

User Flow & Wireframes

User flow and mobile wireframes mapping the journey from browsing bakery products through checkout and order confirmation.

I mapped the ordering journey from browsing products to reviewing the cart and confirming an order, then created wireframes to test the structure.

Prototype & Testing

Sprinkles Bakery mobile prototype and usability testing board showing product selection, cart, checkout, confirmation, and user feedback.

I built a Figma prototype and used feedback to refine navigation, product details, cart clarity, and the order confirmation flow.

Key Design Insights

Freshness Builds Trust

Customers need clear signals that products are fresh, local, and made with care before committing to an online bakery order.

Simple Browsing Matters

Clear categories, product cards, and visible pricing help users quickly compare treats without feeling overwhelmed.

Delivery Clarity

Users need to understand delivery availability, timing, and order expectations before reaching checkout.

Confirmation Confidence

A clear order summary and confirmation screen reassure customers that their order was placed correctly.

Design Solutions

Product Browsing

Designed a simple product browsing experience with clear categories, product imagery, pricing, and descriptions to support quick decision-making.

Ordering Flow

Sprinkles Bakery order confirmation and checkout experience showing order details, delivery information, totals, and next-step actions.

Created a streamlined path from product selection to cart review and checkout, reducing unnecessary steps in the customer journey.

Local Delivery Experience

Local delivery interface showing available delivery windows.

Local delivery interface showing available delivery windows, delivery address, map coverage, and delivery-zone confirmation.

Added delivery-focused information to help users understand timing, availability, and what to expect after ordering.

Brand Warmth

Used a soft, nostalgic visual style to make the experience feel personal, local, and inviting.

Usability Testing Findings

Product Details Needed More Clarity

Users wanted enough product information to understand flavor, quantity, and freshness before adding an item to the cart.

Delivery Expectations Needed to Be Visible Earlier

Delivery timing and availability needed to appear before checkout so users could decide whether the service fit their needs.

Confirmation Needed Stronger Feedback

The order confirmation screen needed to clearly show what was ordered, when it would arrive, and what the customer should do next.

Recommendations / Reflection

Recommendations

Improve product detail pages with clearer descriptions, ingredient notes, serving sizes, and freshness cues.

Make delivery information visible earlier in the browsing and cart experience.

Strengthen checkout feedback with a clearer confirmation page, order summary, and next-step messaging.

Reflection

This project helped me better understand how emotional connection and usability work together in e-commerce design. A bakery website needs to feel warm and personal, but it also needs to support clear decisions, reduce uncertainty, and help customers complete an order confidently.

Business Value / Portfolio Value

Local Business Differentiation

Helps a small bakery compete with larger delivery platforms through a more personal and trustworthy online experience.

Improved Customer Confidence

Clear product information, delivery details, and order confirmation reduce uncertainty during checkout.

Stronger E-Commerce Flow

Demonstrates the ability to design a complete browsing, cart, and checkout experience.

Portfolio Strength

Shows UX research, competitor analysis, wireframing, prototyping, usability thinking, and visual design in one project.

A warm visual experience can attract customers, but a clear ordering flow is what helps them complete the journey.

— Michael Ayala

Outcome & Takeaway

The Sprinkles Bakery project strengthened my ability to connect emotional design with practical usability. By focusing on product clarity, delivery expectations, and checkout confidence, the final prototype creates a friendly bakery experience that feels both personal and easy to use.

Let’s create something meaningful together.

Let’s Connect