Restaurant Management System

Introduction
Research and Data Analysis
Information Architecture and Flows
Wireframing
Defining the Visual Appearance
- Full-Color Mockups
Conclusions and Future Work

Introduction

In use at over 7,000 restaurants worldwide, the Restaurant Management System was an unqualified success. However, as it had grown in popularity, it had also grown in features, slowly evolving into sprawling mess of interconnected pages.

Redesigning such a system from the ground up would be no easy task, so we decided to team up with an external team of usability professionals with experience in the industry.

Research and Data Analysis

Before design of the new system could begin, we undertook a project to understand the existing system in detail. Starting with an expert review of the existing system and continuing into interviews with both users and stakeholders, our team produced several documents.

For the this phase of the project, my primary contribution was using the R statistical analysis package to analyze 3 months worth of system access logs.

Graph showing several pages' access data — Breaking down page access by user role allowed us to better determine accurate scenarios for different types of users.

Information Architecture and Flows

Following the research phase, we created an exhaustive list of each conceptual “object” present in the system, as well as the different actions that users would often perform using these.

From this we derived a comprehensive list of potential user workflows.

Chart showing connected objects — An illustration showing the conceptual “objects” identified, and their relationships with one another.

Chart showing labor scheduler flow — An example flow showing the creation of a labor schedule by a general manager, the typical user who would perform this action.

Wireframing

Using the flows as a basis, we were able to build wireframes depicting concepts for a real system.

General list pattern wireframe — General patterns, such as the one shown here, allowed us to ensure consistency across the system.

Labor scheduler wireframe — This wireframe showing the labor scheduler was informed by the flows depicted previously.

Defining the Visual Appearance

With the wireframes complete, we began work on defining a new visual language with which to bring the wireframes to life (one of my key contributions to the project).

This visual language was intended not only for the redesigned restaurant management system, but also for the company’s entire range of products. Our key goals were to create a style that was modern, consistent, and subdued.

Screenshot of color mockup — **Modern**. The new visuals should draw inspiration from modern web applications, mobile device user interfaces, and the like.

Screenshot of system settings screen — **Subdued**. The viewer's focus should be on the content, not on ornamentation. Minimal use of color and heavy use of whitespace focuses attention toward what's important.

Screenshot showing button states — **Consistent**. Pages should adhere as closely as possible established patterns. Particular controls should always look and act in line with expectations.

Full-Color Mockups

The last step of the process was to apply this visual language to several wireframes, demonstrating how it could be applied to the system in a clean, consistent way.

Below is a full-resolution example of one of these mockups, showing the final labor scheduler design.

Conclusions and Future Work

In the end, our team had delivered hundreds of pages of wireframes depicting a redesigned system. Aspects of the redesign are currently filtering their way into the restaurant management product and other products; the labor scheduler as pictured above was implemented in full, and with each day more components based on the design document are implemented.