03 / ZURICH BREAD CAFÉ · LAUNCHED
Designing the ordering experience beyond the customer-facing screen.
A restaurant experience connecting branch-based pick-up ordering with the back-office interface used to handle incoming orders. The selected screens follow customers from choosing a branch and building a basket to order confirmation, alongside the tools staff use to manage each order.
CUSTOMER EXPERIENCE ↔ RESTAURANT OPERATIONS
The restaurant set a pick-up-only brief from the start, with no delivery. Customers order ahead and pay when collecting at a branch; staff review incoming requests and manage them through preparation and pick-up.
View launched website ↗Scope
I designed the wireframes and UI across the website, including the ordering experience and the back-office system used when customers place food orders.
Collaboration
I worked directly with developers to translate the designed flows and interfaces into the implemented experience and resolve details during development.
Why it matters
The project required thinking beyond individual screens: the customer journey and the restaurant’s operational workflow needed to connect as one service.
Pick-up ordering
Choose a convenient place to collect before ordering.
Because customers collect their orders in person, the flow asks them to choose a pick-up branch before selecting items. The branch list is designed to show the nearest location first, while addresses and opening hours help customers choose the one that suits them. Their selected branch remains visible as they build the basket, with an option to change it from the menu.
Branch details support the pick-up choice before customers start a basket. The supplied design includes a map placeholder.
View full screenMenu & basket
Choose items without leaving the menu.
I chose to place quantity controls and item notes directly in the menu so customers can build an order without opening separate product pages. The aim was to make ordering simple and quick. The order summary sits beside the catalogue on desktop and follows the items on mobile, while the selected pick-up branch remains visible above both layouts.
Categories, item choices and the running order share the desktop view.
View full screen
The same choices stack into a single-column mobile layout.
View full screenExplore the order summary on desktop and mobile · 2 details
These component details show item quantities, the discount, the total and the next action. Payment timing is stated beside that action: customers pay at the branch when collecting their order.
The summary keeps the total and the next step together.
View full screen
The mobile component keeps the same information and a full-width action.
View full screenCheckout & collection
Separate order submission from branch acceptance.
Working within the restaurant's pick-up-only, pay-at-collection model, I designed a flow where submitting an order sends an unpaid request to the branch. Staff confirm that they can fulfil it before preparing food, reducing the risk of making items that may go to waste. The checkout notice explains the pending review and payment terms, while the contact form and basket summary remain in view.
Contact fields and the order summary sit side by side, with the review notice below the form.
View full screen
On mobile, the explanation comes before the summary and final action.
View full screenMake collection information easy to find.
The confirmation design shows the state after the branch has accepted the order. It brings together the tracking number, pick-up branch, expected preparation time and order total.
A progress line distinguishes receipt, staff confirmation and readiness for pick-up. These milestones mirror the back-office journey from New through Preparing to Ready, so customers and staff follow the same hand-off. A tracking link gives customers a way back to the order.
The confirmed state explains where to collect, what to show at the counter and how to follow the order.
View full screenRestaurant operations
Turn incoming orders into work the team can act on.
I split order statuses only when the next owner or action changed. New brings urgent requests to staff for confirmation or cancellation; Preparing is the kitchen's committed queue; Ready hands the next step to the customer. The Ready state was also designed as the point to start a collection-time SLA and send a LINE or email notification. Branch and status filters let each team open the work relevant to them.
The list provides an overview across branches and order states. Sample records show how different statuses appear.
View full screenKeep outcomes separate for reporting.
Picked up and No-show are distinct end states. With payment collected at the branch and no deposit, an uncollected prepared order is a real risk. Stakeholders wanted to track the pick-up rate for prepared orders, so combining these outcomes into one “closed” state would hide the no-shows. The detail view keeps status actions beside the items, customer notes and pick-up information; cancellation requires a separate reason.
Order content sits alongside the status and collection controls; cancellation is handled separately below.
View full screenMY CONTRIBUTION
End-to-end
DESIGN RESPONSIBILITIES
Whole-site UI · Wireframes · Customer ordering experience · Back-office order system · Developer collaboration
Selected desktop and mobile interface designs, shown with sample customer and order data. The ordering flow shown here supports pick-up at a branch.