DreamFlour Bakery E-Commerce Adaptation

Designing a Custom Cake Ordering Experience That Feels as Personal as the Celebration

Date

2023

Role

UX/UI Designer

Overview

DreamFlour is a locally operated bakery in the Kitchener-Waterloo region specializing in custom cakes, catering, and handcrafted baked goods. After more than 20 years of serving customers primarily through phone orders and in-store visits, the business wanted to expand into franchising and introduce a more seamless online ordering experience.

The challenge was not only creating an e-commerce platform, but translating the emotional and highly personalized experience of ordering a custom cake into a digital environment.

The challenge

DreamFlour’s existing ordering process relied on:

  • Phone conversations
  • Generic inquiry forms
  • Manual back-and-forth communication

This made it difficult for customers to:

  • Clearly communicate customization preferences
  • Visualize available options
  • Understand ordering steps
  • Feel confident placing orders online

At the same time, the bakery wanted the new experience to preserve the warmth, creativity, and excitement associated with celebrations and custom cakes.

Project Goal

Design a responsive e-commerce website that:

  • Simplifies custom cake ordering
  • Reflects DreamFlour’s personality and craftsmanship
  • Creates a memorable and emotionally engaging experience
  • Supports accessibility standards (AODA)
  • Establishes a scalable digital foundation for future franchise expansion

Design Exploration & Brand Direction

One of the earliest stages of the project focused on defining a unique visual language for the website experience. Instead of jumping directly into UI production, I explored multiple creative directions to identify what emotional feeling best represented DreamFlour’s brand.

Direction One

Fresh, Playful & Celebration-Focused

The first direction focused on expressing:

  • Freshness
  • Fun
  • Celebration
  • Creativity

The concept for the logo originated from a subtle storytelling detail:
the shape of a cake being cut and eaten with a small fork.

The logotype used the initial “D” from DreamFlour, where a portion of the letter appeared to be “cut out,” creating the feeling of someone taking a bite from a piece of cake. This became a distinctive visual motif throughout the interface.

Extending the Brand Language

I amplified this shape across the UI system by incorporating it into:

  • Image frames
  • Gallery layouts
  • Section dividers
  • Decorative containers
  • Visual highlights throughout the website

This helped create a cohesive and memorable visual identity that felt playful without losing sophistication.

Color & Accessibility Testing

The primary palette included:

  • Dark navy blue
  • Cream tones
  • Soft pink
  • Rich red

To ensure accessibility compliance, I tested multiple CTA button variations in:

  • Pink
  • White
  • Red

Each variation was reviewed for:

  • Color contrast
  • Readability
  • Accessibility standards
  • Visual hierarchy across desktop and mobile experiences

Direction Two

Inspired by the Cake Box Experience

The second visual direction was inspired by a familiar emotional trigger:
the shape of a cake box.

That recognizable package instantly communicates anticipation and celebration — the feeling that something special is arriving.

Using this concept, I introduced a hexagonal structural motif throughout the interface design.

Applying the Shape System

The hexagonal form was integrated into:

  • Content containers
  • UI cards
  • Gallery compositions
  • Navigation accents
  • Layout framing systems

This direction leaned toward a more:

  • Warm
  • Friendly
  • Local
  • Handmade aesthetic

Color & Accessibility Testing

The secondary palette included:

  • Warm orange
  • Deep green
  • Dark navy
  • Multiple cream tones

Again, accessibility and color contrast testing were integrated into the design process to ensure readability and usability across all touchpoints.

Iteration & Client Feedback

After presenting both directions to the client, an important insight emerged:

While the minimal logo direction was conceptually strong, it did not emotionally resonate with the client in the way they envisioned for their bakery.

This feedback became an important turning point in the design process.

Rather than forcing the initial direction, I explored a third logo concept that leaned more directly into the emotional familiarity of baked goods and celebration culture.

Final Brand Direction

The final logo direction featured:

  • A stylized slice of cake
  • Cream frosting details
  • A cherry on top

This approach created a more:

  • Approachable
  • Friendly
  • Custom-made
  • Artisan bakery feeling

To complement the updated logo, I selected a script typeface that better reflected:

  • Warmth
  • Personality
  • Handcrafted quality

The combination of the illustrated cake mark and expressive typography helped align the visual identity more closely with the client’s vision and target audience.

UX Strategy

Beyond the visual identity, the UX strategy focused on simplifying the customization process for users.

Key UX Objectives

  • Reduce friction during ordering
  • Help users communicate customization details clearly
  • Showcase products visually
  • Build trust through transparency and testimonials
  • Create an intuitive mobile-friendly experience

Custom Ordering Experience

One of the primary UX challenges was translating highly personalized cake orders into a structured digital workflow.

Solution

A guided ordering experience was designed to help users customize:

  • Cake size
  • Flavors
  • Fillings
  • Frosting
  • Colors
  • Decorative details
  • Event information

This step-by-step flow reduced ambiguity while helping customers feel more confident throughout the process.

Accessibility Considerations

Accessibility was integrated throughout the project by following AODA guidelines.

Accessibility Features

  • Color contrast testing
  • Responsive layouts
  • Clear typography hierarchy
  • Accessible forms and labels
  • Readable spacing and sizing
  • Mobile usability optimization

Deliverables

UX/UI Deliverables

  • Responsive website design
  • Homepage UI
  • Ordering workflows
  • Catering experience pages
  • Product galleries
  • UI component system
  • Brand direction exploration
  • Accessibility testing

Reflection

This project reinforced the importance of balancing:

  • User needs
  • Business goals
  • Emotional branding
  • Accessibility
  • Client collaboration

One of the biggest lessons from this process was understanding how visual identity is not only about aesthetics or conceptual thinking — it is also about emotional resonance with both the client and the audience.

The iterative exploration process helped shape a final experience that felt both functional and deeply personal to the bakery’s brand story.