top of page

All the Cakes Bakery & Gifts

Responsive Website, November 2022

3 weeks | UX Designer & Researcher

BakeryScreen
Overview

For the Google UX Design course, the challenge was to create an easy ordering flow for a bakery website. 

THE PROBLEM

Users needed an easy way to order gifts, create advanced orders, and have the ability to choose when they received orders from a local bakery.  The website did not have a way to order in advance. 

THE SOLUTION

All the Cakes Bakery & Gifts ordering system allows for cakes to be easily purchased in advance for pickup, delivery, or as gifts based on customer needs and schedule.

AlltheCakesComputer
Research
PERSONA

To learn more about users, I did short interviews with various people who would benefit from having an easy to use website for ordering products.  I created a persona about someone who might benefit from having easy ways to order cakes from a bakery.

PersonaAna.png

EMPATHY MAP

To better understand users, I created an empathy map to learn what users might say, think, do, and feel when trying to order cakes.  Ideas came from conversations with friends and colleagues who often order things in advance.

Empathy Map
USER JOURNEY
User Journey

Thinking about what it might be like as the user to order a cake from other competitor bakeries,  below are the emotions a user may go through when ordering from one of these websites.

Design
SITE MAP

The site map goal was to have a simple flow to completing an order through the cart. 

Site Map Bakery
WIREFRAMES

Key elements such as navigation, product images with links, and call to action buttons are included in the wireframes.  Through research, it was important for the user to have several options on how to receive orders. After feedback from other designers, I included an order button on the bottom navigation bar for the mobile versions along with easy access to the cart.  A search bar was also added to make it easier to find cakes.

Paper Wireframes

Paper wireframes

Homepage wireframe

Order option wireframe

Responsive wireframes

LOW-FIDELITY PROTOTYPE

The low-fidelity prototype shows how a user can order a birthday cake for delivery.  This prototype was shared in a usability study with potential users to see if the checkout process is easy and successful.

LoFiGif.gif
Testing
USABILITY TESTING
INSIGHTS

The usability study was conducted with five participants that all purchased items online.  The study was moderated with two activity prompts directing users to order a birthday cake and complete the checkout process for delivery.

  • Users skipped the search features and browsed the pictures

  • Users wanted consistency in customizing features on each page along with knowing prices

  • Users liked the pop up checkout boxes for ordering

Adjustments
CHANGES FROM TESTING

A search space was removed to include bigger pictures.  During the usability study, users were confused with button choices and wanted to know prices along with serving sizes for the cakes. After the study, I added a different choice feature and descriptions to the page.

Cake Changes.png
ChocoCake Changes.png
HIGH-FIDELITY PROTOTYPE

The high-fidelity prototype shows how a user can order and pay for a traditional birthday cake for delivery.  This prototype was shared in a second usability study with users.

HiFiPrototypeBakery.gif
2ND ROUND TESTING

The usability study was conducted with five participants that all have purchased items online.  The study was moderated with two activity prompts similar to the first round of testing.

  • Users liked the ability to pick a time for delivery but wanted a calendar view to pick date and time

  • Users were not sure of the delivery service location based on the website's current function

  • Users really liked the pop up checkout boxes for ordering

Reflection
NEXT STEPS
  • Add a calendar feature to the delivery date and time selection area to make it easier for users to pick the specific day needed.

  • Include a delivery service area screen and map so that users can check to know where their orders can be delivered.

  • After adding a few additional features to help users navigate the website, it would be helpful to run one more usability test to avoid any large issues before launching the final site.

“The flow of the website checkout was great. I liked that I could schedule the delivery time and sign up for delivery confirmation. Very easy to use and I would definitely order from a website like this!”

- Emma, Usability Study Participant

See next project:

ElectricalWorker_edited.jpg
bottom of page