Bake My Day is a service that allows you to order desserts (and other baked goods), direct to your home or office.
Role: UX Design
Much of my time is spent in the kitchen tweaking different recipes. Lately, I’ve had a bit of an obsession with baking bread. This personal interest sparked an idea to build out an optimized web experience for a local bakery. As a UX Designer, my goals in this project were:
Consumers also tended to spend more on these platforms:
I was focused on baked goods, so I decided to run a competitor analysis looking at the following things:
The full analysis can be viewed here. As you can see, the scale of the companies I chose vary greatly (on purpose). Specialties and Magnolia are regional bakeries while Doughbies claims to deliver “fresh cookies” to anywhere in the United States.
For the sake of research, and for my tummy, I tested Doughbie’s user flow out in real life.
I took note of this and shifted focus to the checkout experience (on web). Because 25% of shoppers abandon their purchase because of forced registration, most companies tend to allow guest checkout. Companies like Amazon can get away with forced registration due to high brand recognition/value, but about 8 in 10 are now making this an option. Because one of my user stories involved referrals, I wouldn’t encourage this completely in my solution. The benefit of creating an account would be earning store credit.
Cart visibility was also a key component of a successful checkout. At any given point, a user should be able to scan a page to view his/her current shopping cart. Upselling should also be a secondary goal of the process.
Asos has a simple animation for adding something to a cart. The subtotal appears for a few seconds, then disappears back in. In this time, the checkout button is highlighted to optimize sales. The user remains on the same product page.
Amazon focuses on upsells. The recommended products are much larger than the current item in focus. There is still a clear drive to proceed to purchase, but it takes up less of the page.
It feels slightly overwhelming, but I understand the need. As a former Customer Success Manager, I've learned that driving upsells or cross sells can be a challenge, but if done tactfully, customers are more likely to come back. Product upsells became a late addition to this project’s requirements. I took them out of the checkout screen and instead they were stuck on the browsing screen.
I needed more user insights to validate some of my ideas. Using Google Forms, I created a user survey that asked how users are currently consuming desserts. Pricing was also a research area.
About half of the users had experience with services like DoorDash, or Grubhub. They preferred digital ordering methods over calling the restaurant.
Everyone was willing to pay up to 10% more for instant service.
From this, I conducted one user interview to continue with follow-up questions. I spoke to someone who worked as a secretary. She acts as the logistics and admin person in the office too, ordering office snacks and birthday treats. She typically orders large orders for her entire office using catering companies, and Postmates. Her gripe is the price added on for on-demand services. I asked her to show me how she would order something with Postmates, and she instantly made a complaint about how “slow” the website loaded on her phone. I tried it myself, and also noticed a difference.
Here, I also saw her struggling with the order itself. She started to add items to her cart, and then realized the restaurant was closed. This was frustrating, and could have been prevented through more transparency.
Through my user research, I was able to put together two personas for this website:
I listed out requirements for the website using user stories. The full list can be viewed here, with the priority added. This helped me weed out unnecessary features for the MVP. Bake My Day now has 5 core requirements for both new and returning users:
Using these, I created user flows that would aide in the design. This proved to be tricky, because of the delivery component. This is currently a limited service in the Bay Area, so I needed to manage expectations for delivery. If the bakery does not delivery, this needs to be communicated.
I experimented with tons of line work for the logo, creating versions that included either symbols of baking (wooden cutting board, flour, loaf of bread ) or of transportation (van). You’ll see a bright orange used in the logo to trigger appetite and remain cheerful.
After some helpful feedback from my mentor, I narrowed down the options to two.
With Usability Hub, I was able to create a preference test for users to choose between logos:
"It's clearer, it doesnt pop up as much over the other one on a gray background, but it looks like one whole logo, rather than split"
The orange remained as an accent color for the brand, with the rest of the pallette being more neutral (soft green and brown tones).
I chose Avenir as the primary type for headlines and body of text due to its versatility and modern look. The one exception to this is the use of Novito Nova type in the logo. I wanted a handwriting type to connect the user back to a real-life bakery (and to the process of baking).
Several iterations were created before finalizing designs for Bake My Day. The UI Design process first started with pen/paper, then went to low fidelity wireframing with Balsamiq. Balsamiq is great because of its component library. I was able to create 10 wireframes within hours and receive my first round of feedback within two days.
One problem I began to have was around structuring my user flows. I had a good sense of how to categorize the items on my website ( cookies, cakes, breads… etc), but I wasn’t sure where to place the filters for delivery time, nutrition, and location. To help me get unstuck, I ran a tree test to help me evaluate some of my potential solutions. Unlike a traditional usability test, a tree test is conducted with simple nested text. The user goes through pre-written tasks and the results are presented as a path. This assesses the findability of certain items on the website.
The results were powerful. I realized that my original solution made no sense for two reasons:
I then went back to Balsamiq and re-did a few screens based on the results from this test. I also optimized the UX for mobile, allowing me to focus solely on getting the user to checkout.
I used Sketch to further refine the mockups.
The final prototype can be viewed in Marvel App. With the working prototype, I conducted quick usability tests through Google Forms, asking specifically about the copy used, and the trust associated with the brand. I was also interested in areas of friction prior to purchasing an item.
The recurring lesson to me as a Designer is adhering to responsive grid systems in my Sketch/Illustrator files. I started this project with a larger artboard than intended, leading to zoomed in components and clunky interactions.
This project also taught me that visual hierarchy and copywriting in UI is as important in the wireframing stage as it is later on closer to launch. Design assets can be passed around between teams, and should be able to speak for themselves. Instead of relying on placeholder content, I worked hard on this project to create realistic data early on.
Moving forward, Bake My Day could focus on two major areas to grow: