Sunshine Cupcake Truck

September 2022 - November 2022

Overview

I am currently enrolled in the Google UX Design certificate offered through Coursera (with five out of six courses completed). To demonstrate the concepts, students were asked to create a responsive website based on a prompt. The prompt I received was to design an online ordering app for a food truck. I love to bake cupcakes, so I designed a site for my dream business - Sunshine Cupcake Truck.

cupcake truck prototype in multiple devices
final layout of desktop and mobile prototypes

Solution

I began by conducting user interviews with poeole in my area that frequent events such as festivals, farmer's markets and concerts to discern their needs around ordering. I discovered that many of them disliked standing in line and wanted to order in advance. If they liked the product enough they may even be willing to order online while not attending an event. I decided to move forward with a responsive website that would allow them to quickly order from the nearby truck (using geolocation and a order numbering system) or online for delivery.

During this project I wanted to stretch my design skills by using a design system that was very different from what I am accustomed to as well as adding interacgtive elements such as hover states to the buttons.

Research

User Interviews

I conducted user interviews with 6 individuals who frequent local festivals and events. After speaking with them we identified pain points in the process of ordering from a food truck, as well as concerns they had over dietary restrictions.

  • Users expressed concerns over sstanding in line at the truck. They considered it a waste of time if the line was too long or there were too many people waiting for orders.
  • Many had dietary restrictions or were vegan and wanted to know which ingredients were used in their food products.
  • Most were comfortable ordering online from their mobile phone and considered that an intriguing possibility for skipping the line.

Usability Study

We asked five creative event attendees to participate in a usability study based on a low-fi prototype. Participants were given a list of five tasks to determine if there were areas in the site they experienced confusion. This study led to the following insights:

  • Users were confused when they selected a product and were brought right to the cart. They wanted more time to shop around before checking out. 
  • Users often relied on the shop all flavors button to find what they were looking for, but many struggled to find it.
  • Users were confused by inconsistency in the header.

Ideation

Sketches

sketches of cupcake truck app usage

Low Fidelity Prototype

I started with a low-fidelity prototype in Adobe XD and completed usability testing with event attendees to identify pain points and gain understanding of their needs.

Please note: The low-fidelity prototype was later moved into Figma due to access issues with Adobe XD.

View the low-fidelity prototype
Figma prototype of Artisan Center virtual tour app
High Fidelity prototype of Artisan Center virtual tour app

High Fidelity Prototype

After initial usability testing I adjusted the prototype to reflect the insights we discovered during testing, created anoverall brand image and sticker sheet, and completed a high fidelity version of both the desktop and mobile experiences.

View the high-fidelity desktop prototype
View the high-fidelity mobile prototype

Case Study

As part of the Google UX Design Certificate class I completed a case study outlining the process including planning, user interviews, persona creation, problem statement identification, prototype ideation and usability testing.

View the case study