Catherine’s Bakery: Online Ordering

Project details

Catherine’s Bakery, formerly known as The Liberties Bakery, has been a beloved fixture in the heart of the Liberties, Dublin, for several years. Despite a loyal customer base, the bakery faces increasing competition and a growing demand for online purchasing. Enhancing online sales capabilities is crucial for boosting revenue and staying ahead of competitors, including emerging online sellers and those leveraging social media.

This project aims to implement a fully responsive e-commerce website for the bakery. The site will be designed and hosted on WordPress, utilising its out-of-the-box functionality.

In addition to standard bakery offerings, the website will feature a customization option for celebration cakes. Customers will be able to personalise, order and pay for celebration cakes online.

The project began in December 2016.
Website went live in April 2017.
Maintained until October 2018.

My Process

Stakeholder Interviews

“We have been running for over 30 years and feel we are being left behind. We have showcased cakes on Facebook and people have order through that however there are not able to pay there. By given the customer the option to buy online we can reach a wider audience”

“We ask for our customer to pay a deposit when ordering a cake, will this be possible online or will they have to pay the full amount up front?” Sometimes people order cakes and don’t collect or pay for them so we are out of pocket”

“We lack a system to inform customers about potential allergens in our products. This poses a risk to individuals with food allergies and non-compliance with health authority standards”

Market Research and Competitor Analysis

There are many bakeries in the greater Dublin area, as well as novelty cake makers selling directly on Facebook. However, very few offer a customizable online option with integrated payment and delivery. Most require users to call to place an order and make payment over the phone. Market research was conducted on a total of four bakeries based in Dublin and London. This provided valuable insights into the most common features found on bakery websites.

Customer surveys

As Catherine’s bakery is a long establish in the area, they have a lot of regular very friendly customers. I got the counter staff to ask 3 questions during quiet periods.

1. How far do you live from Catherine’s Bakery?
2. Have you ordered a custom cake with us in the past?
   if yes which one? and How did you find the ordering process?
   If no why not? and Where do you usually order?
3. What categories would you find helpfully?

Over a 3 days period 47 people participated in our survey. 5 agreed to do user testing later on in the process.

Key takeaways: 3 popular categories: Religious, Birthday and Novelty.

User personas

Creating user personas from a UX perspective is critical for the successful implementation of an e-commerce website for Catherine’s Bakery. Personas will provide insights into how different users interact with websites. This knowledge will aid in creating intuitive navigation and a user-friendly design that minimises friction and maximises satisfaction. When users feel understood and valued, they are more likely to become repeat customers and advocate for the brand.

User flow: buying a cake

Next I created a user flow for the process of buying a cake. It helped me streamline the purchasing process, making it intuitive and efficient. By identifying and removing potential bottlenecks, the bakery can ensure a smooth, consistent, and enjoyable journey from browsing to checkout. 

Site Map

Creating a site map was a fundamental step in developing the website. It ensures organised content, improves navigation, enhances SEO, identifies content gaps, facilitates development, supports updates, and of course improves the user experience.

Branding

I had the privilege of doing Catherine’s Bakery branding. I combined vibrant colors, elegant fonts, and a nostalgic logo to create an inviting and professional image. The use of purple adds a distinctive touch, while the clean fonts ensure readability across various platforms. The logo encapsulates the essence of home-baked quality, making it appealing to customers looking for both custom cakes and everyday bakery treats.

Sketching it out

I was given significant creative freedom during this stage, so I drafted a preliminary concept to discuss with the stakeholders before transitioning it into a digital format. This approach allowed us to align on the vision and make any necessary adjustments early in the process.

User testing wireframes:

From sketches to wireframes, we decided to include more of Catherine’s Bakery range. The bakery offers a wide variety of baked goods, which will be showcased with ingredients and allergens. The homepage features three clear categories: small cakes, breads, and special order cakes. Only the special order cakes category leads to a subcategory page, where customers customize, order and proceed to the payment page.

Objectives:
user testing was to ensure the new e-commerce website for Catherine’s Bakery met user needs and business goals effectively. Specifically, the testing aimed to:

• Assess design preferences
• Validate navigation and user flow
• Optimize Information display

Feedback:
We conducted preference testing to determine the best categories to showcase and the hierarchy on our website, balancing our business goals with what customers want to see and read. Initially, we planned to display all ingredients and allergens for health compliance. However, the comprehensive lists were deemed excessive by our testers, so we opted to show only the allergens.

High fidelity mock-ups testing

Catherine’s Bakery website features three main categories: custom cakes, small cakes, and bread. Customers can view prices and allergen information for all products. For small cakes and bread, clear messaging indicates that these items are only available for in-store purchase.

For custom cakes, detailed information about ordering, collection, and delivery is provided on all relevant pages within the online ordering flow. Customers can customize their cakes, choose a collection or delivery date, and proceed to the payment page seamlessly.

Objectives:
We conducted extensive iterative testing at this stage, including A/B testing on messaging, category titles, and images that best represented their categories.

Feedback:
In testing the main flow of ordering and customizing a cake, we found that messaging needed to be integrated throughout the flow instead of being on a separate page. Users were interrupted and distracted when looking for information about collection and delivery.

On the customization page, we noticed that customers became confused when presented with too many choices. We conducted a lot of testing around the interaction for collection and delivery, establishing that we needed different calendars for both, as delivery was only available 3 days of the week. These calendars were programmed to allow date selection five days in the future, with separate dates available for delivery.

The solution

The site emphasizes celebration cakes, organizing them into six main categories for easy navigation. Popular cakes are prominently featured and readily available for order and pay for online..

Customers can personalize their cakes by adding specific instructions, choosing from various sizes and flavors, and uploading images for edible prints. They can also request a free quote for custom novelty cakes.

In addition to custom cakes, the website highlights the bakery’s range of products, from artisan breads to sweet treats, with all allergen information listed for health authority compliance.