Osaka Sushi Kiosk

Experience a seamless ordering system embedded directly into your table. Place your order at your convenience, and when you're not ordering, enjoy an engaging digital placemat featuring captivating animations.

UX/UI

3D

Illustration

Product Design

Re-Branding

Prototyping

Shinto Shrine Cover Image

Timeline

15 Weeks

Project Year

2023

Role

Designer (Individual Project)

Software

Blender, Procreate, Figma, Illustrator, Photoshop

The Final Prototype

The Problem

In all-you-can-eat sushi restaurants, waiting for your server to return can delay your next order, especially when you've finished eating quickly or when one person finishes before the other.

The Solution

An embedded kiosk in the table, allowing you to order sushi as soon as you're ready. When not in use, it transforms into an animated placemat, locking to prevent accidental orders.

Design Process

Research

1

2

Sketching + Planning

Styles + Assets

3

Compositions

4

Prototype

5

Sketching +
Planning

Styles +
Assets

Sketching +
Planning

Styles +
Assets

Sketching +
Planning

Styles +
Assets

To gain a comprehensive understanding of ordering kiosks, I reviewed the systems at Panera Bread, McDonald's, and Crumbl Cookies. While I conducted an in-depth heuristic evaluation of the Panera Bread kiosk, my broader review of all three provided valuable insights into the strengths and weaknesses of various design elements. This research was crucial in identifying what works well and what could be improved as I develop my own kiosk concept.

Below is a preview of my heuristic evaluation, with the full detailed analysis available below.

View Full Heuristic Evaluation

As part of my project, I developed detailed user workflows for ordering through the digital kiosk system. These workflows meticulously mapped out every possible user interaction to ensure there were no gaps or dead ends in the process. This thorough approach not only helped identify potential issues but also made the subsequent creation of wireframes much more straightforward. Not to mention they are a ton of fun.

View the full workflows

View Full Workflows

In order to get a feel for the screen position and font size I created a physical mockup of a small table for two.

The next step in this project involved creating annotated wireframes. Each page of the wireframes includes detailed notes on specific interactions, animations, and guidelines for consistent functionality across the system.

View all wireframes

View All Wireframes

Build Your Own - Step 2

A visual representation of what you are ordering will update live while editing your order
Selected options will be outlined
When there are only two options the left most option (more common option) will automatically be selected
A list will begin to build about your order and what it contains

Two button states

Selected
Unselected

Three toggle states

Off
On
Disabled

3D Elements

made in Blender

Illustrated Elements

made in Procreate

Iconography

made in Illustrator

Sketching +
Planning

Styles +
Assets

Sketching +
Planning

Styles +
Assets

Sketching +
Planning

Styles +
Assets

To gain a comprehensive understanding of ordering kiosks, I reviewed the systems at Panera Bread, McDonald's, and Crumbl Cookies. While I conducted an in-depth heuristic evaluation of the Panera Bread kiosk, my broader review of all three provided valuable insights into the strengths and weaknesses of various design elements. This research was crucial in identifying what works well and what could be improved as I develop my own kiosk concept.

Below is a preview of my heuristic evaluation, with the full detailed analysis available below.

View Full Heuristic Evaluation

As part of my project, I developed detailed user workflows for ordering through the digital kiosk system. These workflows meticulously mapped out every possible user interaction to ensure there were no gaps or dead ends in the process. This thorough approach not only helped identify potential issues but also made the subsequent creation of wireframes much more straightforward. Not to mention they are a ton of fun.

View the full workflows

View Full Workflows

In order to get a feel for the screen position and font size I created a physical mockup of a small table for two.

The next step in this project involved creating annotated wireframes. Each page of the wireframes includes detailed notes on specific interactions, animations, and guidelines for consistent functionality across the system.

View all wireframes

View All Wireframes

Build Your Own - Step 2

A visual representation of what you are ordering will update live while editing your order
Selected options will be outlined
When there are only two options the left most option (more common option) will automatically be selected
A list will begin to build about your order and what it contains

Two button states

Selected
Unselected

Three toggle states

Off
On
Disabled

3D Elements

made in Blender

Illustrated Elements

made in Procreate

Iconography

made in Illustrator