Index

QR ordering and bill splittingfor restaurant guests.

Mealio home screen and bill split screen on two phones in a restaurant
Role
Product design lead
Platform
Mobile
Team
Ilia Gromov (art director), Alexander Avakian (UX/UI designer)

Overview

Mealio is a mobile app for ordering and paying in restaurants. I led product design from scratch: branding, research and UX/UI.

Problem

Picking dishes from a long menu is slow, and a waiter standing by leads to mistakes. Splitting the bill by hand ends in confusion and wrong sums.

Research

We interviewed diners and mapped their journey. Six segments came out of it, from tech enthusiasts to senior diners.

Six user segments: tech enthusiasts, business professionals, families, senior diners, tourists and students
User segments.

QR ordering

Guests scan the QR code on the bill and enter the table number, and the order moves into the app. The cart shows every dish and price before paying.

Home screen with categories and a QR scanner with a table number field
Home screen and QR scan.
Cart and checkout screens with tips and Apple Pay
Cart and checkout.

Bill splitting

Guests add friends from their contacts, then split the bill evenly or by dish. Each person sees their own share.

Add person screen and split the bill screen with avatars assigned to each dish
Adding people and assigning dishes.

Design system

We built the brand and documented every component and token in Storybook.

Button documentation page in the Mealio Storybook
Component docs in Storybook.