Bake My Day

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

Platform: Desktop

Defining the Problem

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:

  • Understand and identify current usability issues ordering food online
  • Build and validate a potential design solution through research and testing
  • Ensure my solution is fully responsive on both web and mobile

Project Research

The Competition

A sizeable majority of Americans have shifted towards online shopping. Forrester predicts that by 2017, the market will be worth roughly $370 billion. Specifically, mobile first design has impacted food delivery. Newcomers DoorDash and Postmates are showing explosive growth in recent years, likely due to being a three-sided marketplace with faster delivery service. The value proposition appears to be offering more goods (or food options) than competitors and brick-and-mortar stores for online purchase and delivery within an hour, via couriers.


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:

  • Company history
  • Cost of items
  • Referral programs
  • Checkout experiences
  • Sign up flow (How much profile info is required before purchasing?)

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.

What stood out:

  • As a first time user, it was great getting coupon codes for my first order
  • The branding -- felt bright but comforting
  • Referral portal for tracking your invitation code
  • Very engaging promotional emails

Pain points:

  • Lack of review system for the actual products
  • Nutritional info was unhelpful (it said to email them, but didnt offer an address)
  • A few confusing graphics that did not align with the copy on the website

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.

User Survey

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:



User Flows

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:

  • Browsing baked goods based on location of user (menu would be dynamic based on time and location)
  • Filtering by category and nutrition
  • Ability to rate and review an item
  • Ability to manage referrals
  • Ability to purchase using credit card and PayPal

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.



Branding

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"





"I like the circle, it makes the logo stand out and it reminds me of a cookie"



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).


Finalizing the design: test and repeat

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.



Wireframes



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:

  1. If users had a question about dietary restriction, they were naturally inclined to go to the “Help section” first, before the menu
  2. The zipcode check should be placed ahead of the menu to set better user expectations. Users should not be able to order until it's confirmed that we deliver in their neighborhood.

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.

Protoype

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.

What I Learned

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:

  1. Credibility:Testimonials from target users as well as a more built out referral portal
  2. Supplmental revenue models: catering subscription for offices