WorkData Eat

Making operational information usable

Restaurant managers need to know, quickly, whether their kitchens are healthy: is the equipment working, are supplies in date, what needs attention now. Data Eat brings that information into one place. I designed its structure, flows and wireframes.

Wireframe titled “Equipment watch”: a kitchen floor plan with equipment drawn in place and one area highlighted.
Type
B2B operational tool for restaurants
Year
2021
My role
Product design: research, information architecture, wireframes, accessibility

The operational problem

Operational information arrives from many places and matters at different speeds. Failing equipment needs attention now; a trend in supplies can wait for the week. The design challenge was to hold all of it without making the urgent things hard to see.

Research

The product was early, so research aimed for a foundation: how managers would use the interface, and the market around it. Internal user interviews and market analysis pointed to three needs.

  1. Centralised data

    One place for every restaurant: equipment, people and supplies.

  2. Financial insight

    Managers wanted to see the value the tool created, not only status lights.

  3. Permission levels

    Different tiers of management needed different access.

Structuring the information

Information architecture diagram showing the navigation structure of the kitchen management tool.
Navigation structure, used to talk through flows with the team.

The information architecture separated the overview from the things that need watching — equipment and hygiene — so a manager can move from “is everything fine?” to “what exactly is wrong, and where?” in one step.

From overview to location

Dashboard wireframe: a stacked bar chart of status over time, a latest-updates panel and a kitchen floor plan.
Overview: status over time, latest updates and the kitchen floor plan.
Wireframe titled “Hygiene watch — Raw materials”: a grid of product cards, each with location, accountability and a health-level bar.
Hygiene watch: each raw material with its location, owner and health level.
Equipment watch wireframe with a warning panel open on the right, listing issues next to the floor plan.
Equipment watch: equipment drawn on the floor plan, with open warnings beside it.

Placing equipment on a floor plan turns an abstract list of alerts into something a manager can walk to. The wireframes became the blueprint for the high-fidelity UI developed later.

Colour that carries meaning

In a tool built around warnings, colour is information. It had to work for everyone reading it.

Decision 1

Two warning palettes, both readable with black text

A dark and a pastel palette, each optimised for contrast with black text and tested for colour-blindness.

Why Most of the product’s users were men, who are statistically more likely to have a colour vision deficiency.

Decision 2

Brand colours adapted to AA

One set for backgrounds behind black text, one behind white.

Trade-off Brand guidelines on one side, usability on the other — inclusive without losing the identity.

Swatches: dark and pastel warning and status colours with hex values, plus primary and secondary brand colours adjusted for contrast.
Warning, status and adjusted brand colours.