Role

Product Designer

Timeline

9 months

Team

  • 2 UX designers/researchers
  • 1 production designer
  • Product director (client)
  • Panel of representatives from 6 appliance companies

Scope

Field usability research, design system definition, task flows, component development, visual design, development hand off

I contributed to this work as part oF FRESH CONSULTING in 2019.

Problem

The parent company, Middleby, identified waste and inconsistency where 6 subsidiaries were maintaining outdated interface design systems for their commercial appliances individually when they could be sharing a uniform system.
They approached Fresh Consulting for a new design system adaptable across appliances and commercial settings.

1. Field research identified key needs and priorities

My research partner and I conducted 12 interviews and observed 22 professionals on the job to identify opportunities for product alignment, unavoidable constraints, and visual design needs.
Top user insights included:

  • Only display what they need to see or will next do
  • Maintain speed and efficiency by predicting their actions
  • Help them troubleshoot for themselves

The research also included a heuristic evaluation which allowed us to align the team on elements of usability that need improving, where they're lacking, how to improve them, and where to prioritize.

Collected product info from 49 stakeholders across 7 main locations

Conducted field research in 7 states

Identified 6 main shared tasks across all appliances

2. Designing modularly for cross-functional flows

We identified many common flows - from starting a cooking timer to editing a recipe. Engineers had done their best to design each device but there was a lot of opportunity to improve usability.

We started by refining task flows to a common set with modular pieces that work across devices and use cases.

Hand-drawn wireframe sketches showing multiple design ideas for a multi-step cooking timer interface with progress indicators, stop buttons, recipe images, status bars, alerts, and instructions.
Comparison of three oven control interfaces showing manual cooking sketches on the left, a digital combi oven interface with temperature, humidity, fan speed, and timer settings in the center, and a rapid cook oven interface with temperature, time, and adjustable sliders on the right.
Recipe Cook Settings interface showing cook settings for Rapid Cook Oven, Fryer, and Combi Oven with adjustable stages, times, variables, and preview options.
Comparison of user interface wireframes for four kitchen appliances: Rapid Cook Oven, Fryer, Soft Serve Machine, and Combi Oven, each showing multiple screen layouts and settings.

The variants and modules totaled up to designing 200 screens across 26 user flows that covered the full breadth of machine functionality for the 6 companies appliances.

Iterative usability testing

Tested with 3-5 users for each of the 4 main products

Designs scored 1 point higher on average in usability score over original designs

Tasks were 5 seconds faster to complete, on average

3. A uniform design system to last over time

From manual cooking settings to animated timers, a comprehensive design system works for interfaces across many devices. The parent company has provided standards and templates for all companies that are in use today on pizza ovens, friers, combi ovens, soft-serve machines and more!

Control panel interface for manual cooking showing temperature set at 500°F, timer at 3 minutes, heat levels at 100% and 20%, fan level at 0%, with Save and Cook buttons.
Digital timer displaying 3 minutes and 32 seconds remaining for manual cooking with a red cancel button and an orange progress ring.
User interface for sorting recipe order with two columns of recipe items, each with a pizza thumbnail, placeholder text 'Recipe Item Name,' and controls for sorting and saving.
Mobile screen showing a keyboard and a text input field labeled 'Group Name' with a 30 characters max limit in a 'New Group' creation interface.
Digital service menu screen showing counters with cook count, total cook time, magnetron time, total time, power cycle count, and menu repair counter values.
Microwave testing interface with options for Top Heater, Bottom Heater, Magnetron Test, and Blower set at 90%.

Documentation & handoff

Middleby Style Guide webpage showing documentation on card UI components with examples of cards displaying oil quality, filter cook time, specs, line breaks, accordion, and title block styles.
Design specifications and states for various button types including circle utility icons with labels, vertical button groups, and large panel buttons, showing normal, pressed, and disabled states with measurement annotations and usage notes.

I wrote many annotations and rules for the Gitbook style guide (a few pages seen below). It contained all components, buttons, fields, modals, and all of their various states - active, disabled, pressed.