Background
O'Wow Sweets is a bakery specializing in custom cakes and pastries. It's a one-person business currently operating out of the owner's home.
The bakery has Instagram and Facebook accounts, which are used to take orders, but does not have a website. The owner asked me to create a website and refresh the branding. I worked closely with the client throughout the process.
Project type: real client, responsive web design
My role: sole designer
My process: researching, ideating, branding, prototyping, usability testing, iterating
Duration: 80 hours
The Problem
O'Wow Sweets does not have a centralized location for customers to learn about products, the company, and begin the ordering process.
Research
I conducted a client interview, moderated discovery interviews, and competitive analysis to better understand the overarching purposes of the website.
Objectives:
-
Learn about the business and understand the business goals
-
Learn about the user and understand user needs
-
Discover design patterns of bakery websites
Key Takeaways (Customer and Business Needs):
-
O’Wow Sweets offers a variety of custom products but specializes in custom cakes
-
Customers’ top reasons to visit a bakery website are to learn about the bakery and to place an order; they look for specific information, like the ordering process and product offerings
-
Customers currently begin orders by directly calling or Instagram DM
-
The business cannot yet support unlimited orders through a website; customers will need to submit an “inquiry” instead (this is common for small bakeries)
Opportunities:
-
For the customer→One stop for everything: product information, company information, and beginning the ordering process
-
For the owner→A method of collecting order inquiries will help her to stay organized
Jobs to be Done
With the discovery interviews top of mind, I created an empathy map for a typical O’Wow Sweets customer. These Jobs to be Done from the map guided me through the rest of the project:
-
When I’m evaluating a bakery website, I want to quickly see the information I need about the products to make a decision so that I’m not wasting time
-
When I’m placing an inquiry for an order, I want to understand the purpose of the inquiry form and what to expect after it’s submitted
-
When I’m placing an inquiry for an order, I want the form to be brief so that I’m not spending a lot of time filling it out
-
When I’m placing an inquiry for an order, I want the form to be flexible in case I have any special needs or requests
-
When I’m placing an inquiry for an order, I want to know that the inquiry was received so that I don’t have to worry
Design Goals
I distilled the research and Jobs to be Done into these three overarching purposes of the website:
1. To reinforce the branding
2. To communicate information about the products and company
3. To allow customers to submit an inquiry
Features and Sitemap
Analysis of bakery websites revealed common features and sections. I initially landed on these pages for O'Wow Sweets, based on its unique business needs:
Low Fidelity
There were three low-fidelity iterations of the website. These are screens from the highest iteration.
I chose 8 columns for the desktop version which would cleanly convert to 4 in the mobile version.
Homepage:
Customers have specific expectations of bakery websites so I played with tried and true layouts. I went forward with a simple design: logo at the top followed by the nav bar and CTA.
Photos and product offerings are very important to the customers, so I made sure to include some prominently before the fold.
Menu:
Information about product offerings and the ordering process are located on one page to save the customers' time. Sample photos are very important to users and are included.
Inquiry Form:
The small business cannot yet support e-commerce. Instead, customers will fill out an inquiry form to begin the ordering process. The form helps the owner stay organized by aggregating inquiries into one location and receiving important information from the customer upfront.
The form needs to simultaneously thorough and brief. It also needs to be highly flexible to acomodate a variety of user situations.
Branding: Core Values
The client’s original description of her company was: “delicious, quality, worthwhile, satisfying, and appealing.” I used these as a starting point but they needed refining.
I poured over the company’s social media profiles and noticed many fun and whimsical cakes for childrens’ birthdays. I also noticed designs which were beautiful but more classic in style. I added “memorable” to the list.
“Satisfying,” “appealing,” “and “delicious” were too similar; I chose to keep only “delicious” because above all, cake must be delicious!
The client had explained that customers sometimes grumble about prices but that she cannot compromise on the ingredients or speed at which she works because it would affect the quality of her products. I recognized “high-quality” as an important value and kept it.
Finally, I chose one word which summarizes the business: “custom.”
These are the core values I selected:
Delicious, high-quality, memorable, custom
Branding: Logo
Due to the time constraints, my initial plan was to make do with the current logo and advise the client to update it in the future:
I designed around this logo but felt limited by it and was ultimately unhappy with the resulting designs. I decided it was worth giving the logo a refresh.
I wanted to maintain brand recognition and thought the original exclamation mark (a piping bag and cupcake) was clever, so I used it and kept the primary brand color pink. I brightened the pink to make it stand out.
The original logo seemed to reflect her dessert designs for children but did not reflect her older audiences (and the audience more likely to be purchasing a product). I aligned and softened the typeface for a more professional look that should appeal to all ages. I removed the black border to modernize it.
This was a quick fix given my time constraints. I suggested that in the future she should consider hiring a graphic designer. These are wireframes from before and after updating the logo:
.png)
.png)
Branding: Color Palette and Typeface
The fun and whimsical pastels of this O’Wow Sweets cake inspired the color palette.
Typeface Roboto Slab Light is modern, professional, and a touch of fun.
.png)
Usability Testing
Participants navigated through the first prototype easily and confirmed that they learned about the company, the product offerings, and how to begin an order. The design was successful in this sense but there were areas for improvement…
There were some ways in which the prototype differed from expectations:
-
They expected that the menu page would simply list the products available and that clicking on a product would open a detail page, like a catalog.
-
They found the phrase “Order Inquiry” confusing (despite it being a common bakery phrase)
-
They wanted the product offerings visible on the order inquiry form and pointed out that a location was missing from the pickup option.
-
They wanted pricing estimates listed.
With this feedback, I continued to iterate. The changed the product offerings function more like a catalog. The order inquiry form is now more intuitive as "Request a Quote." Product offerings are included on the form. The only feedback I could not address was pricing estimates as the client requested to keep these off the website, for the time being.
Solution
The solution was a website that reinforced the branding, allowed users to learn about the products and company, and begin the ordering process.
Homepage:
-
The four most important pieces of information a customer needs are included above the fold on the homepage:
-
What the company does
-
Where they deliver
-
Contact information
-
How to begin an order
-
-
The CTA now reads “Request a Quote” which is easier to understand than the previous copy
Menu:
-
Customers can view all of the product offerings and click each to learn more, like a catalog
-
Customers are told they aren’t limited to these options
.png)
Details Page:
-
Flavor options, the most important information, are located above the fold
-
Customers are reminded that they need to request a quote to learn about pricing
-
Photos are also very important to the customers and are included below the fold
.png)
Request a Quote:
-
Customers receive key information about inquiry/ordering process and what to expect
-
The form is thorough but there are few required fields so as not to deter customers who don’t want to spend a lot of time
-
Because orders are custom, the form is flexible and allows for a variety of responses
.png)
Contact Us:
-
Customers are reminded to request a quote if they want to begin the process of placing an order
-
Contact information is easy to find
.png)
Next Steps
I met with the owner to discuss the final designs and delivered the Figma file. I made the following suggestions for a future iteration:
-
The owner’s real product photos are low-quality. The photos in the high-fidelity prototype are professional, aesthetic photos and give the owner something to aspire to. I suggested hiring a photographer to take photos which align with the new branding. In the meantime, her website will be created with the photos available.
-
Customers want prices listed. They understand that the custom nature of the bakery complicates pricing and would be happy with basic estimates (such as “starting at”). While the owner was not ready to provide this information, it will be added in the future.
Final Thoughts
A small bakery website is not a complex problem to solve so I took this as an opportunity to develop my skills in branding, writing, and working with a client.
Working with a client:
-
I discovered the value of incorporating client feedback and used it to refine my designs.
-
Inversely, I learned the importance of educating the client about user needs and advocating for the user (for example, I advocated for the need to add a phone number and basic price information).
-
My understanding of the need for clear communication was reinforced, especially when explaining the process and the scope of my work, and updating the client along the way.
Branding:
-
This project strengthened my interest in branding. I enjoyed thinking strategically to convey a specific emotion and story through visual design.
Writing:
-
I created all of the website’s content. I enjoyed developing a concise phrase which communicated the company’s value to the user.