Starbucks
Role:
UI Designer, UX Designer
Date:
Aug/14 - Sep/1 2017
Tool:
Sketch / Keynote
Platform:
iPad
Project Overview:
Starbucks has a very complicated business. Their internal process is paper-based right now, which can't help partners (Starbucks Employees) solve standard and opportunity gaps efficiently.
This Proof of Concept project is to outline how digital engagement will empower partners to identify and close standard gaps in the business with real-time data in a centralized system. I worked on client workshop, user interview, wireframe & flow design as well as visual design for the project.
—
Process:
1. Partner Interview
Interviews were conducted during onsite visits with partners (Starbucks Employees) to uncover pain points, workflows, and workarounds.
2. Persona
We discovered that Store Managers has the most issues with the paper-based process. We created a persona to look through the user's eyes.
3. Flow & Wireframe
We collaborated with Starbucks to identify the key flow. We iterated wireframes to show how the App can solve user's pain points.
4. Visual Design
I created high-fidelity designs to present data in a user friendly way and to visualize how their actions can affect the data and the business.
—
Partner Interview
We interviewed 11 partners including Store Manager, Shift Supervisors and Barista to uncover their daily workflows, pain points and expectations. Below are the key insights:
- Disparate Information - Critical information is spread across systems (RegisterSystem, IMS, Decision Center, Daily Records Book, etc). Store Managers spend a lot of time switching between tools in order to get a full picture of their store and strategize accordingly.
- Manually Compiled Trends - Store Managers rely on data trends to make decisions about how to run their store. They’re currently generating their own tools and methods in order to view trends.
- PDF & Paper-Based - The paper-based system results in a manual process, is hard for partners and the business to track, easily lost or forgotten, and provides no day-to-day visibility to the business. PDF and paper tools are hard to keep up to date.
—
Persona
—
Flow & Wireframe
1. Dashboard View - Michelle logs in to look at last week's data of her store. At the bottom, the system suggests some areas to improve based on the data comparison.
2. Symptom View - Michelle taps into the Staffing Plan section of the first symptom to look at some high-level suggestions to improve the store's customer occasions.
3. Interactive View - Michelle taps 'Order Channels' solution to see why adding a partner to mobile order can improve the store's customer occasions.
4. Interactive View - In this view, Michelle can play around with Morning Shift Play, the chart at the bottom will update accordingly to reflect the changes in customer occasion.
5. Notification View - Michelle decides to add a partner to mobile order to increase customer occasion. She sends an notification to the group.
This is the second iteration of the flow. In iteration 1, we explored a system that allows partners to find out solutions to each symptom with just 1 step. However, based on the client's feedback, the primary goal is not to display HOW to solve a symptom to partners. Instead, this system is to educate them WHY a symptom happens. So we updated the flow to reflect the step by step education. We continued to refine the flow in Visual Design phase.
—
Visual Design
Style Tile:
This system is very data heavy. So I designed a visual language to make the data display consistent and easy to digest.
In general,
- Dark Grey is used to show data in the past years.
- Green is for expected data or expected actions.
- Coffee is used to show current data (this year/this week).
- Orange is to highlight educational information, the WHY.
- Red is to indicate the problematic areas.
1. Dashboard - It’s Monday morning and Michelle is planning for her week. She logs into “My Store”. Right away she sees that her store’s total sales have declined in recent weeks. She sees her store’s peak transactions in particular are down. Concerned, she taps into that card to understand the details of the problem.
2. Identify Gaps - “My Store” analyzes her store’s trends from the past few weeks. Michelle sees a personalized assessment. There are a few potential standard gaps to explore in relation to the decline in her store’s peak transactions.
3. Suggest Solutions - She decides to explore the Staffing card. “My Store” suggests solutions based on her current staffing situation, to help her solve the standard gap. She likes the idea “Hire more partners that have peak availability” and taps to see the details.
4. Predict Changes - “My Store” suggests that she hires one partner with peak availability. Here, she can toggle the numbers to model what would happen if she were to adjust the number of partners during peak, and how it is projected to affect her sales.
5. Predict Changes Interactive - “My Store” helps her easily visualize the impact one more partner could have on her store. Michelle decides she will go ahead and hire a partner with peak availability, since the tool predicts it will increase customer occasions and total sales.
6. Notification - After a few interviews, Michelle finds the right person for the job, who can work during peak. She hires a new barista, and sends a message to her team through the app’s digital messaging center to notify them of the change.
