A tablet application streamlining order management for quick-service restaurants by providing a clear overview and way to update order status.

I contributed to the redesign of the Open Dining Network food ordering app, used by restaurants nationwide. Collaborating closely with a dedicated UX designer at Westfield Labs, I led the visual design and made substantial contributions to enhance the overall user experience.

Launched in 2016

Project overview

In collaboration with a small team within Westfield Labs, I redesigned the interaction model and visual interface for the Open Dining Network food order management app that is widely used by restaurants across the country. We crafted a solution that simplifies restaurant operations by streamlining order management and fulfillment.

A key feature of the interface is the Current Orders screen, highlighted by a stack of sliding status bars that, with a tap, seamlessly advance each order to its next stage, accompanied by engaging animations and vibrant primary color accents. The design takes inspiration from the traditional back-of-the-house kitchen ticketing systems found in restaurants, where each ticket symbolizes an incoming order receipt posted on a wall that smoothly glides to the right as line cooks manage the influx of new orders.

The two key views of the app were the items list view (left), and the order detail view (right). The two views are available for both the Active and Pending tabs.

Annotated screens showing the functional details of each component, including the status management, adjust and reject features.

Animated prototype I created in After Effects to demonstrate the interaction of swiping order items to quickly update the status. The background bar behind each item would highlight in the color of the status in which the order was progressing to.

Process sketches

I generated numerous sketches to establish key elements of the application. My partner and I tackled the challenge of deciding the optimal level of order information detail to show for each view. We experimented with displaying 'small', ‘medium’ and 'large' amounts of information, showing only what was relevant for the given screen. Additionally, we navigated the complex task of transitioning between states, exploring several alternate versions before arriving at the final design.

Previous
Previous

Branding and Illustration for Teams at Google

Next
Next

Westfield Smart Parking