WHAT'S YOUR CAKE?
WHAT'S YOUR CAKE?
Embedded Files
Responsive website for a home-based suburban bakery
Responsive website for a home-based suburban bakery
Project overview
Project overview
What's your cake is a home-based bakery serving in a suburb of a big city. To order a cake, customers contact the bakery via social media, text or call and discuss all the details of the order in person, which takes a lot of time. To enhance the shopping experience for their users, I will design a responsive website which allows users to order, customize or build from scratch a custom cake conveniently from their smartphones or computers. Target users are people who live within 10 miles of the bakery and who prefer to shop online instead of making an order in person or on the phone.
PROJECT DURATION: September - December 2023
MY ROLE AND RESPONSIBILITIES: as a UX Designer I was responsible for conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Research
Research
During my research I interviewed 4 people who regularly order cakes from What’s your cake bakery and the baker herself. Then I built an aggregated empathy map, identified user’s pain points and created a persona that reflects major type of customers in the shop. After that I built a user journey map and formulated a problem statement.
User's pain point
User's pain point
The bakery doesn't have a website. All orders must be placed via texting or calling the baker. That takes a lot of time and includes a lot of discussing, which many customers are not quite comfortable with.
Persona
Persona
Based on these findings, I created a persona who reflects major type of the customers.
Designing a solution
Designing a solution
Paper wireframes
Paper wireframes
Focusing on the core features identified during user research, I sketched the first wireframes using pen and paper.
On home screen a user can quickly choose a cake or a cupcake by design or filling, or use a special tool to build their own cake from scratch as well as look through reviews.
To make sure the website is responsive I worked on three design sizes.
Digital wireframes
Digital wireframes
The main screen reflects the main user needs.
Navigation bar tabs with the main pages of the website
Previews of the same main pages of the website
The footer with the website map and contacts
Main screen on a laptop
Main screen and cake designs screen on a phone
Low-fidelity prototype
Low-fidelity prototype
For low fidelity prototype, I worked on two main user flows. First, when a user chooses a pre-designed cake and needs to customize a few things like a message on a cake or a cake size. Another user flow suggests building a cake from scratch with a multiple choice on each step.
Usability study findings
Usability study findings
The usability study of the low-fidelity prototype revealed the following:
Users need a home button on every screen on their flow, because they don’t use the logo button to return to the main page
While using “build your own cake tool”, users need all the decor descriptions and downloading of a reference picture to be on one page
While choosing a pre-designed cake users only need one button “Customize” because it’s always need to be customized
The findings were taken into consideration, and changes have been made accordingly.
Mockups and high-fidelity prototype
Mockups and high-fidelity prototype
Accessibility considerations
Accessibility considerations
✔️ Foreground colors and a background colors used are in compliance with Web Content Accessibility Guidelines (WCAG)
✔️ Text hierarchy has been implemented throughout the app to helps user to distinguish the different sections and information on screen as well as to ensure seamless work of screen readers
Takeaways and what's next
The design received a warm welcome from the owner of What's Your Cake Bakery, who expressed satisfaction that all her requirements had been met. Moving forward, the next phase will be conducting another round of usability studies to ensure that any remaining user concerns are effectively resolved, iterate on the design if necessary. Working on this project I learnt the importance of creating a design system early in the process. It helps to keep the design clean and consistent.
Page updated
Google Sites
Report abuse