The Process
Competitive Analysis
Learning about the competition
I conducted an analysis to see how the user experiences differed between competitors in the same market. Starbucks is the industry leader, but there is always something to learn from competitors. For example, most competitors feature rewards points prominently in the UI, which indicates the importance of rewards to customers.
Customer Interviews
Validating hypotheses and more...
From market research, I learnt Starbucks' target demographic and created provisional personas to help me recruit interviewees. I interviewed five participants remotely by asking open ended questions to get them to share their goals, behaviors, and frustrations.
Research confirmed that a group order feature would offer value to both the company and the customer.
User Persona
Who is the Starbuck's rewards app user?
After synthesizing the customer interviews with an empathy map, I distilled the findings and created a single persona, Vivian, to keep me anchored to the customer. By creating a consolidated persona, the two primary use cases would be represented: the person who initiates the order and the person for whom the order is taken.
POV > HWM
Framing the problems
From the insights I surfaced during research synthesis, I created POV Statements to help me better empathize with the problems from Vivian's perspective.
Divergent Thinking
Brainstorming solutions
With three HMW questions to help guide the process of solution generating, I realized by finding solutions to the first two, I would likely solve the question of preventing human interaction. I took a few minutes with both questions and brainstormed solutions.
Convergent Thinking
Additional things to consider
The following two solutions were the most feasible, added the most value to the customer, and worked most within the existing tech. Implementing them, however, introduced new considerations.
Solutions
Design Considerations
- Vivian can invite people to add their orders to her group order
- Should there be a distinction between how rewards members are invited vs. phone contacts?
- How will rewards points be distributed?
- How will Vivian be able to see the status of other orders?
- How will Vivian know when to check out?
- What if Vivian can't wait for all the orders to come in?
- What will the invitation look like to the secondary user?
- How will group information be organized on the 'review order' screen?
- Under Vivian's group order, people can order and pay through their app.
- What if Vivian wants to cover payment?
- What if they take too long to order?
- Can they order and not pay?
- What happens when they decline the invitation?
- What if Vivian wants to cover payment but only up to a certain amount?
Wireflow
How would the new feature work?
Having decided the new feature should live on the order screen, I created a UI Requirements document to help me think through the process and determine product requirements. I wanted to visualize, and ultimately share, the group ordering flow. Here, you can see the happy path and interaction between use cases.
High-Fidelity Wireframes
Seamless UI integration
After working through the additional considerations and
sketching out ideas, high-fidelity screens were created to ensure the visual design of the feature would fit seamlessly into the current UI of the app.
Usability Testing
Testing it out on people
I designed the high fidelity screens necessary to click through the primary use case, then created a prototype in Figma to test for qualitative feedback.
View prototype3/5
users did not see the Group tab on the order screen
4/5
users were confused by not
seeing status updates of the
other orders
4/5
users did not see important
information about the other orders on the review screen
For the final iteration, I needed to implement the following recommendations:
1. Eliminate the Group tab and create a button instead
2. Make the status of the orders coming in more clear by creating a status bar at the top of the screen
3. Move the horizontal scroll bar down so the user can easily find important group order information
Next Steps
• Design the screens for the additional use cases and prototype them
• Test the new prototypes, implement changes, test again
• Handoff to developers
Reflection
If I had to do it over again, I would have taken the time to ensure the interview participants represented a more inclusive sample so my findings were balanced. Other than that, it was a great experience and I learned a lot about UI design through copying a very well designed app.
