Starbucks
2026
2 months
My role
Working in a team of three designers (two mid-level, one lead), I owned the product customisation workstream and redesigned the product page end-to-end, with a particular focus on customisation functionality and usability. I also led UI direction across the project, while my project partner led on research
Research & discovery
We built on existing menu categorisation research from a third-party agency, supplementing it with our own competitor analysis — split across the two workstreams of menu and product page. On the product page side, I rigorously audited the existing app experience, identifying poor information hierarchies, unclear customisation naming, and areas of user confusion such as ambiguous 'default' states. A particularly useful exercise was distilling all customisation types down to three base functions: a quantity selector, a single select, and a yes/no toggle. For menu categorisation, we ran a tree-testing survey to validate our structural thinking.
Defining the direction
A core belief coming out of research was that housing all customisations directly on the product page — rather than pushing users in and out of multiple overlays — was essential to modernising the experience. Given the breadth of customisation options available, this was technically challenging, but it became the defining differentiator between old and new. I also saw the project as an opportunity to significantly update the app's UI, which felt outdated and clunky relative to the brand.
Process & exploration
For the product page, I structured the design challenges into six categories: Images, Customisation, Ingredient Explanations, Out of Stock, Cross-Selling, and Key/Locked Ingredients. For each, I paired my audit findings with competitor insights and began wireframing. We presented two or three options per challenge at our first client check-in, then iterated based on feedback.
Images
Customisation
Ingredient explanations
Out of Stock
Cross-Selling
Key/Locked Ingredients
Testing & iteration
We ran guerilla-style usability testing with 14 participants, using a high-fidelity prototype built in Figma. Using variables extensively, I created a near-fully realistic customisation flow — allowing participants to interact with it as though it were a live app, which produced sharper, more reliable insights.
A key finding was that users wanted the autonomy to remove 'key ingredients' — those the client had designated as essential to the drink. So rather than locking those customisations as we’d thought would be the best solution, we pivoted and designed an alert that warns users when they're about to significantly alter a drink's core composition. This solution also aligned more authentically with Starbucks' brand identity and its well-known culture of giving customers total control over their order.
Design we tested
Updated design
Final deliverables
We delivered final screen designs, components and an updated interactive prototype. Alongside a deck that was intended to demonstrate our researched-backed process and design, with the intention of creating buy in internally whilst instructing global markets on how to implement the new designs. The format highlighted research and UX principles that backed up our design thinking, while outlining important implementation guidelines around copywriting and functionality use.
Outcome & impact
This project is still in development so we are yet to understand it impact across various global markets.
Reflection
I feel really proud of this project, especially how we maximised figma’s variable functionalities in testing, and how much UI was improved on areas of the app we worked on. Largely the project went smoothly and the client was really happy, at points not made easy due to very few client check ins because of their busy schedule. If I had more time I’d like to have done a more thorough hand over to the development team, time restrictions meant that detailed annotations weren’t possible but detail in the customisation journey defintiely warrented a clearer explanation.
