Case study: A redesign of a local custom cake shop
Role: UX/UI Designer, End-to-End Responsive Design
Timeline: 6 weeks
Tools: Figma, Goodnotes, Whimsical, Miro
Let me bring you on this journey of my UX process and design decisions while I redesign for a local custom cake website.
“Hm … my best friend’s birthday is coming up. I want to do something special for her this year. Where can I get both a unique and delicious cake?”
“Have you heard of Yullcake?”
Yullcake is a local custom cake store based in Seattle, Washington, specializing in creating unique, custom-designed cakes for special occasions. Their primary customers are attracted by Yullcake’s Instagram page. Yullcake wants to increase its online presence by improving its website to attract new customers as well as returning customers.
Although the importance of an online presence steadily increased over the years, the worldwide crisis in 2020 accelerated the shift from offline to digital across industries. It became increasingly important for small businesses to build a digital footprint as well.
Business Objectives/KPIs
Yullcake published their online website six months ago, but users still order through direct messages on Instagram or a Korean messaging app, Kakaotalk. The company thinks that the website is uninformative and that there are usability issues with the user flow. By redesigning the website experience, Yullcake is expecting to:
- Increase sales from the online website by 10%
- Decrease in number of users’ inquiry calls
Scope and Focus
Yullcake currently uses a generic website provided by WIX so there are many constraints and limitations. I will be redesigning Yullcake’s webpage from the bottom up so these constraints do not affect the final product. I will focus mainly on redesigning the user flow for purchasing and requesting a quote. Finally, I will make sure the design is responsive across mobile devices.
Heuristic Evaluation
Before I began my research, I started by identifying any problems associated with the current design of the websites, looking for gaps in the experience, and comparing it against the usability heuristics. This provided a foundation for improving the overall user experience. Issues were categorized as low, medium, or high based on their impact on usability.
Competitive Analysis
With the challenge and business objectives in mind, I conducted market and competitive research. From there, I found that small business websites that make custom cakes don’t have a user-friendly checkout flow due to the limitations of platforms like Shopify and Square. And although bigger businesses have a better check-out experience, cakes are usually not completely custom because they need to cater to a bigger audience. I’ve taken note of the various features of both direct and indirect competitors of Yullcake.
If you’d like to see a thorough analysis of each competitor, click here.
I also attached a research plan!
User Survey
I chose to conduct a user survey to gather quantitative data and gain insight into potential users.
Key learnings (16 responses)
- 62% of users have never bought a custom cake online
- The two most important factor when purchasing a custom cake was its appearance/design and flavor
- 100% of users who bought custom cakes were for a friend or family member
- 60% of users start looking for a custom cake 1–2 weeks in advance
This highlighted the challenge of making the online experience more inviting as well as incorporating detailed explanations, providing enough detail about the cake to the user.
Stakeholder Interview
Following the user survey, I had the opportunity to interview the business owner. The interview was extremely insightful and helped me understand the reasons for certain placements of components. For example, WIX had limitations when it came to the order page because it used a Wix plugin with a non-customizable design. At the end of the interview, I realized that there were too many limitations because the business owner did not want to spend money on hiring a developer and wanted to stay with Wix as her platform. I let her know that I would be able to redesign the website, but would not be able to create it. That said, the website can still be used in the future.
If you’d like to see the full interview, click here.
User Interview
Next, I conducted a user interview because I wanted to empathize with the users and get an in-depth understanding of their values, perceptions, and experiences with custom cake shopping. Unfortunately, I was only able to interview 2 individuals. An interview guide was prepared with a relevant set of questions and subsequently, a detailed report of interview findings is found right here.
Summary findings from user interviews:
- Common themes across the users were an inconvenience, for others, uncertainty, pricing, and reputation
- All participants noted that they bought cakes for a family or friend
- Reputation is quite important when users buy custom cakes
- Participants found it annoying that some online stores don’t have enough information while some have too much
- A participant reported it was frustrating when every design added comes with an additional price
You don’t know what you’re really getting if you shop online
The Problem Statement
Did you wonder when we’d get to the problem statement? Well, it’s right here!
After doing thorough research, I formulated the problem statement to guide me through the redesigning process.
How might we redesign the custom cake shopping experience so that it can be more usable, accessible, and effective?
Persona. Hi Jane!
Now it’s time to put together the results from the competitive analysis, the survey, and the interview to find our primary persona. Meet Jane. Here, you can see her motivations, goals, needs, fears, and frustrations.
Jane is 28 years old, an interior designer who lives in Seattle, WA.
With my target user’s goals and pains, it is time to align our user’s goals to our business goals to come up with a solution to benefit both the user and the business.
Information Architecture
I knew I needed to redo the information architecture when performing the heuristic evaluation and the time is now! I’ve done my research and now moving on to the blueprints!
The biggest concern about this redesign was about how to create a seamless user flow so users can customize as much or as least as they want while meeting the business goals. After much brainstorming, I’ve decided to create two flows. One for submitting a quote, and another for purchasing right away. This way, users can choose a path they like and the business will receive fewer calls and cart abandonment.
Sketch sketch sketch …
Building off the information architecture, I began the ideation stage with sketching on the Goodnotes app. I sketched a couple of pages while keeping in mind the information architecture and research findings. Sketching helped me quickly explore the different design solutions for the features involved.
Interested to see all the paper sketches? Here you go!
Mid-Fidelity Wireframes
With the ideas from sketching, I started building mid-fidelity wireframes on Figma. At this stage, I needed to ensure that both user and business goals are being met and the functionality and the overall layout of pages were well designed.
Usability Testing
Normally, usability testing would be done at this stage but because I was running out of time, I instead reached out for a group critique and got feedback from peer designers about my prototype.
Here are the key points from the feedback received:
- Overall, the spacing needs to be adjusted. All the components are crowded together.
- Users who are using the web will find it difficult to scroll horizontally to see toppers.
- Keep everything consistent throughout the components by keeping the same size for the same elements and using the same corner radius & icons.
- Where can the users add notes for the baker for lettering?
Here is the final look for the mid-fidelity.
See here for all wireframes! (w/mobile)
Design System
After implementing the feedback points received from the previous phase, it’s time for the visual design!
I want a simple and clean design. I like the softness that the current website has. Everything else can be changed. -Stakeholder
High Fidelity Wireframes
After finalizing the UI kit, I combined the mid-fidelity wireframes with the UI elements for both desktop and mobile designs.
Outcome
How might we redesign the custom cake shopping experience so that it can be more usable, accessible, and effective?
The problem is solved by a complete & thorough redesign of Yullcake that focused on:
- Usability & accessibility issues, uncovered during the Heuristic Evaluation.
- Two user flows were created to easily pick and choose depending on preference.
Next Steps
Following the wireframes and the prototype, I will do a thorough usability testing to see what works and doesn’t work on the user’s end. From there, I will make more iterations and create more flows in the project.
Reflection
It was my first time working with a client and I’ve learned about all the different types of limitations that could affect the business. Yullcake for example had their store hours on their hero banner because of incoming calls regarding business hours. Having the store hours posted was their way of solving the problem. Overall, it was a rewarding experience to help a small business that struggled to have an online presence amid a pandemic.
For the future:
- Recruit users for interviews in advance to meet deadlines and goals
- Ask in-depth questions for the user survey. I could have gained more insight by asking better questions.
- Set time limits and don’t get lost in the rabbit hole looking for inspirations.
References
[1] — The Effects of the COVID-19 Pandemic on Small Businesses
Thank you for reading!
If you enjoyed this article, give me a clap 👏
👋 Any questions or just want to say hi?
You can email me here: christinasa1997@gmail.com
Visit me on LinkedIn
