Client name withheld under NDA.
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.
| Metric | Month 0 |
|---|---|
| Pre-orders in the festive month | 310 |
| Mobile conversion rate (sessions to pre-order) | 1.6% |
| Mobile bounce rate | 71% |
| Mobile load time (largest content paint) | 5.4s |
| Pre-orders placed through the site form (rest by WhatsApp) | 12% |
| Average pre-order value | S$62 |
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.
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.
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.
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.
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.
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.
| Metric | Baseline | Month 3 | Change |
|---|---|---|---|
| Pre-orders in the festive month | 310 | 546 | +76% |
| Mobile conversion rate (sessions to pre-order) | 1.6% | 3.3% | +106% |
| Mobile bounce rate | 71% | 47% | -34% |
| Mobile load time (largest content paint) | 5.4s | 2.1s | -61% |
| Pre-orders placed through the site form (rest by WhatsApp) | 12% | 78% | +66 pts |
| Average pre-order value | S$62 | S$74 | +19% |
Phone testing, order mapping, tracking in place and the mobile design direction agreed with the shop team.
Mobile-first templates built, shop pages and form developed, images compressed and load time brought under 3 seconds in testing.
Site live before festive pre-orders opened, weekly tuning during the peak and a handover guide for the bakery team.
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%.
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.
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.
How we design and build websites for Singapore businesses.
Faster pages for visitors on mobile data.
Ordering flows and forms that are easy to use.
Another mobile-first redesign, this one for a local clinic.
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.