This detailed Case Study demonstrates how we applied our Strategic Product Design Process to design a web experience for Panacea Bakehouse, a concept delivery-only bakery. Starting from an ambiguous brief, we implemented various research and testing methods to inform our decision-making process. We defined the value proposition for our target users and took it as a basis for determining the product requirements while conciliating user needs and business goals.
Capstone Project
UI/UX Design Specialization
Sector
Food Services
Year
2020
Disciplines
Strategic Research Inf. Architecture User Experience User Interface
State
UI in development
Overview
The Challenge
Design a web platform for a delivery-only food service that allows users to customize and place orders.
The Outcome
A responsive web experience for a delivery-only bakery that serves people with special dietary needs in the Waterloo Region, Ontario.
Opportunity Discovery
Trend Hunting
Sources: Forbes, Business Indisder, FoodBev Magazine.
Market Research
Share of consumers who follow speciality diets in Canada as of February 2019
In a 2019 survey conducted among 1017 adult Canadians, over 20% reported to have a special diet preference. Source: Statista.com
Insights: – Food products targeted at Special Diet groups in Canada have a potential market share of up to 20%. – According to Allied Market Research, the Vegan Food market will have an annual growth rate of 10.5% worldwide until 2026. – People normally follow a special diet because of one of these main reasons:
Market Definition
We set the Waterloo Region as the target service area due to its growing multicultural population. Two world-class universities and a thriving technology pole keep attracting international talent to the region. Contrasting with the Great Toronto Area, where vegan bakeries have flourished into a competitive market, the diet-specific bakery options in Waterloo Region are very limited.
We hence defined our Target Market as ‘Consumers with specific Dietary Preferences that look for suitable bakery options in the Waterloo Region and surroundings’.
Competitor Analysis
Opportunity 1: Although some competitors accommodate gluten-free, halal or kosher needs, none of them market themselves as being specialists in dietary preferences. We see an opportunity to brand Panacea as the first dietary-preference specialist in the region.
Opportunity 2: Canadians with special diet preferences related to intolerances or allergies represent almost 7% of the population, compared to 1.6% related to culture or religion (Statista 2019). We see an opportunity to respond to this under-served market by offering options for other dietary preferences related to health, allergies and intolerances.
User Interviews
We approached five potential users with specific diet preferences in the waterloo region in order to build an understanding of their experiences, expectations, wishes and frustrations when ordering food, especially desserts.
Problems Detected:
1 – Reduced number of choices. 2 – Lack of delivery options. It is time-consuming to go and pick it up. 3 – Often the special-diet alternatives are pricier than the regular versions. 4 – Difficulty to find providers that both, customize and deliver special-diet bakery items. 5 – Having to plan days in advance to order a cake. 6 – Not having enough and clear information about ingredients and allergenic contents. 7 – Opting to bake at home due to limited offer, high prices or lack of trust in the ingredients and processes.
Design Problem Definition
How might we create a customization and delivery service that offers a greater variety of bakery options to consumers with specific dietary preferences in the Waterloo Region? How might we communicate expertise in dietary preferences, quality and affordability to our customers? How might we foster customers’ trust in the quality of our products and the reliability of our ingredients and processes?
Value Proposition
Customer Segmentation
Apart from customers that would order baked desserts as direct consumers, we identified three more categories of potential users:
1 – Direct Consumer– Buy for themselves.
2 – Present Giver– Buy for someone else, a friend or relative.
3 – Event Planner– Buy for attendees to their events.
4 – Food Business Owner– B2B relation. Buy to offer to their own clients.
User Personas
Specific Value Propositions
Product Definition
Our product is a web platform that makes suitable desserts accessible to people with special diet preferences in Waterloo Region. The platform provides order and delivery service that also aims at helping their family and friends, event planners and food-business owners to offer them suitable desserts.
Features
We integrated all the previous research into a set of user needs and business goals to be fulfilled in order for the web platform to provide value to both the customers and the company.
The platform should allow users to:
Choose between Express or Scheduled Delivery options.
Customize their order based on their diet preferences.
Feel assured that the desserts are 100% suitable for their diet preferences.
Find guidance for users unfamiliar with dietary restrictions.
Get comprehensive information about ingredients and processes.
Find out if the restaurant delivers to their area.
Clearly understand the whole process from selection to delivery.
Find product prices and delivery fees.
Customize a greeting card if desired.
Edit, cancel and track their orders.
Save their dietary preferences or create recurrent orders.
Access their purchase history when logged in.
Provide feedback and issue complaints.
The platform should allow the business to:
Brand themselves as specialists in baking for dietary preferences.
Differentiate from competitors by offering alternatives for a wider range of dietary preferences.
Provide the information users need during their search and purchase experience.
Earn customers’ trust by communicating expertise, responsibility and respect about dietary preferences.
Keep an automated inventory and booking calendar.
Reduce the number of calls and requests for information.
Build a database of potential clients through the implementation of lead generation strategies.
Display a section of good reviews and customer testimonials to build up reputation and trust.
Product Requirements
Content Requirements:
Delivery information: area, fees, hours and minimum order.
Curated imagery of products and processes.
Product prices, ingredients and allergy notices.
Cancellation policy.
Explanation of the purchase & delivery process.
Information about the company.
Information about processes and ingredients.
Diet restrictions guide for the non-expert.
FAQ section.
Contact information.
Functionality Requirements:
Delivery type selector.
Filter-enabled product browsing system.
Shopping cart.
Checkout system.
Account creation and login system.
Newsletter subscription form.
Feedback and reviews form.
Product Development
Information Architecture
I.A. Usability Test
We used an online testing tool to assess the usability of our early Information Architecture. This tool simulates a navigation menu and lets the users click around to find the content they need. Testing users were asked to perform a series of six tasks.
1 – Suppose you are using the service for the first time. You want to find out if the cake shop can deliver to your area. Where would you find that information?
2 – Imagine you are a customer with a strong allergy to peanuts. Before ordering, you want to determine if the cakes on the website are safe for you to consume. Where would you look for that information?
3 – Suppose you are a customer with diabetes so you want to order a sugar-free cake. Where would you set your dietary preferences?
4 – Imagine you want to send a surprise cake to your friend. You know that he follows a specific diet because of his religion, so you feel a bit unsure about what cake would be appropriate. Where would you find guidance about what type of cake will be suitable for your friend?
5 – Suppose that you placed an order on the website two days ago. Now, you want to make a change in your order before the grace period ends. Where would you go on the website to edit your order?
6 – Imagine that you had some problems with your order. You want to give some feedback to the company to help them improve their service. Where on the website would you find the option to provide your feedback?
Success results by task
Tasks 2, 3 and 4 were the ones with a higher failure incidence. Those three tasks were related to finding information about ingredients and diet preferences. We realized this A.I. created confusion among the users because all these pieces of information were scattered in different areas of the site. We restructured the Information Architecture to centralize that type of information under a single menu option.
Wireframes
We implemented the revised Information Architecture into a low-fidelity prototype to test the first iterations of the Web Experience. Watch the video:
UI Design
We integrated the UX insights into high-fidelity screens of the order experience process.
Homepage
Due to the large number of variables involved in dietary preferences, we designed the service to offer only plant-based and alcohol-free desserts. This umbrella covers most religious concerns, some allergies and intolerances, hence reducing the system’s complexity.
Choosing Delivery Type
Express Order shows only on-stock products that can be delivered immediately. Scheduled Order shows the full product catalogue and products are prepared on-demand.
Applying More Filters
Users can filter the product catalogue. They will be presented only with dessert options that match their selection for delivery type, diet criteria, and dessert categories.
Users can add or delete filters on-the-fly and the results update in real-time. They can also select a product to see its details or add it directly to their shopping basket.
Product Details
The product details include a summary of dietary suitability and a full list of ingredients.
Shopping Basket
Users can edit their orders and verify the dietary suitability of the selected items before proceeding to checkout.
Greeting Card
Users are given the option to customize a greeting card to be delivered with the desserts.
Order Confirmation
Once the order has been submitted, the users get a confirmation message. Their order number and receipt is automatically sent to the e-mail address they have provided at checkout.
Clickable Prototype
We created a clickable high-fidelity prototype of the ordering experience. Try it below: