Holy Donut Ordering Kiosk

Problem

Nowadays, it is pretty common to be stuck in a long line at a retail store or restaurant, even if the employees are working as hard as they can. This is especially true for small businesses, who may not have the resources to quickly overcome staffing shortages.

Solution

To address this issue, I chose a small business in my hometown— “The Holy Donut” donut shop— to design an ordering kiosk for, which would deliver a fulfilling customer experience, through its ease of use, and human-centered interface.

Heuristic Evaluation of Competitors

Lots of background research was needed before diving into a project of such scale. To begin with, I visited nearby restaurants with ordering kiosks, and chose one restaurant’s kiosk to conduct a heuristic evaluation of. This allowed me to gauge its strengths and weaknesses, and helped to identify useful practices and design patterns my own design would benefit from.

Heuristic evaluation of a competitor's kiosk

Kiosk Requirements

After the heuristic evaluation, I outlined the requirements of a kiosk for my chosen business establishment. This included user interactions, navigation and layout, product categories and menus, and contingencies for payment methods and unintended user actions. I also took into account the physical dimensions and intended environment of such a kiosk, as well as broader considerations of how to delight the customer, and how to benefit the business.

Full Holy Donut product list

Kiosk screen dimensions

Workflow & Wireframes

My workflow takes every possible user interaction into account, and creates a clear system of user actions, instances of feedback, saved changes, and specific states. The wireframes build on this system by providing visual representations of every state this kiosk would need. Menus, product categories, and subcategories are all accounted for. “Drawers” for product customization, system feedback modals, and ordering states are also included.

Workflow

Latte options drawer

Coffee menu

Drink subcategory section

Leave product options modal

Style

The style guidelines include specifics for how color, typography, iconography, photography, and UI elements should be implemented within the kiosk interface. An emphasis on consistency is placed on all style aspects. Icons have the same stroke width, images have the same circular frame, and buttons are predictable in their style and placement. These guidelines would allow a developer to create a working model of the kiosk, without any further instruction from the design team.

Typographic hierarchy

Color palette

Iconography

High-Level Structure

A 10-column grid was used to build the typical layout of full-screen states and drawers. This features ten columns separated by 40-pixel gutters, and 80-pixel margins on the left and right sides. Drawers are six-columns wide, for a total width of 1,040 pixels. I lay out the specific dimensions of the rest of the components in the full process deck.

10-column grid

End Product

Here I apply the rules outlined in the style guide to my wireframes, providing examples of what the actual kiosk states would look like. The final compositions include states for initial category selection, category menus, item customization, order tunnel, and transactions.

The entrance introduces the store’s branding, and features a subtle donut box graphic floating in the background to convey that the kiosk is ready to use.

The initial menu shows the main category options the user can choose from to start their order. The global navigation is introduced here, with more functions added as the user goes further into the interface.

After choosing “drinks,” the drink subcategory options appear. These include coffee, tea and other drinks, and bottled drinks, and are divided between drinks that are made in-house, and pre-made.

The coffee menu introduces the “selection overview,” which keeps a log of all the drinks you have added to your order. Below that, are filters which allow you to narrow down the drink options, and finally, a grid of the store’s coffee drinks.

When a drink is selected, the drink options drawer will open from the right side of the screen. Here, all the information from the menu listing is shown, with a scrollable list of customization options below. Most importantly, the “add to order” button is prominently placed alongside the main product information at the top.

When the user taps the bag button from the menu, a drawer will open from the right, showing a summary of your order. Tapping the “details” dropdown will reveal more information about the items in your order.

Once the check out process has started, you are presented with options of paying with card or cash.

After paying, you have options to receive a printed, emailed, or texted receipt. You also have the option to opt out of a receipt.

Once a selection is made, a thank you message appears, along with instructions to wait for your name to be called in order to receive your order.

Animated Prototype

My animated prototype showcases the navigation between individual states, as well as micro-interactions, and transitions.

Reflection

Overall, this project taught me a lot about the process of user experience design. First, I learned the importance of extensive background research in the design process— it is necessary to understand the constraints and environment of the product you are designing for, inside and out. By considering all the variables for your product at first, you have an exact idea of what assets are necessary to bring your idea to fruition. The product requirements shape the interface workflow, which in turn, shapes the wireframes, and so on.
‍
While you may be excited to brainstorm ideas for the visual style first, it is not practical in the real world. For the first time, I felt that I went about designing a fully-fledged digital product “the right way,” which will guide how I approach my work in the future.
I now know that this is crucial step to the design process that should not be overlooked.

The Holy Donut

Ordering Kiosk

Let's get in touch.