Project MNZO

How we established business positioning, branding, and built a seamless online experience for a bakery.

TIMELINE

Jun. 2020 – Present

PLATFORM

Web (desktop and mobile)

MY ROLE

Business Strategist, Researcher, Product Designer, Visual Designer

TEAM

Solo project

ARTIFACTS

Brand identity, persona, competitive analysis, mental models, user journey maps, flows (task, user, wire), design system, mock ups, e-commerce website

Introduction

A new beginning.

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.

Key Problems

PROBLEM #1

Lack of business positioning and branding

Themes: Secondary research, branding

PROBLEM #2

Lack of standardized process for ordering cakes

Themes: Generative research, UX design

Solution Overview

1. Brand identity

I developed a brand identity which felt authentic, friendly, and modern by using a combination of playful fonts, vibrant colours, and lively illustrations.

2. E-commerce website

I designed and built an e-commerce website for our primary customer base to order pre-designed cakes.

3. Custom cake builder

I designed a MVP (desktop and mobile) for our secondary customer base to order custom designed cakes.

PROBLEM #1: LACK OF BUSINESS POSITIONING AND BRANDING

How might we position and brand ourselves as a cake bakery within the Greater Toronto Area? 

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.

RESEARCH QUESTION

Who are our target customers and where are they shopping?

RESEARCH METHODS
  • Conducted a survey with people who purchase cake within Toronto (88 respondents)
  • Facilitated a discussion thread (16 respondents)

Generative research

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.

RESEARCH QUESTION

Who are our competitors and what are they offering?

RESEARCH METHODS
  • Conducted a competitive analysis of 14 (50% Asian-styled, 50% European-styled) Toronto-based specialized cake bakeries

*Companies with a weak online presence (e.g. no website, social media, or Google reviews) were not observed.

Competitive analysis

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.

Diving deeper into the competitive landscape

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.

RESEARCH QUESTION

How can we create a brand that stands out from our competitors?

RESEARCH METHODS
  • Review existing landscape of branding (competitors and industry)
  • Create mood board
  • Sketch lots and lots

Reviewing the existing branding landscape

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.

Brand personality

Authentic

Friendly

Modern

Explorations

Brand identity

SOLUTION TO PROBLEM #1

How might we position and brand ourselves as a cake bakery within the Greater Toronto Area?

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.

PROBLEM #2: NO STANDARDIZED PROCESS FOR ORDERING CAKES

How might we create a transparent and quick way for customers to order cakes to reduce dependencies on one-on-one cake consultations?

Current process

Simple & complex cakes all demand a one-on-one consultation

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.

RESEARCH QUESTION

How and why do our target customers shop for cakes?

RESEARCH METHODS
  • Conducted a survey with people who purchase cake within Toronto (88 respondents)
  • Facilitated a discussion thread (16 respondents)
  • Observed customers who ordered with a photo-first approach (16 customers orders)
  • Observed customers who selected from a book of pre-designed themed cakes (business context)

Research synthesis

Analyzing Jobs-to-be-Done through affinity mapping

Information is derived from results from the survey, discussion thread, and messaging conversations.

Key research findings

People shop at a variety of bakeries such as grocery stores, specialty cake bakeries, ice cream shops, restaurants, or independent bakers due to convenience factors or the diverse needs of different occasions.

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.

Mapping the customer journey

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.

Factoring in business needs

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.

Translating the customer journey to task flows

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.

I analyzed products that were feasible for the business to streamline along with shared patterns in customer journey flows to discover...

REFRAMING PROBLEM #2

How might we create a transparent and quick way for customers to order cakes to reduce dependencies on one-on-one cake consultations?

2A. How might we design an experience for customers to order pre-designed cakes while offering some flexibility in cake design and flavour?

2B. How might we create a fully custom cake ordering experience to improve cost transparency for customers and reduce dependencies on one-on-one cake consultations?

Scope: Problem 2A

      Goals

      • Prioritize this experience on the e-commerce website as this is the bakery's largest customer base
      • Launch an e-commerce website

          Constraints

          • Lack of time and web development resources means the final website design largely depends offerings by the e-commerce hosting platform (Shopify)

          Scope: Problem 2B

              Goals

              • Experiment with the design of this experience
              • Test a MVP of this experience

                  Constraints

                  • Lack of time and web development resources means the final website design largely depends offerings by the e-commerce hosting platform (Shopify)
                  • Lack of research resources to test the experience with its target audience
                  • Need to depend on a third-party form builder to create the MVP of this design experience
                  • Lack of web development resources to integrate highly custom forms within a pre-existing e-commerce website

                  In the context of this case study, we will focus on exploring problem 2B.

                  Key insights from customers who order fully custom cakes

                  ❗️ 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

                  SWOT analysis on the competitive landscape

                  I compared 6 order forms/builders for custom cake ordering to understand their strengths, weaknesses, opportunities, and threats.

                  Key design explorations

                  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.

                  Exploration: Navigation

                  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.

                  ⭐️ Final Design
                  🚫 Design Alternative
                    • Hover nav overwhelms users by showing information they aren’t seeking
                    • Cover important information that the user is seeking
                    • Force users to hover through a destined path
                    • Requires users to recall other sections by memory
                      ✅ Design Decision
                      • Static nav eliminates the need for all navigation bar items to have a drop down list
                      • Doesn't constrict users to hover through a destined path
                      • Highlights section of current page and anchors users in where they are on the site

                        Exploration: Scheduling a pickup time

                        "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.

                        ⭐️ Final Design
                        🚫 Design Alternative
                        • Overwhelms customers with too much information
                            ✅ Design Decision
                            • Eliminates clutter and presents a clear actionable task for customers

                              Exploration: Comparing prices

                              ❗️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?

                              ⭐️ Final Design
                              🚫 Design Alternative
                              • Highlighting recommended cake sizes disrupts the natural order of cake sizes and may hinder customers from processing information
                                  ✅ Design Decision
                                  • Eliminates clutter and presents a clear actionable task for customers

                                    Exploration: Attaching a photo reference

                                    ❗️ 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.

                                    ⭐️ Final Design
                                    🚫 Design Alternative
                                    • Limits the customer's ability to articulate their needs to only a single photo reference
                                    • Limits cake designers understanding of customer's vision
                                        ✅ Design Decision
                                        • Allows customers to better articulate their creative vision
                                        • Acts as a mood board for cake designers to better understand the customer's vision

                                          Exploration: "Submit Order" vs "Add to Cart"

                                          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.

                                          ⭐️ Final Design
                                          🚫 Design Alternative
                                          • "Add to Cart" allows customers to instantly check out and place custom orders without any latencies caused by consultations
                                              ✅ Design Decision
                                              • "Submit Order" gives control back to the business by allowing them to reject orders that exceed the skill calibre of available cake designers

                                                Exploration: Sequence of questions

                                                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.

                                                ✅ Design Decision

                                                🚫 Design Alternative

                                                • This user flow eliminated more complex cake designs (e.g. unique shapes) as an option so customers could directly take their order through the checkout process.

                                                Information architecture

                                                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".

                                                Creating a design system

                                                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.

                                                Web accessibility

                                                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.

                                                Button colours and CTAs

                                                I included strong and bold shades of the primary branding colour to ensure that text and background colours would maintain a notable contrast.

                                                Touch targets

                                                Ensuring that key touch targets would be a minimum of 44pt x 44pt, as recommended by Apple's Human Interface Guidelines.

                                                Iconography and accompanying text

                                                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.

                                                SOLUTION TO PROBLEM #2

                                                How might we create a transparent and quick way for customers to order cakes to reduce dependencies on one-on-one cake consultations?

                                                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

                                                2A) Ordering a pre-designed cake

                                                2B) Ordering a custom designed cake

                                                Next steps

                                                • Launch off 🚀! I am currently in the midst of preparing materials (photography, marketing materials, renos...) for the launch of design 1) Ordering a pre-designed cake on the Shopify e-commerce platform.
                                                • Testing a MVP design of 2) Ordering a custom designed cake using a form builder (e.g. Typeform, Google Forms) to check the logic of the form and to find any areas for improvement.

                                                Learnings

                                                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:

                                                1. It's okay to pivot

                                                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.

                                                  2. Research should be purposeful

                                                  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.

                                                    3. Design for the business and the customers

                                                    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.

                                                      4. Understand your technical constraints

                                                      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!