Lola Cupcakes

Redesigning the Online Ordering Experience

E-Commerce redesign

Role

UX Designer

Duration

3 Weeks

Challenge

Despite strong social media marketing driving traffic to the site, users were dropping off on the product page because confusing categories and a lack of visual customisation made it too hard to find and commit to the right cake.

THE BRIEF

Lola's Cupcakes sells handmade cakes online and in-store, and most of their traffic comes from people scrolling Instagram and Facebook on their phones. The marketing was working, people were landing on the site. The problem was what happened once they got there.

The product page let people customise board colour, size and add a message, but there was no way to see what the cake would actually look like. On top of that, the categories ("Posh Cakes", "Naked Cakes") didn't map to how people actually think about choosing a cake. The result: a high drop-off rate right at the point where people should have been closest to ordering.

The goal was simple to say and harder to do, make the experience as fresh, simple and fun as the cakes themselves and turn more browsers into buyers.

This was my first ever UX project, done as a 3-week design sprint with a small group of bootcamp students, working from research and a brief that was already provided to us.

DISCOVERY

We were given survey and interview data collected from current and potential customers. Going through it, one thing came up again and again: people felt overwhelmed by too many categories, and weren't confident they were choosing the right cake for what they actually needed.

To keep the user in mind through the rest of the sprint, the group built a persona based on this research.

Adam Smith, 33, software developer, London. Busy schedule, values efficiency, has a sweet tooth. Buys cakes for birthdays and celebrations a few times a year, prefers shopping online because it's faster, and cares more about quality than price when it's for someone he loves.

His pain points were the ones that mattered most for this project: Frustration with the product selection process because of confusing categories. Cakes sometimes not being available after he'd already gone through the selection process

That second point stuck with me. It's not just a UI problem, it's a trust problem, you do the work of choosing something, and then find out it's not even on offer.

To make Adam's journey concrete before jumping into solutions, the group mapped it out as a simple storyboard:

Adam realises he needs a cake for his girlfriend's birthday
He goes to Lola's Cupcakes website and starts browsing for a cake
He picks a cake
He customises the cake
He pays for the cake and puts in a delivery address
He has the cake delivered

It's a small thing, but having that journey laid out kept us focused on Adam's actual experience rather than just the screens — every wireframe decision after this came back to one of these six steps.

DEFINING THE PROBLEM

Once the research was clear, the problem came down to two things:

The categories on the site didn't reflect how people actually shop for a cake, by occasion, by dietary need, by what it's for, not by vague labels like "Posh" or "Naked".
There was no way to preview what you were actually about to order.

If we fixed those two things, the rest of the experience could stay close to what was already there.

MY FIRST SKETCH

Before any group work, I sketched my own rough version of the flow paper-style. It mapped a main page with filters, a product list, a customisation page with allergy options, sizing, a message field and a preview box, then basket, delivery, checkout, payment and a thank-you screen.

Looking back, it's interesting that the preview and the allergy/dietary options were already in that very first sketch, before we even had the research data confirming they mattered. Sometimes the instinct gets there before the evidence does.

GROUP IDEATION

As a team, we ran a proper design sprint process to get from individual ideas to one shared direction:

Crazy 8s: each of us sketched 8 rapid variations of our strongest idea in 8 minutes. Solution sketches: we each developed our best idea into more detail. Dot voting: everyone reviewed each other's sketches and placed dots next to the parts they liked, with sticky notes for any concerns. Speed critique: 2 minutes per person to talk through their solution and answer the sticky-note questions — Straw poll and supervote: each person cast their final votes, with extra "supervotes" to help the group converge on a direction

Two real directions came out of this. One teammate, Jeanny, sketched a reorganised homepage with "browse by" sections, product, occasion, flavour, design, location, plus a separate category page. Another concept, "Lola", was a chatbot that asked you a few questions (what kind of product, when you need it, delivery, dietary needs, customisation preferences) and used your answers to pre-filter the page for you.

Both had merit. The filter-based browsing direction ended up winning the vote, it matched the brief's goal of a faster, simpler self-serve experience, without adding the extra complexity of building and testing a full conversational flow inside a 3-week sprint.

WIREFRAMES

From there, the group built out the flow:

— A browse page organised by Products, Occasions, Flavours, Designs and Delivery — replacing the old confusing categories with filters that actually match how people shop — A "Choose Your Type" step with clear info up front: servings, prep time, and quick tags like Customizable, Elegant, or Themed — A Customize step split into Size, Flavors, Design and Details tabs, with a live cake preview and a running order summary so you always know what you're building and what it costs — A simple cart and review step before checkout

Payment itself wasn't part of this sprint — the scope was the browsing and customisation experience, which is where the actual drop-off was happening.

USABILITY TESTING

We tested the prototype with 5 people. 3 went through the flow successfully. 2 got stuck on the same thing: they weren't sure whether dietary options like gluten free or lactose free lived inside each category, or somewhere separate.

That was a clear, fixable signal. We pulled dietary needs out into its own filter, separate from the product categories, so it didn't depend on someone remembering to check inside each one.

A note on the testing itself, with some hindsight: a few of my task scenarios were probably a little too specific, and some of my follow up questions were closed rather than open, more "was that easy to find?" than "walk me through what you were thinking there." Both of those can nudge a participant toward the answer you're hoping for, even without meaning to. If I ran this test again, I'd write looser, more open task prompts and ask people to think out loud instead.

WHAT CHANGED:

By the end of the sprint, the redesigned product page:

- Replaced confusing categories with practical filters: size, flavour, design, occasion, dietary needs
- Added a live cake preview so people could actually see what they were customising
- Kept categories and filters consistent across the whole site, not just one page
- Showed a running price total throughout customisation, so there were no surprises at checkout

From Confusing Categories to Confident Checkout

LOOKING BACK

This was my first UX project, and it shows in places, the testing could have been more rigorous than I'd like. But the core of it holds up: we went from research, to a clear problem, to a tested solution and the fix we landed on (separating dietary needs, adding a real preview) came directly from watching real people get stuck, not from guessing.

It's also where I first felt what good UX work actually feels like, not designing a screen, but tracing a real frustration back to its source and building something that removes it.