Digital Marketing Singapore
SEO & Lead Generation Agency
Case Study | Responsive Web Design

Responsive Web Design for a Singapore Bakery: Festive Pre-Orders Up 76%

Client Type
Neighbourhood bakery brand, 3 shops, online pre-orders for cakes and festive bakes
Services
Responsive web design, mobile-first ordering flow, speed work, photography direction
Engagement
3 months, from design to a Chinese New Year peak
Primary Result
Festive pre-orders up 76%, 310 to 546
+76%Pre-orders in the festive month, from 310 to 546
2.1sMobile load time, down from 5.4s
78%Pre-orders placed through the form, up from 12%

Client name withheld under NDA.

The Challenge

The Starting Point

A neighbourhood bakery lives on repeat customers and on two or three weeks a year when everyone wants the same thing at once. For this bakery, that was Chinese New Year: pineapple tarts, love letters, bak kwa cookies and cakes for reunion dinners. Almost all of those orders start on a phone, usually on the bus or in the queue at a hawker centre. A responsive web design that works with one thumb is not a nice extra for a business like this. It decides whether the order happens at all.

The bakery's site was a fixed-width theme from several years back. About 85% of visitors came on mobile, and they pinched and scrolled sideways to read a menu. To order, customers screenshotted the product page and sent it by WhatsApp, and a staff member typed each order into a spreadsheet. In the busy weeks, messages were missed and customers waited a day for a reply. We took the numbers below from the same festive month a year earlier, so the comparison would be fair.

MetricMonth 0
Pre-orders in the festive month310
Mobile conversion rate (sessions to pre-order)1.6%
Mobile bounce rate71%
Mobile load time (largest content paint)5.4s
Pre-orders placed through the site form (rest by WhatsApp)12%
Average pre-order valueS$62
What We Did

What We Did

Phase 1, Month 1

Mobile Audit and Ordering Map

We opened the old site on four phones and sat with the shop staff to watch real orders come in. We mapped each step from first tap to a confirmed order, counted the WhatsApp messages needed per order, and listed the questions customers asked most: pick-up date, shop location, size, flavours and cut-off times. We also set up event tracking so we could see where phone visitors dropped off.

Without a map of how orders actually happened, a redesign would only have been a new coat of paint. The audit showed that most of the friction was in the ordering steps, not the look of the pages.

Phase 2, Months 1 to 2

Mobile-First Design System

We designed for a phone screen first and scaled up to tablets and desktops. Buttons were sized for thumbs, text was large enough to read outdoors, and menus collapsed into short sections. Product pages put size, price and the next free pick-up slot above the fold. Each of the 3 shops got its own page with opening hours, a map link and a tap-to-call button.

Most visitors never saw a desktop layout, so the phone version had to be the real design. Clear shop pages also cut the daily calls asking where each outlet was and when it closed.

Phase 3, Months 2 to 3

Pre-Order Form and Checkout Flow

We replaced the screenshot habit with a short pre-order form: choose the item, pick a shop and date, add a message for the cake, pay. It saved progress if a customer switched apps, offered date pickers that blocked days when a shop was full, and sent an email and a WhatsApp confirmation. WhatsApp stayed as a back-up for custom requests. We dropped a planned live cake builder from this round to hit the launch date.

The festive period has a hard deadline. A form that blocked full dates and sent confirmations meant staff stopped retyping orders. The cake builder is a good idea, but a launch that slipped past the order window would have cost more.

Phase 4, Month 2

Speed and Photography Direction

The old pages loaded oversized photos from every shop shoot. We resized and compressed images, switched to modern formats, deferred scripts the pages did not need and cleaned up the font loading. We also briefed the bakery on a simple photo routine: one clean top-down shot and one hand-held shot for each product, taken in window light.

On a mobile connection, every extra second costs orders. Bright, honest photos sold bakes better than long descriptions, and they were cheap for the team to keep up after we left.

Phase 5, Month 3

Launch, Peak Season and Tuning

We launched before festive pre-orders opened and watched the first orders come in with the team on standby. Each week we reviewed where phone visitors stopped, fixed two confusing labels, moved the date picker higher on the page and added a clear last-order notice for each shop. After the peak, we wrote a short handover guide for updating menus and slots.

The first days of a peak season show problems that testing never finds. Small fixes made while orders were flowing paid back at once, and the guide let the bakery run the site without us the following season.

The Results

The Results

By the festive peak in Month 3, the bakery was taking 546 pre-orders in the month, up from 310 in the same month a year earlier. Mobile conversion rose from 1.6% to 3.3% and mobile bounce rate fell from 71% to 47%. Mobile load time dropped from 5.4 seconds to 2.1 seconds, and 78% of pre-orders now came through the form instead of 12%. Average pre-order value rose from S$62 to S$74, as the form made it easy to add a box of cookies to a cake order.

MetricBaselineMonth 3Change
Pre-orders in the festive month310546+76%
Mobile conversion rate (sessions to pre-order)1.6%3.3%+106%
Mobile bounce rate71%47%-34%
Mobile load time (largest content paint)5.4s2.1s-61%
Pre-orders placed through the site form (rest by WhatsApp)12%78%+66 pts
Average pre-order valueS$62S$74+19%
Month 1
Audit and Plan

Phone testing, order mapping, tracking in place and the mobile design direction agreed with the shop team.

Month 2
Design and Build

Mobile-first templates built, shop pages and form developed, images compressed and load time brought under 3 seconds in testing.

Month 3
Launch and Peak

Site live before festive pre-orders opened, weekly tuning during the peak and a handover guide for the bakery team.

Key Takeaways

What We Learned

Design for the screen your customers actually hold

With 85% of visitors on phones, the mobile page was the website. A layout built for desktop and then shrunk meant bounce rate stayed at 71%. Starting with the phone and scaling up is how it fell to 47%.

Replace the workaround, but keep a back-up

Screenshots and WhatsApp worked for the owner but cost staff hours and caused missed orders. A form that blocked full dates and sent confirmations moved 78% of pre-orders onto the site. WhatsApp stayed for custom requests, so loyal customers were not forced to change habits.

Finish before the peak, not after

The festive season does not move for a launch date. We cut the cake builder to launch on time and still lifted pre-orders from 310 to 546. A smaller site that is live and tested beats a bigger one that arrives after the orders are gone.

FAQ

Frequently Asked Questions

For a small bakery with a few shops, plan on about three months from first audit to launch and the first busy period. The build itself takes around two months. We work back from your festive dates so the site is live before pre-orders open.
Most bakeries keep it for custom cakes and special requests. In this project, 78% of orders moved to the form and the rest stayed on WhatsApp. The form handles the standard items and staff have time for the custom ones.
Customers often order from a phone on mobile data, and a slow page loses them before they see a product. Cutting load time from 5.4 seconds to 2.1 seconds lowered bounce rate and helped more visitors reach the form.
Yes, if the ordering flow is built for it. This form blocked dates when a shop was full and showed a last-order notice per shop. Capacity rules like these are set with your kitchen team before launch.

Want Results Like This for Your Bakery?

Tell us about your shops and your busiest season. We will review your site on a phone and show you where orders are being lost.