A coffee order starts with the right site

A customer needs to know whether this site can take a coffee order before choosing a drink.

Three original BPme prototype screens showing the menu, latte options, and collection confirmation — The selected site stays with the menu. Drink options stay with the latte. The confirmation gives the customer a collection number.
Source: Original BPme prototype screens, arranged together for the portfolio

My decision

Check the site first, then keep the drink choices, total, and collection handoff clear.

The design change: I turned research and requirements into a clickable prototype, working with BP product owners in the UK and Australia.
What happened: The prototype gave us a complete journey to review, from site availability to a collection number. The work shown is proposed design, not evidence of a production release.

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

Before someone chooses a coffee, they need to know whether this location can take the order. A closed store, an unavailable menu, or a connection problem changes the whole journey. I worked with BP product owners in the UK and Australia to make those conditions part of the requirements and clickable prototype.

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 flow covers sites without pre-ordering, closed or offline stores, and connection problems. Offsite ordering remained 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.
Source: 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

I kept the selected site visible below the menu so the customer could see where the order belonged. On the drink screen, the latte, its price, its options, and Add to Basket stay together. The person can work through size, milk, blend, syrup, and extra shots without leaving the drink.

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.
Source: 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.
Source: Original BP design flow

Let the customer check and change the order

The basket is a chance to catch a mistake before paying. I brought the drink, extras, quantity, and total together, with controls to change the order. In the removal design, an Item removed message and Undo action stay above the revised basket, so the customer can see what changed and recover it.

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.
Source: Original BPme prototype screen

Finish with a clear collection handoff

The checkout design shows the drink and total before payment. Its confirmation gives the customer a collection number and a message that the barista received the order.

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.
Source: 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 Bowman.stephen92@gmail.com

A coffee order starts with the right site

My decision