A Cup of Coffee

Mark Stoliarchuk
3 min readJul 1, 2020

--

For this wire-framing challenge, I decided to reverse engineer an app I use almost every day, the Starbucks app. I drink coffee daily, and Starbucks has a pretty simple, user friendly app that allows you to view their menu and order your coffee ahead.

Photo Credit: Starbucks

For this challenge, I decided to create the basic flow of ordering a specific drink, a “blonde roast brewed coffee”. I chose this flow because at the very least, the user should be able to easily order a cup of coffee from an app by Starbucks.

A simple task analysis could be identified through this challenge, with the goal of ordering a cup of coffee in the Starbucks app.

The user would first open the Starbucks app and see this home screen:

iPhone 11 screenshot on the left, wire-frame on the right

With the goal of ordering a cup of coffee the user would select “order” on the bottom of the screen, bringing up this screen. This screen allows the user to browse between available categories, like drinks & food.

iPhone 11 screenshot on the left, wire-frame on the right

If the user’s goal was to order a cup of brewed coffee, they would choose the category “Hot Coffees” which would bring up this screen:

iPhone 11 screenshot on the left, wire-frame on the right

Once the user has browsed & chosen their desired beverage, in this case “blonde roast”, they can choose to customize their drink:

iPhone 11 screenshot on the left, wire-frame on the right

Once the user has chosen their options, they can add the item to their cart. This will take the user to their “cart” where they can review their order, add items, and make changes to existing items. Once the user has confirmed their order is correct and that they have chosen the correct location, they can submit their order!

iPhone 11 screenshot on the left, wire-frame on the right

In all the Starbucks app is fairly simple to use, and has some neat and useful features, such as saving a user’s favorite orders.

This was actually an enjoyable challenge, that helped me to get more familiar with the tools Figma has to offer and the process of wire-framing in general. In my experience with this project, the most difficult part was formatting the different UX/UI elements, such as size, spacing, placement of elements. This challenge helped to familiarize me with the basics of UI design, and with practice I am sure I will grasp these concepts even better!

--

--

No responses yet