How might we improve the Starbucks app to make it easier for college students to get their favorite drinks?
Role: Co-Designer
Date: Winter 2020
Skills: UX/UI Design, Figma, Wireframing, Usability Testing, Storyboarding, Needfinding
Prompt: Redesign an existing interactive system (website or app) to address cognitive human factors issues.
Our Journey.
Finding the pain points.
We began our design journey by deconstructing all of the complex tasks into a hierarchical task analysis. Then, we asked our peers that have gone to Starbucks to use the current app to perform specific tasks, such as ordering a drink, or finding a nearby location.
Our initial user interviews showed us that some tasks failed to be streamlined efficiently and the overall interface was very overwhelming.
Prototype and iterate.
We created multiple concept diagrams to carefully outline all the actions and steps necessary to effectively plan a trip to Starbucks. From these flow diagrams, we created low fidelity paper prototypes and conducted further rounds of user testing.
After completing more user interviews, we selected our most helpful and well-received concepts to move forward with. Using Figma, we began creating an interactive wireframe of our app redesign.
Finishing our prototype.
As we were implementing final revisions to our wireframes, we continued to conduct usability tests on our Figma prototype. We even took the time address one of the biggest pain points outside of the tasks we analyzed earlier: decluttering the homepage.
To guide the aesthetic direction of our improved app, we created a mood board which outlined the desired color scheme, iconography, and placement of interactive features, such as buttons. For features related to the aesthetic simplicity of the homepage, we took some inspiration from competitors such as Peet’s Coffee.
App Redesign Mood Board
![Annotated Hierarchical Analysis of Task #2 [Ordering a Drink]](https://images.squarespace-cdn.com/content/v1/5e2fb26847389451e7b533a4/1597438115454-PPJ6CCAIEKXTCFAHIQAU/Spann_User2_TaskAnalysis.jpg)
Annotated Hierarchical Analysis of Task #2 [Ordering a Drink]
![Initial Paper Prototypes for Task #1 [Ordering a Drink]](https://images.squarespace-cdn.com/content/v1/5e2fb26847389451e7b533a4/1597440602542-6HP185BRP0GVQA5453RP/iphone_canva.png)
Initial Paper Prototypes for Task #1 [Ordering a Drink]
Here’s what we came up with…
Below is an interactive prototype of our redesigned Starbucks app. Our team’s interface design was intended to specifically address the experience of ordering a drink, finding a nearby Starbucks location, and adding money to your account.