top of page

Starbucks
Re-design

Starbuckslogo-3d-02.png

Starbucks

Timeline
10 weeks, Winter 2021
Role
UI/UX Design

Re-design my favorite coffee app

I use the Starbucks app more often than I would prefer. Using the app, I noticed there were some areas that could improve. I love using the mobile order feature as it is convenient and I can avoid the long lines. With the order ahead feature, a pain point for me is that I can never gauge when my drink will be ready. 
The challenge
Re-design the Starbucks app
The Starbucks app currently has a message in place that says "9-12 minutes" for your order to be ready. How might we create a better system for the user to know when their drink is ready?
Designed_iOS-02.png
Lean UX Canvas
Before starting on the product, I wanted to identify problems, outcomes, and goals through the Lean UX canvas.
Lean_UX-01.png
Initial Wireframes
I created some mid-fidelity wireframes to map out some of the ideas that I learned from the Lean UX canvas.
Wireframes-01.png
Site Map
From the wireframes, I established what sections were needed and create a site map to have a bird's eye view of Starbucks as a whole.
Site_map-01.png
Flow 1 - Sign In 
This is the first flow that will allow the user to sign in and view the home page.
Prototype1-02.png
Flow 2 - Browse and Favorites
This flow will allow the user to browse drinks, add a drink to the favorites section, and see previous orders.
Untitled-3-01.png
Flow 3 - Order
Once the user has chosen the drink, this will allow the user to go through the check out process. 
Untitled-4-01.png
Flow 4 - Scan to Pay
This flow is for users who are not using the mobile order feature. The user can scan to pay in person or in the drive-thru. This feature allows for multiple forms of payment and allows the barista to scan one bar at a time. This will eliminate the issues with scanning.
Untitled-5-01.png
Flow 5 - Progress
This flow allows the user to know the progress of their drink. This will let the user know when to arrive at Starbucks and pick up their drink at the accurate time. The animation keeps the user engaged and brings a 'progress bar' alive.
Untitled-6-01.png
Usability Testing
I conducted usability testing and got feedback from users that were applied to the final design. 
User_Testing-01.png
Apple Watch Prototype
This shows how the re-design will be displayed for the Apple watch.
Apple_watch-01.png

Project takeaways

Show the user progress

I re-designed my favorite app to make it better. This allowed me to hone in on my visual design skills and have fun with the illustrations. I wanted to bring a sense of joy to the app and I think adding animations was the perfect touch. Having strong UI references was important but I also kept the user in mind while re-designing for Starbucks. The goal of the app is to allow the user to have quick access and gauge the time of pick up. This was designed for the user on the go. I wanted to make it as intuitive as the original app and keeping one-hand usage in mind.
bottom of page