Online Cake Ordering Website with a Custom Cake Builder
A Figma design for an Australian pastry shop with its own bakery, featuring one-click ordering, a step-by-step cake constructor with tier sizing, and a pickup-based checkout for desktop and mobile.
| Industry: | |
| Location: | U.S.A |
| Services: |
Business type / About Project
Food & Bakery — Italian-style pastry shop with its own confectionery production, making custom and ready-made cakes (Australia)
Pasticceria Via Reggio is a pastry shop in Blacktown, New South Wales, with its own confectionery production where cakes are baked from natural ingredients and original recipes. Its range covers cupcakes, gateau, entremets, naked, continental and traditional Italian cakes, as well as children’s and wedding cakes made to order. The client wanted a website where customers could not only browse the range but order a cake online, including a fully personalised one, and then pick it up in store.
Challenges
- Presents a wide range of cakes by type and occasion in an appetising, easy-to-browse catalogue
- Separates quick orders of ready-made cakes from fully customised orders
- Lets customers build their own cake: size and number of tiers, shape, filling, finish, cream colour, decoration, inscription and printed images
- Accounts for production time, with order dates available only a set number of days in advance
- Offers a simple cart and checkout with in-store pickup, on desktop and mobile
Solution (what we did)
We designed the complete ordering experience in Figma, from the homepage to the order confirmation, for both desktop and mobile screens. The core of the project is a cake constructor that turns a complex bakery order, normally discussed by phone, into a clear sequence of visual choices.
- Designing the homepage with a hero slider of signature cakes, a tabbed “Choose your best cake” block, a promo card, brand story, social feed, a four-step “How to order” timeline and testimonials.
- Creating a catalogue with main categories (cakes, children’s, wedding, glazed, assortments), sub-type tabs, search and two ordering modes: “Order in one click” with portion selection and “Customize and order”.
- Designing the product page as a cake builder: date picker linked to production lead time, shape selection, a visual tier constructor where sizes from 8" to 14" are combined into a cake from 8 to 100 servings with a live total, filling, finish, cream colour swatches, seasonal decoration, comment field and image upload for custom prints.
- Adding dietary markers (such as egg-free) and nutritional details to product cards and pages.
- Designing a mini cart in the header with editing and quantity controls, a full cart with item details, customer information, pickup shop and date selection, and a “Thank you for the order” page.
- Adapting every page and the cake builder to mobile screens, with all components assembled into a consistent Figma system.
Impact / Result
Pasticceria Via Reggio received a design that makes ordering a custom cake as easy as buying a ready-made one. Customers can see the size of their cake in servings, choose every detail visually and pick a realistic date, while the soft pastel style and food photography present the bakery’s products as fresh and handcrafted.
The most complex part of the project was translating the bakery’s real production rules into the interface: tier combinations, serving counts, lead times and seasonal decorations. Each rule became a clear UI pattern in Figma, so the final desktop and mobile layouts are ready for development without guesswork about how the ordering logic should work.
Since the product is by weight, a function was developed for the convenience of ordering that allows users to immediately see the weight of the corresponding blanks for the convenience of orienting the final cost.
