DESIGN A CAKE
DESIGN A CAKE
Web Flow Design
Embedded Files
My objective was to design a web flow to order a cake online.
In foundational research, users said they had ordered cake from websites to save a trip to the store but they didn’t like the lack of options, back-and-forth emails and the uncertainty: Would the final product match what they had in mind and saw online?
Project Duration: July 2021
Role: Lead UX Designer, UX Researcher, UX Writer and UI Designer.
Tools Used: Adobe XD, Google Sheets, Google Forms, paper
The Problem
The Problem
Users need a quick way to order cake online because they didn't have time to order in person or to spend on writing back-and-forth emails.
The Solution
The Solution
To create an online experience that would give people more variety and ordering options as well as an easy way to order cake online and reassurance that the final product would meet the vision in their heads.
The Impact
The Impact
Users said the ordering process, which allowed them to build their own cake, made them want more cake. The online web flow that allows people to buy and order cake online is expected to increase the average baker's cake sales by 30 percent. More customers will be captured because they can order immediately and don't have to wait for someone to return their email if all they want is a simple cake.
The Research
The Research
After selecting a focus for the project, I started gathering information on potential users. I surveyed and interviewed people who order cakes online and in person.
I created empathy maps for each subject and identified pain points. I then compiled those empathy maps into two main empathy maps for distinct user groups. These empathy maps were the foundation for my persona creation. I also created user stories and user journey maps which I consulted when brainstorming solutions and sketching designs.
I also developed problem statements, hypotheses statements and value propositions. I then conducted a competitive audit of the online ordering process of direct and indirect competitors to see what they had to offer. What could I copy and what could I do better. I found several opportunities for improvement. Bakeries offering personalization didn't offer a way to complete an order online. Bakeries that did offer online ordering didn't have much variety or a way to personalize the cake.
The User
The User
During surveys I found that most people who order bakery cakes make the purchase for birthdays and anniversaries. They want to order online but don't want to spend a lot of time emailing the bakery and waiting for a response. They wanted more choices and they also wanted a way to make sure that the final product matched what they had in mind. I wanted to design something that offered more choices, improved communication and a sense of security in ordering.
Ideation
Ideation
I used How Might We and Crazy Eights to come up with design solutions for users who wanted to order cakes quickly online and said they didn't have time for back-and-forth emails and also wanted to ensure that the final product would match their vision.
Wireframes
Wireframes
After researching competitors and reviewing user needs I developed information architecture for the web flow and began sketching wireframes. I added a process that would allow people to mix and match cake flavors and frosting providing more unique options and allow customers to see the finished product before delivery. I also included a "Chat the baker" feature so that users could have their questions answered in real-time instead of sending emails. In recent times, I have seen businesses that incorporate Facebook Messenger into their website so this is a feature that would be relatively easy to add.
Information Architecture
Information Architecture
This was the layout for the web flow before early usability testing.
Lo-fi Desgins
Lo-fi Desgins
Low fidelity designs were created in Adobe XD to test the ease of use and user flow before putting a lot of time in UI design work. During user testing I found that some people found the many entry points into the cake ordering flow to be overwhelming. Now users felt like they had too many choices, so I streamlined the process in final designs.
User Testing
User Testing
In the first study, users conducted a test remotely and were asked to complete tasks within a prototype website and complete a survey. Users found the many choices to be overwhelming and some were confused about when their order would arrive. In the second round, users tested the product remotely and completed a survey. Some users requested that "home" text be included with the logo and all users were able to easily complete the tasks.
High Fidelity
High Fidelity
Testing of high fidelity designs found that users wanted a more apparent path back to the home page so I labeled the cake logo icon with the word home on subsequent pages. The web flow was simplified in the high fidelity design and there were no complaints about too many choices. I also included a chat box so that customers could chat the baker in real-time for custom orders instead of using back-and-forth emails.
More Revisions
More Revisions
See the case study below:
See the case study below:
Page updated
Google Sites
Report abuse