Leila's Bakery
Sample Project: Creating a Responsive Website for my Google UX Design Certificate
THE PROBLEM
People love cake. However, ordering a cake online is something people are hesitant to do because they are afraid that the cake they see on the website won't be the same cake that they receive in person. Sometimes, images are not available, which makes people uncomfortable in placing an order online.
MAKE OF THE TEAM
Me
KEY GOAL
Design a responsive bakery website that has an easy ordering flow for users
MY ROLE
UX/UI Designer
UX Reseracher
TITLE OF THE CALLOUT BLOCK
THE SOLUTION
To fix this problem and build trust with people, I designed a responsive bakery website that has an easy flow to order cakes and other products from the bakery. I added a live stream video to the home page so that users would be able to see a live stream of the cakes and other food products. I believe this would help users trust the bakery more and make them feel at ease when they place an order.
UNDERSTANDING THE USER
My users were people who order cakes online. I created a survey to understand my user's needs, which led me to create a user persona, user journey map, competitive audit and sitemap.
I created a Google Form with12 questions that I distributed on LinkedIn so I could receive more responses quickly. 18 people responded and I was surprised to find that half of them had never ordered a cake online before.
66.7% of users were more comfortable ordering a cake in person. The main reason was that they could see the cake in person and determine if the cake was fresh or not. In addition, they enjoyed speaking with the baker and felt that they were being heard.
2 major pain points that I discovered in my survey were:
-
Users mentioned that images were not available or not enough when they placed an order which irritated them
-
Users were worried that what they ordered online wouldn't be what they would pick up in person:
-
"This isn’t a frustration but a worry - worrying if the cake wasn’t what was described when you get it - I.e. it didn’t meet expectations."
-
"I wouldn’t mind ordering a cake online, but I would be skeptical of how effective it would be. A lot of bakery websites do not have pictures or an interactive model of the cake, so I can’t be sure I’ll get what I want"
-
"When online I'm unsure if the item I order would look exactly the same as what I saw online. Besides in real life I can see the cake upfront and check if it looks fresh or not..."
-
BREAKING DOWN THE PROCESS
I designed wireframes, a lo-fi prototype, mockups and a hi-fi prototype. I conducted a usability test for both the lo-fi and hi-fi prototypes.
After the wireframe and lo-fi prototype were designed, I organized a research plan and conducted a usability test with 5 females between the ages of 23 - 57. My main takeaways from the usability test were:
-
I added pricing to each food item so users can see that information immediately.
-
I redesigned the "Custom Cakes" section to make the design the same as the other food product sections. This way the design remains more organized, consistent and helps users understand what they need to do.
-
I placed "Custom Cakes" next to "Cakes" because users wanted to be able find this section quickly since this section was interesting to them.
I wanted my visual design to be more modern, slightly classy and clean. Choosing a white background was essential because I wanted my visual design to make the user feel light and airy (like a cake), not moody and dark. I chose a dark green as my primary color because this color was a little bit different than the other bakeries that I saw (they used a lot of blue), the dark green gave the design a bit of a calming feel, and I wanted to use a color that I typically don't gravitate towards (I like red and yellow). In addition, the dark green and white color combination passes accessibility standards so users shouldn't have a problem viewing the text.
For my logo, I wanted the typography to be handwritten because it felt more personal, fun and slightly chic. That's why I picked Parisienne. I used Lato because I wanted the headers and body content to be readable.
THESE WERE SOME MAJOR LEARNINGS OR POINTS I WANTED TO CALL OUT
Desktop vs. Mobile
Learning how to design for a responsive website was a challenging, but enjoyable experience. I had to slow down and think about how my desktop design would translate to a mobile device. Creating separate typography for my desktop and mobile designs helped me organize everything a lot better. Overall, this was an educational project.
Figma vs. Adobe XD
Adobe XD feels like an iPhone (designed for consumers) where as Figma feels like an Android device (designed for developers). If you're using all of the Adobe products, I understand why someone would use Adobe XD. However, Figma has a really good user experience, and being able to open up your browser and jump into your design files from anywhere is awesome. I'm glad I was exposed to both programs, but I prefer Figma over Adobe XD.