How we established business positioning, branding, and built a seamless online experience for a bakery.
Jun. 2020 – Present
Web (desktop and mobile)
Business Strategist, Researcher, Product Designer, Visual Designer
Brand identity, persona, competitive analysis, mental models, user journey maps, flows (task, user, wire), design system, mock ups, e-commerce website
For over 13 years, my family’s bakery supplied Asian-styled cakes to other restaurants as their main line of business. But when COVID-19 restrictions were enforced, the impact on the restaurants we supplied were devastating. Over the course of a week, we lost our entire business. We had to find a way to offer our products back to customers.
We needed to bring our business online, but we had a few problems to solve before we could.
Themes: Secondary research, branding
Themes: Generative research, UX design
I developed a brand identity which felt authentic, friendly, and modern by using a combination of playful fonts, vibrant colours, and lively illustrations.
I designed and built an e-commerce website for our primary customer base to order pre-designed cakes.
I designed a MVP (desktop and mobile) for our secondary customer base to order custom designed cakes.
This section investigates problem #1 by breaking it down into three smaller research questions. Each research question helped me better understand how to position and brand the business.
To begin, I needed to know who our key demographic was. Next, I sought to understand what products our competitors were offering. Lastly, I compared branding across the competitive landscape to understand how to design a distinguishable brand.
I began by surveying a Toronto-based forum regarding their cake consumption behaviours. This provided me a contextualized understanding into the market we were entering. For problem #1, I describe the high-level demographic overview of our target customers. Later, I provide a detailed look into different customer behaviours I discovered in problem #2.
I learned that our target customers primarily enjoyed Asian-flavoured cakes, but shopped at a variety of bakeries, including Asian-styled and European-styled bakeries.
*Companies with a weak online presence (e.g. no website, social media, or Google reviews) were not observed.
To understand what types of products our customers bought, I compared bakeries mentioned in our research as well as other bakeries with a strong online presence.
Using Google Sheets to compare product offerings, prices, and serving sizes.
I learned that both Asian-styled and European-styled bakeries fell into difference price categories and convenience levels.
To leverage the bakery's existing knowledge and assets in making Asian-styled cakes, I decided to pursue this market. I further explored this market niche by analyzing 7 bakeries specializing in Asian-styled cakes.
I discovered the most popular cake sizes were 6-inch and 8-inch and then compared the price ranges amongst Asian-styled cake bakeries in 2020. The prices of 6” cakes ranged between $32–55 with the median price of $40. The prices of 8” cakes ranged between $35–85 with the median price of $54.
Next, I analyzed the most widely offered flavours at 14 specialized cake bakeries. I ranked the most popular flavours at Asian-styled bakeries and European-styled bakeries. This exercise gave us an idea of what classic must-haves we needed in our product line.
This research provided insight into how bakeries varied in price depending on their product offerings. As a result, we were able to decide where we wanted to position ourselves along the price continuum.
I took a look at the branding of twelve different cake bakeries with a prominent online presence with customers in Toronto. The goal of this exercise was to look for any colour or logo patterns associated with the industry and to ensure I was creating a unique yet fitting brand.
We aim to position ourselves as an Asian-styled cake bakery offering mid-tier pricing, creative designs, and high quality ingredients. Our solution was a brand identity which felt authentic, friendly, and modern by using a combination of playful fonts, vibrant colours, and lively illustrations.
While our bakery was primarily B2B prior to the COVID-19 pandemic, we occasionally received cake orders directly from customers. Since this wasn't our main business, the individual cake ordering process was never fully ironed out. We often quoted prices based what we thought was fair and then had to scratch our heads again when the next order came around. Customers didn't know what flavours we offered. Customers didn't know what designs we could do. These conversations all accumulated to a lot of time spent for both the business and the customers.
Image shows cake ordering conversations based off of cake orders from 16 unique customers.
In order create a better cake ordering process, we needed to first understand our target customers better. In this section, I investigate different mental models and how their cake ordering experiences may differ.
Information is derived from results from the survey, discussion thread, and messaging conversations.
We realized that customers who shop at different bakeries were all the same people. Their choice of bakery varied depending on their mental models (behaviours) for different occasions. After synthesizing the jobs-to-be-done, I affinity mapped different jobs-to-be-done to find three key behaviour segments and their subsegments.
To further build our understanding of these mental models, I created customer journey maps for each. The goal was to understand their goals, actions, pain points, and touch points along their journey to ordering a cake and how they differed across the mental models. We wanted to see which opportunities to seize at each stage.
Through this exercise, I was able to understand the increasing importance of creating an omnichannel experience for e-commerce as customers often begin their journey on social media. Businesses could no longer rely solely on their business being found through search engine results. It also allowed me to explore the order and pickup process in the context of strict COVID-19 restrictions.
Using Google Sheets to quickly map and easily organize customer journeys.
There are three key paths that can lead prospective customers to discover our bakery and our website. However, this case study will only investigate the journey after the customer has landed on the website.
Each mental model has a specific type of cake they want to order. How could the business tailor to each mental model? Which mental models had a stronger business case than others? Which mental models should we not serve right now... or ever?
To understand how these customer wants align with business needs, I mapped the mental models to a scale measuring the different degrees of cake design complexity. This presented a clear view of which degrees of cake design complexity could be produced efficiently and which required further research.
Cake design complexity was used as a metric instead of flavour complexity due to feedback from the business owners that production of different flavours do not vary significantly in comparison to cake designs. Taste seekers were exempt from this exercise as they do not prioritize cake design.
I mapped out the task flows of how customers may navigate the website from landing on the homepage to checking out. I noticed a lot of similarities in the tasks between Convenience Seekers, and Inspiration-seeking Cake Visionaries. Their tasks mostly differed depending on whether they wanted some design personalization (e.g. message, colours, etc.) or none at all.
Customers who wanted to design a cake from scratch (Inspired Cake Visionaries) had a different task flow altogether. At this stage, I was still uncertain about pursuing them as a customer. There wasn't a ceiling to their creativity and more complex designs could take days to complete.
❗️ Customers want to price compare different cake sizes and designs
❗️ Customers want to pick a cake size that feeds their serving size
❗️ Some customers have an idea of their cake design and want to show photo references
I compared 6 order forms/builders for custom cake ordering to understand their strengths, weaknesses, opportunities, and threats.
At this stage, I began my design explorations by sketching the homepage experience as it was the starting point for all the mental models. Sketching by hand helped me get started and forget about making things look pixel perfect. After I got warmed up, I moved to working on Figma to ideate more quickly.
I began with navigation explorations which involved looking at a lot of existing patterns used by other e-commerce sites. I also conducted card sorting exercises (discussed later) to inform the IA.
"What is the first piece of information we need from customers in a cake ordering process?"
I found that the most important interaction was for customers to know if their cake order could be fulfilled for their preferred pickup date. This feature automatically checks if the date is viable so customers don't need to do the mental math. To eliminate potential frustrations, customers did not need to go further down the process if their preferred pickup date was not available. In this scenario, there is also an opportunity to redirect customers to other product options with faster turnarounds.
❗️Customers want to price compare different cake sizes and designs
❗️Customers want to pick a cake size that feeds their serving size
To increase transparency into custom cake prices, customers can compare starting prices between different cake shapes, number of cake tiers, and different cake serving sizes. I've also broken this process down into three steps where customers can 1) Choose a cake shape, 2) Choose # of cake tiers, and 3) Select cake size within chosen shape and # of cake tiers.
An interesting aspect to test here is the copy of how the price is shown. How would customers perceive seeing a full price vs seeing "From" as a precursor to the price?
❗️ Some customers have an idea of their cake design and want to show photo references
Customers tend to inquire about custom orders by sending photos of cakes with designs they want. But the question was, how many photos should we allow customers to send? Initially, I assumed one photo would provide a clear single direction for cake designers rather than multiple visions. However, further research into how customers inquire about orders showed that they typically show 1–3 photos references.
This was a key exploration to answering, "How might we reduce dependencies on one-on-one consultations?" My goal was for customers to be able to instantly check out a custom cake order without a consultation. However, I ultimately decided that a request to order before purchase may be a better route for the business. The key reason being that cake designers have limitations in their skillsets and cannot accept every custom order, so enabling order requests give power back to the business to reject certain orders. Regardless, the process still relieves and leverages pressures on consultations as most of the upfront work would already be completed in the form.
What information did we need to collect? Which questions should be asked? How could we limit the number of questions shown but still gain enough information to provide an instant quote? I looked at multiple different ways to ask better questions and ultimately arrived at two user flows. The key factor in our design decision was the flexibility to allow more complex designs, the ability for the business to reject any requests, and the opportunity for the business to build stronger relationships through collaboration.
This flow requires further testing to fully understand its advantages and shortcomings.
To develop a main navigation, we needed to first categorize our key products. To do this, we needed to understand how customers categorize cakes. I conducted hybrid card sorting exercises with five different people by asking them to group and label 33 different cake images on Figma. Next, I grouped all the similar categories from their categories.
20 unique categories were formed but only 3 of those categories were used by more than 80% of the participants. These categories were: 1) Classic Cakes, 2) Custom Cakes, 3) Designer Cakes.
"Custom Cakes" and "Designer Cakes" seem to have some cross overs, but my assumption is that custom cakes may connote fully custom cakes.
To take this to the next step, I would conduct tree testing using these categories as well as test my assumption on the perception of "Custom Cakes" vs "Designer Cakes".
Before creating the mockups, I created a design system to ensure consistency in branding and component styles. This also allowed me to think more deeply about interaction design at the atomic level.
I began by leveraging the components that were used in my wireflows and ensured their styles were consistent with each other. I also observed existing interaction design patterns to inform my design system.
I began thinking about accessibility when I started laying out the foundations of my design system. What colours should I use? How large should my text be? What size should touch targets be? This section outlines some of the ways I designed for visual web accessibility in this project.
Accessibility is important to me when I design, and I am still learning more each day. This project currently only considers visual accessibility, but I know there is room for more people to consider. I hope to reflect that in future iterations of this project as well.
I included strong and bold shades of the primary branding colour to ensure that text and background colours would maintain a notable contrast.
Ensuring that key touch targets would be a minimum of 44pt x 44pt, as recommended by Apple's Human Interface Guidelines.
To ensure we did not solely rely on colours for visual cues, I created components with icons and accompanying text for interactions such as success and error states.
In solving for problem #2, two key experience pathways were designed for web desktop and mobile. The first is an experience ordering a pre-designed cake within an e-commerce shop. The second (focus of this case study) is an experience ordering a custom designed cake through a form within the e-commerce site.
If you're curious about any aspects of this project, I'd be happy to chat over a call.
2A) Ordering a pre-designed cake
2B) Ordering a custom designed cake
This has been one of the most rewarding projects I've ever worked on and will continue to be as I take it towards its next steps! I have learned a lot about working independently, small business needs, and how to overcome challenges alone. Here are some nuggets of wisdom I've gained:
At the heart of it, I needed to pivot an entire business and launch a bakery with my family, but we were just a small a team of three. This meant things were messy. Timelines weren't met. We had to pivot often. I had to pivot often in my designs as well, and that's okay because it's for the better.
With limited energy and time, everything I did had to help the project move towards the next step. The purpose behind each research method became clearer with each question I had. When you're on a constant search for answers, the opportunity to use mixed methods becomes more apparent as well.
Designing for my own family's business grounded me in reality. It became clear to me when certain design ideas may simply just be ideas. It also planted a deep desire to understand my customers better so I could serve them better.
I made the mistake of diving in head first without considering this. It could have saved me a lot of time upfront. I was scared to face the reality of these constraints, but scoping them out first would have been ideal and could've allowed me to be more resourceful. Lesson taken for the future!