SugarCloud

Researching existing bakery websites revealed a common pattern: many felt outdated, visually static, and lacked meaningful interaction. Product discovery often relied on long lists and basic layouts, making the browsing experience feel transactional rather than engaging. There were few opportunities to create excitement or encourage users to explore the menu before making a purchase.

The challenge was to design an experience that felt as delightful as visiting a bakery — combining a playful visual identity with an intuitive shopping journey that encourages exploration while keeping the ordering process simple and frictionless.

Technical Challenge

Beyond the user experience, I wanted the prototype to behave like a real e-commerce website rather than a collection of static screens. My goal was to create fully interactive product cards, shopping cart functionality, animations, and realistic user flows entirely within Figma.

Achieving this required an advanced prototyping approach using Figma Variables, Components, and Interactive Components to simulate dynamic interactions and state changes. While implementing these features was technically challenging, it significantly strengthened my prototyping skills and allowed me to create a more realistic and engaging user experience.

Before designing the interface, I explored how users discover and purchase desserts online to better understand their expectations, behaviors, and pain points. Through competitive analysis and user research, I identified opportunities to create a more engaging, intuitive, and visually memorable shopping experience.

User Insights

The research revealed that users value an experience that is both efficient and enjoyable. While convenience remains essential, visual presentation plays a significant role in influencing purchasing decisions.

• Fast & Effortless Ordering — Users expect a streamlined checkout process with as few steps as possible.
• Visually Appealing Experience — High-quality imagery and thoughtful presentation help build trust and increase product appeal.
• Interactive & Responsive Design — Subtle interactions and animations create a more engaging shopping experience and encourage exploration.

Competitive Analysis

A review of existing bakery websites revealed several recurring usability issues:

• Cluttered layouts that make browsing products more difficult.
• Weak visual hierarchy, making important information harder to find.
• Limited interactivity, resulting in static experiences that fail to engage users.
• Generic branding that lacks personality and emotional connection.

"Design Opportunity: Create a modern bakery experience that combines playful branding with intuitive navigation, making product discovery enjoyable while keeping the ordering process simple and efficient."

User Persona

Emily Carter — Age: 29 · Occupation: Marketing Coordinator · Location: Vancouver, BC

Emily is a busy professional who enjoys hosting small gatherings and celebrating special moments with friends and family. She frequently orders desserts online and values speed, convenience, and a seamless shopping experience.

She is naturally drawn to visually rich websites where products are beautifully presented, allowing her to browse confidently and make quick purchasing decisions. However, she becomes frustrated by cluttered interfaces, lengthy ordering processes, or websites that require her to call or email to complete an order.

"Emily represents users who expect online shopping to feel effortless, engaging, and enjoyable — from discovering products to completing their purchase."

Brand Identity

Building a strong, cohesive brand identity was the foundation of the entire design process. Every visual and interactive decision was guided by the goal of creating an experience that felt sweet, modern, and effortlessly enjoyable.

Naming the Brand

The name "SugarCloud" was chosen to evoke a sense of lightness, indulgence, and whimsy — qualities that instantly communicate the playful, premium nature of the product.

Logo Design

The logo was designed to be clean and memorable, combining a soft wordmark with a subtle visual element that reflects the brand's playful personality without overwhelming the overall aesthetic.

Visual Design

Colour Palette

The colour palette was carefully curated to balance warmth, sweetness, and sophistication:

• Blush Pink (#F4B8C1) — the primary brand colour, evoking warmth, softness, and sweetness.
• Cream White (#FFF8F0) — used for backgrounds to create a clean, airy feel.
• Deep Chocolate (#3B2A2A) — applied to text and key UI elements for contrast and elegance.
• Soft Gold (#E8C87A) — used as an accent colour for highlights and calls to action.

Typography

• Playfair Display — selected for headings to add a sense of elegance and artisan quality.
• Lato — chosen for body text and UI elements to ensure clarity and readability across all screen sizes.

Design System

A comprehensive design system was developed in Figma, including reusable components, defined spacing rules, interactive states, and a consistent icon library. This ensured visual coherence across every screen and interaction.

Interactive Prototyping

The prototype was built with Figma Smart Animate to create smooth, app-like transitions between screens. Interactive components — including product cards that expand into customization overlays, a live-updating cart, and animated confirmation states — were carefully crafted to simulate a real, fluid mobile experience.

The solution focused on transforming the traditional online bakery experience into one that feels engaging, intuitive, and emotionally connected to the brand. Rather than treating the website as a simple ordering platform, the goal was to create an experience that captures the excitement of browsing a boutique bakery while keeping the purchasing journey fast and effortless.

Research highlighted the need for clearer product discovery, stronger visual storytelling, and a more interactive shopping experience. To address these insights, the interface was designed with a clean information hierarchy, playful branding, and intuitive navigation that guides users naturally from exploring products to completing their purchase.

To further enhance realism, the prototype was built using Figma Variables, Auto Layout, and Interactive Components, enabling dynamic cart interactions, live quantity updates, and automatic price calculations. These interactions closely replicate the behavior of a functional e-commerce website, allowing the prototype to demonstrate both the visual design and the user experience of a real product.

By combining thoughtful UX principles with expressive branding and advanced prototyping, the final solution creates a seamless shopping experience that is visually memorable, easy to navigate, and enjoyable from the first interaction through checkout.

The final design delivers a playful yet polished e-commerce experience that combines engaging visuals with intuitive interactions. Every element was designed to make browsing, selecting, and purchasing cupcakes feel effortless while reinforcing SugarCloud's warm and premium brand identity.

The interface follows a clear user journey — from discovering products on the homepage to exploring the menu, managing the shopping cart, and completing checkout. Thoughtful visual hierarchy, generous spacing, and consistent calls-to-action help users navigate confidently while keeping the focus on the products.

To create a more realistic user experience, the prototype was built using Figma Variables and Interactive Components, allowing the interface to respond dynamically to user actions. Product quantities, cart totals, and shopping cart states update automatically, closely simulating the behavior of a live e-commerce website.

Key Features

• Dynamic shopping cart with real-time quantity and price updates.
• State-based cart interactions for empty and populated shopping experiences.
• A streamlined purchasing flow with minimal steps from product discovery to checkout.
• Reusable components and Auto Layout to maintain consistency and scalability throughout the interface.

The result is an interactive prototype that goes beyond static mockups, demonstrating both thoughtful UX design and advanced prototyping techniques while delivering a seamless and engaging online shopping experience.

SugarCloud Cupcakes strengthened my ability to design beyond individual screens by combining branding, UX, and interactive prototyping into one cohesive product experience. Throughout the project, I refined my skills in building scalable design systems, creating advanced Figma prototypes with Variables, and balancing visual storytelling with usability.

Most importantly, it reinforced that successful digital products are more than beautiful interfaces — they create meaningful, intuitive experiences that connect with users while supporting real business goals.