Browse and Select

Intermediate
Intermediate
← Back to all Reference Designs
Description
These two samples illustrate how to present a browsable product catalog with filtering options, product details, related items, and a cart of selected items ready for export.
Scenario

The user is a shopper, a diner, or anyone else interested in browsing, selecting, and acquiring a subset of items from a master collection of items. An attract loop highlights the function and interactive nature of the digital kiosk. Tapping opens a high level catalog view and presents filtering options: ambiance choices for paint selection in the Retail example and meal categories for the QSR (Quick Service Restaurant) Menu Board example. Tapped items reveal a detail screen containing price information and a list of related items. Desired items can be added to a cart and, at any time, the cart can be viewed and cart items can be increased/decreased in quantity or removed. When all selections have been made, the user can then complete their transaction. In the Retail and QSR examples, the completion step is emailing the list.

Screenshots
No items found.
No items found.
Objective

The goal of these experiences are to illustrate best practices in action for presenting a catalog of items and enabling a target audience to browse and filter that catalog, place selections in a cart, and then have the cart processed.

We present both a Retail and a QSR Menu Board example to illustrate how the fundamentals of "Browse and Select" can be adapted for any environment. As a bonus, the former experience is presented in a landscape format, the latter with portrait orientation.

There are many possible cart processing options. The two "Browse and Select" samples create and send an email to the address of the user's choice. However, there are multiple possible approaches. Cart information could be sent to the kitchen for preparation, sent to the warehouse for order fulfillment, sent to a payment processing system for purchase, sent to a printer to create a physical copy, etc. In all cases, the key is preparation of the list in a service-friendly format.

Workflow Diagram
How To Build It + Q&A