Bakery Website Creation

A pastel-toned e-commerce redesign that transformed a beloved Miami bakery from Instagram DMs into a seamless, story-driven online ordering experience.

Role

Product Designer

Industry

Food & Beverage

Duration

1 month

a cellphone leaning against a wall
a cellphone leaning against a wall
a cellphone leaning against a wall

Introduction

TEAM: Owner, Chef, UX Designer + Researcher + Frontend

Cutler Bay, Miami — a bakery known for its creamy tres leches and pastel confections had a problem. Despite loyal local customers, orders were flooding through Instagram DMs — confusing, untracked, and easily lost in threads.

When I joined Tres Tres Tres Leches as the UX Designer and Front-End Developer, my goal was simple: to turn that chaos into clarity — to design a digital storefront that felt as sweet and intuitive as the desserts themselves.

Context

Tres Tres Tres Leches isn't just a bakery. It was a community fixture — handmade cookies and tres leches, late-night pickups, artisanal flavors.
But the business was hitting its ceiling:

  • Too many manual orders.

  • Too many missed inquiries.

  • Too many customers unsure of pricing or flavors.

Everything relied on one person — the owner — managing hundreds of messages daily.

We needed a website that could streamline ordering, clarify offerings, and amplify the brand’s warmth online.

“People were ready to order — they just couldn’t figure out how.

Defining the Problem

The issues were as layered as a tres leches cake itself:

  1. Inefficient Order Management – All sales happened through Instagram DMs, which meant lost requests and manual tracking.

  2. Customer Confusion – No single menu, no visible prices, no allergy or ingredient details.

  3. Limited Online Presence – With no SEO or formal website, discovery was limited to social media followers.

Behind every problem was the same barrier: the lack of a cohesive, digital home.

The Objective

Design a site that was both functional and emotionally resonant —
a space that invited curiosity while streamlining the checkout experience.

The goal was to:

  • Make ordering effortless

  • Showcase the bakery’s story visually

  • Reflect a warm, handcrafted brand identity

Research

The first step was immersion.
I spent time with the owner, watched how customers placed orders, and ran surveys with twelve returning clients.

Key Findings

What emerged was a pattern — people don’t just buy desserts, they buy delight.
The new website had to make that delight clickable.

Stakeholder Insight

The bakery’s owner had a clear vision:
She wanted her brand to feel personal and alive — not like a corporate e-commerce store.

Their dream site would:

  • Highlight new product “drops”

  • Share stories behind flavors

  • Make customers feel connected, not converted

Our design had to respect that humanity while introducing the efficiency of modern UX.

User Personas

Marie — A social foodie who loves finding new spots in Miami.
She wants high-quality photos, an easy checkout, and something Instagrammable. But take into note,

Marie can be anybody. A family looking for a new dessert, a couple surprising each other, even you or me.

Paul — An event planner needing reliability for bulk orders.
He cares about trust, clarity, and seamless communication.

Both personas reminded me that design isn’t just about looks — it’s about predictability and emotion.

Competitive Research

I analyzed modern dessert brands like Night Owl Cookies and boutique bakeries like Southern Sugar.
What stood out was how they used imagery as interaction — customers understood flavor through photography, not text.

By blending that aesthetic clarity with artisanal warmth, I could translate the bakery’s physical experience into digital form.

Design Process

The process began with wireframes and messy sketches.

The first version tried to solve everything — allergies, seasonal menus, custom cake forms — all on one page.
It looked impressive, but it felt noisy.

“I realized the website suffered from the same issue as the kitchen — too many ingredients fighting for attention.”

So I stripped it back.
Each revision removed distractions until only the essentials remained: flavor, price, and emotion.

When I ran into my second dilemma…The order flow.

I wondered what would be the ideal way for a customer to traverse through the order flow while keeping the stakeholder's goals in mind. I created a chart in Figjam to help me weigh the pros and cons.

Creating a userflow is ESSENTIAL to aiding in these dilemmas.

My Final Wireframe

Prototypes

Once the structure was defined, I built responsive prototypes in Figma for both desktop and mobile.
The bakery’s audience was primarily mobile-first, so I prioritized thumb navigation, visible CTAs, and faster loading.

Features like “quick order,” “flavor gallery,” and “allergy-friendly icons” gave customers instant clarity.
Ordering became a guided experience, not a guessing game.

SEO and Structure

Beyond aesthetics, I focused on content hierarchy and discoverability.
The website was structured around SEO-informed keywords, clean metadata, and descriptive alt tags for every product photo. This not only improved accessibility but also ensured organic discovery through search engines.

The Result

In one month, the site transitioned from DMs to direct digital orders.

  • 11 out of 12 returning customers preferred the new experience.

  • 6 new customers placed first-time orders directly through the site.

  • The bakery’s social engagement increased due to seamless links between Instagram posts and the ordering page.

Customers described the website as “fun,” “simple,” and “so much easier than before.”

Reflection

Working on Tres Tres Tres Leches reminded me of a line from The Bear
the chef realizing that good design, like good food, often comes from subtraction, not addition.

“You take everything out — until what’s left finally tastes like the truth.”

That became my mantra for this project.
I learned that digital transformation doesn’t always mean complexity.
Sometimes, it’s about clarity — about making the technology disappear so the product can speak.

Takeaways

  • Research is the foundation of clarity.

  • Design psychology shapes delight.

  • Every product, no matter how small, deserves structure.

  • Subtraction isn’t loss — it’s refinement.

“Good design, like a good dessert, leaves no aftertaste — just satisfaction.”

Introduction

TEAM: Owner, Chef, UX Designer + Researcher + Frontend

Cutler Bay, Miami — a bakery known for its creamy tres leches and pastel confections had a problem. Despite loyal local customers, orders were flooding through Instagram DMs — confusing, untracked, and easily lost in threads.

When I joined Tres Tres Tres Leches as the UX Designer and Front-End Developer, my goal was simple: to turn that chaos into clarity — to design a digital storefront that felt as sweet and intuitive as the desserts themselves.

Context

Tres Tres Tres Leches isn't just a bakery. It was a community fixture — handmade cookies and tres leches, late-night pickups, artisanal flavors.
But the business was hitting its ceiling:

  • Too many manual orders.

  • Too many missed inquiries.

  • Too many customers unsure of pricing or flavors.

Everything relied on one person — the owner — managing hundreds of messages daily.

We needed a website that could streamline ordering, clarify offerings, and amplify the brand’s warmth online.

“People were ready to order — they just couldn’t figure out how.

Defining the Problem

The issues were as layered as a tres leches cake itself:

  1. Inefficient Order Management – All sales happened through Instagram DMs, which meant lost requests and manual tracking.

  2. Customer Confusion – No single menu, no visible prices, no allergy or ingredient details.

  3. Limited Online Presence – With no SEO or formal website, discovery was limited to social media followers.

Behind every problem was the same barrier: the lack of a cohesive, digital home.

The Objective

Design a site that was both functional and emotionally resonant —
a space that invited curiosity while streamlining the checkout experience.

The goal was to:

  • Make ordering effortless

  • Showcase the bakery’s story visually

  • Reflect a warm, handcrafted brand identity

Research

The first step was immersion.
I spent time with the owner, watched how customers placed orders, and ran surveys with twelve returning clients.

Key Findings

What emerged was a pattern — people don’t just buy desserts, they buy delight.
The new website had to make that delight clickable.

Stakeholder Insight

The bakery’s owner had a clear vision:
She wanted her brand to feel personal and alive — not like a corporate e-commerce store.

Their dream site would:

  • Highlight new product “drops”

  • Share stories behind flavors

  • Make customers feel connected, not converted

Our design had to respect that humanity while introducing the efficiency of modern UX.

User Personas

Marie — A social foodie who loves finding new spots in Miami.
She wants high-quality photos, an easy checkout, and something Instagrammable. But take into note,

Marie can be anybody. A family looking for a new dessert, a couple surprising each other, even you or me.

Paul — An event planner needing reliability for bulk orders.
He cares about trust, clarity, and seamless communication.

Both personas reminded me that design isn’t just about looks — it’s about predictability and emotion.

Competitive Research

I analyzed modern dessert brands like Night Owl Cookies and boutique bakeries like Southern Sugar.
What stood out was how they used imagery as interaction — customers understood flavor through photography, not text.

By blending that aesthetic clarity with artisanal warmth, I could translate the bakery’s physical experience into digital form.

Design Process

The process began with wireframes and messy sketches.

The first version tried to solve everything — allergies, seasonal menus, custom cake forms — all on one page.
It looked impressive, but it felt noisy.

“I realized the website suffered from the same issue as the kitchen — too many ingredients fighting for attention.”

So I stripped it back.
Each revision removed distractions until only the essentials remained: flavor, price, and emotion.

When I ran into my second dilemma…The order flow.

I wondered what would be the ideal way for a customer to traverse through the order flow while keeping the stakeholder's goals in mind. I created a chart in Figjam to help me weigh the pros and cons.

Creating a userflow is ESSENTIAL to aiding in these dilemmas.

My Final Wireframe

Prototypes

Once the structure was defined, I built responsive prototypes in Figma for both desktop and mobile.
The bakery’s audience was primarily mobile-first, so I prioritized thumb navigation, visible CTAs, and faster loading.

Features like “quick order,” “flavor gallery,” and “allergy-friendly icons” gave customers instant clarity.
Ordering became a guided experience, not a guessing game.

SEO and Structure

Beyond aesthetics, I focused on content hierarchy and discoverability.
The website was structured around SEO-informed keywords, clean metadata, and descriptive alt tags for every product photo. This not only improved accessibility but also ensured organic discovery through search engines.

The Result

In one month, the site transitioned from DMs to direct digital orders.

  • 11 out of 12 returning customers preferred the new experience.

  • 6 new customers placed first-time orders directly through the site.

  • The bakery’s social engagement increased due to seamless links between Instagram posts and the ordering page.

Customers described the website as “fun,” “simple,” and “so much easier than before.”

Reflection

Working on Tres Tres Tres Leches reminded me of a line from The Bear
the chef realizing that good design, like good food, often comes from subtraction, not addition.

“You take everything out — until what’s left finally tastes like the truth.”

That became my mantra for this project.
I learned that digital transformation doesn’t always mean complexity.
Sometimes, it’s about clarity — about making the technology disappear so the product can speak.

Takeaways

  • Research is the foundation of clarity.

  • Design psychology shapes delight.

  • Every product, no matter how small, deserves structure.

  • Subtraction isn’t loss — it’s refinement.

“Good design, like a good dessert, leaves no aftertaste — just satisfaction.”

Other projects

Alexandra Smith

Linkedin

Medium

Resume

Alexandra Smith

Linkedin

Medium

Resume

Alexandra Smith

Linkedin

Medium

Resume