HotCakes Bakery is a small chain of bakeries located in the New York City metropolitan area. HotCakes focuses on providing quick and tasty baked goods at affordable prices. They offer baked goods for both pickup and delivery.

Project Duration:
August 2021 to December 2021

Project Overview

The Problem
To design an app which allows people to easily order fresh baked goods and have it delivered to their door.
The Goal
To design an app which allows people to easily order fresh baked goods and have it delivered to their door.
My Role & Responsibilities
UX designer, designing the app for HotCakes Bakery from conception to delivery. I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User Research: Summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through user research was busy individuals who enjoy baked goods but tend to get frustrated with the traditional in person ordering process.

The user group confirmed my suspicions about Hot Cake's Bakery customers. Research revealed that customers often purchase baked goods on impulse but often struggle with the technology behind online ordering. They want to be able to see the specials of the day as well as any other deals which would assist them to giving into temptations. The technology experience needs to provide ease of use or customers will abandon their order.

Research Discovered Pain Points

1

Busy schedule does not allow for long lines at bakery especially during the holiday season.

2

Struggles with technology when online ordering, but prefer the convenience of ordering in advance then picking up in person.

3

Indecisive and wants to see what’s looks good when shopping for baked goods.

4

Because of allergies and dietary restrictions would prefer to look at ingredients list before purchasing.

Understanding the User

Problem Statement

Julia is a young professional who needs the ease and convenience of ordering and having a delivery of baked goods online because of her busy schedule.

User Journey Map

Mapping Julia’s journey revealed some of the problem points and potential solutions users would experience when ordering through the app.

View User Journey Map →

Starting the Design Process

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements made it to digital wireframe would be well suited to address user pain points. For the home screen I wanted to highlight options to make the ordering process as easy as possible for the user.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and finding from user research.

Digital Wireframes

My goal was to make the decision making process as easy as possible to the user. Providing a sorting function as well as images and enticing descriptions.

Low-fidelity prototype

The low fidelity prototype connected the primary user flow of ordering from the menu and then selecting pickup or delivery options. This prototype was created to be used in a usability study. View the low-fidelity prototype→

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

1

Users want clear and easy navigation to the homepage

2

Users need CTA buttons to be bold and prominently placed on the app

3

Users want additional information in the form of large images and thorough product descriptions.

Round 2 Findings

1

Users want more clarity on the dropdown navigation

2

Users want the order history page to have better organization, verbage, and additional functionality.

3

Users want more clarity with the cart and checkout process

Refining the Design

Mockups

Early designs had smaller images and limited information about the items and the existing items in the cart. Based on user feedback I have fleshed out the information displayed on the menu page, in addition I have added an item counter and a small popup when an item has been added to the cart.

Mockups

Users noted they wanted a place to look up information about the order after it was placed, in addition it was noted that the order summary page lacked clarity. Information about any active orders was added to the order history page and clarifying verbiage was added to the page.

High-fidelity Prototype

The final high fidelity prototype presented a clean user flow while allowing redundant means of navigation to several key points in the flow. View the High Fidelity Prototype→

Key Mockups

Takeaways

This project was for my Google UX design professional certification course. The objective of the course was to give an indepth understanding of UX design. I completed this project over the course of 4 months, and learned an incredible amount about including empathizing with users and UI design.
Impact

We have created a modern and intuitive app which allows people to effortlessly place an order for their favorite dessert item.

One quote from peer feedback: “The app was really easy to use and now I really want cookies!”

What I Learned

I was surprised by some of the results of the usability studies for this app, users would often discover issues I was completely unaware of For example I found people wanted more information at the tips of their fingers rather than going through the effort to seek it out.