Supporting case study

A coffee order starts with the right site

I worked with BP product owners in the UK and Australia on coffee pre-ordering for BPme. I refined the requirements through research, then created wireframes and a clickable prototype that carried the order through to collection.

Open full-size image

A menu, a customized drink, and a collection number. The original screens make the proposed coffee-ordering journey tangible.Original BPme prototype screens, arranged together for the portfolio

Role: UX Designer

Facts

Client: BP
Employer: IBM
Dates: 2019 to 2020
Collaboration: BP product owners in the UK and Australia
Contribution: User research, requirements, wireframes, and prototyping
Work shown: Coffee pre-order prototype and original flow diagrams

Establish where the order can happen

Ordering a coffee sounds simple until the selected site is closed, does not support pre-ordering, or cannot load its menu. I worked with BP product owners in the UK and Australia to refine the requirements and build a clickable prototype for participating BP locations.

My work covered user research, wireframes, and prototyping. The site-selection flow put the conditions for an order ahead of the menu: sign-in, location access, and proximity to a participating site. It also kept open business questions visible, including the entry point and the first-order promotion.

The unavailable paths mattered as much as the successful one. The diagram names a site without pre-ordering, a closed store, an offline store, an offsite customer, and connectivity problems. It records offsite ordering as outside the proposed MVP.

Make the unavailable paths explicit

Site-selection flow checking location and proximity, with branches for an unavailable store or connection — Detail of the original availability decision. The menu loads on the successful path; the alternatives lead to pre-ordering being unavailable. Open the full diagram to see sign-in and the unresolved promotion questions.Original BP design flow

Check the site before building the order

The flow establishes whether the customer can order at this site before asking them to choose products and pay.

Keep the drink and its choices together

The menu keeps the selected site visible below the products. On the drink screen, size, milk, coffee blend, syrup, and extra-shot options sit with the product and the Add to Basket action.

The flow distinguishes required choices from optional extras. Size and coffee blend are marked as required in the diagram. The screen designs explore how those choices expand without taking the customer away from the drink.

Explore the original product screens

BPme food menu with category navigation, product prices, an out-of-stock brownie, and the selected site below — Categories and availability appear before the customer opens a product. The selected site stays in view.Original BPme prototype screen

Inspect the modifier and basket rules

The original flow splits customizable products from products with nutrition and ingredient information. Both paths account for an item failing to enter the basket. On success, the basket becomes active or its existing count increases.

Required choices and explicit failure states

Original product flow with required size and coffee-blend modifiers, add-to-basket success and failure branches, and basket count updates — Required choices, optional extras, and basket feedback are part of the same decision flow. The diagram describes proposed behavior.Original BP design flow

Let the customer check and change the order

The basket brings the drink, its extras, quantity, and total back together before checkout. The original states also show a removal message with Undo. Changing an order should leave the customer able to see what remains and recover a mistaken removal.

Review the basket and a removal state

BPme basket with two regular lattes, item controls, a total, an Add Another Item action, and the selected site — Item controls and the total stay together, with a route back to add another product before checkout.Original BPme prototype screen

Finish with a clear collection handoff

Checkout restates the drink and total before payment. The confirmation then changes the task: the order has been received, the barista is preparing it, and the customer has a collection number.

I used the prototype to review the complete journey with product owners, from checking the site to giving the customer a collection number.

Move from payment to collection

BPme checkout showing the latte, two extras, payment-card choice, and a Pay Total Amount action — The final review puts the item and payment amount before the action.Original BPme prototype screen

Results

I translated coffee pre-order requirements into wireframes and a clickable prototype for review with BP product owners.
The design covers availability, customization, basket changes, checkout, and collection.

Evidence limit

Original screen designs, wireframes, and prototype flows from the 2019 to 2020 engagement.

Resume and contact

Download resume hello@bowmanstephen.com

A coffee order starts with the right site