$ open project/black-bull-mobile
A Connected Restaurant Ordering Experience
NFC access, a visual digital menu and clear order confirmation—connecting the guest experience with the kitchen and table service.
01 / PRODUCT STRATEGY
Black Bull brings the customer-facing menu and the kitchen workflow into the same product story. The design balances a strong steakhouse identity with the practical details of ordering and preparing food.
A digital menu needs to be easy to browse on a small screen. At the other end of the journey, kitchen staff need to identify the table, read the items and understand the order status at a glance. Both experiences need clarity, but their priorities are different.
Use photography and familiar categories to guide guests through the menu. Make the confirmation screen explicit about what happened. Give the kitchen focused order cards and visible preparation states, keeping the Black Bull identity consistent throughout.
Recognizable categories, visual browsing and a clear confirmation.
Table context, readable order details and visible preparation stages.
02 / THE GUEST JOURNEY
Follow the proposed Black Bull experience in nine steps: arrive at the table, open the menu with an NFC tag, build an order and follow the handoff to the kitchen and table service.
Select an image to open it at full size in a new tab.
Walkthrough images are in English. Kitchen and table-service scenes illustrate the proposed workflow.
The guest takes a seat and finds the NFC tag on the table: the starting point for the digital ordering experience.
The guest holds a phone near the NFC tag, then taps the notification to open the restaurant menu.
The guest selects Dine In and continues to the menu for a meal at the restaurant.
Food photos and clear category labels help the guest browse starters, salads, meats, pasta, desserts and drinks.
The guest browses dishes, reads their details and adds favourites to the order.
Before confirming, the guest checks the items and quantities and adds any special instructions.
The confirmation screen presents the order number, table and summary, making the next step clear to the guest.
In the proposed kitchen workflow, the team receives the order and moves it through New, Preparing and Ready while keeping the table visible.
Once the dishes are ready, the team brings the meal to the correct table, completing the journey from phone to plate.
03 / VISUAL DESIGN
The interface takes its visual direction from the Black Bull brand: a dark backdrop, red accents, condensed headings and prominent food photography. The menu structure stays simple so the visual identity supports the task.
Each category combines an image and a text label, giving guests two ways to recognize where they want to go.
The logo, dark surfaces and red actions connect the welcome screen, menu and confirmation.
Back, Home and Popular actions give the menu recognizable navigation points.
04 / ORDER FEEDBACK
The confirmation screen answers the immediate question: was my order received? A prominent status message is followed by a compact summary and a direct route back to the menu.
A success icon and a written status reinforce the confirmation together.
Order number, table, items and total remain visible for a quick check.
The return-to-menu action keeps the guest from reaching a dead end.
05 / THE KITCHEN EXPERIENCE
The kitchen display shifts the focus from food discovery to order preparation. Its cards group the table, service type, items, quantities and total, with a visible action for the next preparation stage.
Identify the order and start preparation.
Keep work in progress easy to recognize.
Show when the order is ready for service.
Distinguish finished orders from active work.
Text labels accompany the status colors, so the meaning of each stage is written out as well as visually highlighted.
06 / DESIGN + DEVELOPMENT
My role brings product design and front-end development together. The project is an MVP in development; this case study presents the interface direction and intended restaurant workflow.
Figma supports the screen layouts, visual hierarchy and mockup presentation. The guest and kitchen views share an identity while serving different tasks.
Next.js, React, TypeScript and Tailwind form the project stack. The implementation focus is a consistent, responsive interface across the menu and kitchen views.
Test menu discovery and order clarity with guests and staff. Check keyboard access, contrast, touch targets and the handoff between order submission and kitchen status.
07 / PRODUCT THINKING
The central design lesson is that the customer journey continues beyond the menu. A clear confirmation helps the guest understand what happened, while a clear kitchen card helps the team decide what to do next. Designing both sides makes the handoff part of the product.
KEEP EXPLORING
Personal finance · Product design + front-end
Explore the restaurant menu project
