A roasting tray and a pot on a dark free induction cooktop, seen from above. The touch display sits at the front edge.

Siemens Home Appliances · IXDS

Two appliances went on sale with screens I designed.

From 2015 to early 2017 I designed display interfaces for Siemens home appliances at IXDS, working for BSH. A free induction cooktop and a French-door refrigerator for China made it to market.

Explore the case Ask for the full case

Role: Interaction designer · visual design, animation and design specifications
Timeframe: 2015–January 2017
Context: IXDS Munich for BSH Hausgeräte · Siemens brand
Status: Cooktop and refrigerator on the market · cooktop: Red Dot Best of the Best 2020

The cooktop on the market · Press photo © BSH Hausgeräte GmbH

01 / Starting point

What is left to design when the behaviour is set?

BSH defined how its appliances work, across all of its brands. Siemens brand design had just set a new look for every Siemens screen. In between, someone had to make each device feel like Siemens and describe it so precisely that software and production could build it. That was our job at IXDS.

The new UI language was flat and reduced, with the white tile as its key element and yellow kept for special functions. It had to work on very different hardware: a large touch display set into the glass of a cooktop, small panels on refrigerator doors, rows of LEDs.

I designed the screens for a free induction cooktop and a French-door refrigerator for the Chinese market. I animated how the cooktop display behaves, developed the refrigerator’s operating concept in 2015 with the IXDS team and wrote the design specifications both products were built from. I worked with Johannes Roth and Frederik Dühsler at IXDS.

Cooktopfree induction, touch display · on the market
- Interaction concept by BSH, brand-neutral
- Siemens visual design · design specification
- Usability test with a prototype
- Animations delivered
- LED light line spec
RefrigeratorFrench door, for China · on the market
- Operating concept
- Three value classes
- Design specification
- Production data
- Usability study in China
Early prototypesrefrigerator with touch display
- Click prototypes on the iPad – twelve variants, tap vs. slide

Two products from concept to production. Blue marks my part, grey the work of BSH. · Illustration

02 / Concept to code

The specification was where design became product.

Between an interaction concept and an appliance in a shop lies every state, every colour value and every animation curve. I wrote that detail down, page by page, so that development could build from it directly.

Brief
Display, glass print, light and sensors
BSH product team
Interaction concept
Functions and flows, brand-neutral
BSH
UI language
Flat, the white tile, yellow for specials
Siemens brand design
Visual design
Every screen in the Siemens look, animated
IXDS · me
Specification
Use cases, states, grid, rules, motion
IXDS · me
Production
Software and hardware, built from spec and assets
BSH

4 ⇄ 5 · usability tests → next version

From briefing to production in six steps. The specification is the bridge; blue marks my part. · Illustration

A specification page headed ‘1. EN – Value’: the panel design, a schematic with dimension lines, the LEDs and the touch areas side by side; the designs are blurred — One panel on one page: design, dimensions, LEDs and touch areas. Content blurred. · Original material

The cooktop specification grew to 150 pages and went through 17 versions in 20 months; the refrigerator’s ran to 92 pages. Between versions, usability tests fed back into the visual design.

03 / Cooktop

The display became a map of the cooktop.

On a free induction cooktop, pots can stand anywhere. So the display shows a scaled-down copy of the cooktop: every pot appears as an avatar that moves with it. Tap a pot on the map to focus on it, or simply move the pot to change its power level.

The display mirrors where each pot stands, and in power move the zone a pot stands in sets its level. Abstracted from the design specification. · Reconstruction

BSH’s interaction concept defined these behaviours. My part was their form: the screens in the new Siemens language, the states of every pot avatar, the colours for sensors and warnings, and the animations that connect one view to the next. A map that redraws itself whenever a pot moves only feels calm if each change is shown, not just made.

I animated every transition, from start-up to heating up, boost and moving a pot across the cooktop, for the display and for the cooktop itself. The 15 animations went to development in November 2016.

Hands placing a small pan on a cardboard mock-up of a cooktop, with paper sketches next to it — Cardboard and a real pan: an early mock-up at IXDS. · Original material, image IXDS

Pans and a lid with markers on a dark prototype cooktop; the small display below is blurred — A working prototype with real cookware. Display content blurred. · Original material

How it works

Seven of the behaviours I designed and animated, redrawn from the specification. Where both appear, the cooktop comes first, then its display.

Place it, tap it, slide it.
A pot appears in white on the map; a tap focuses it, the slider sets its level and it turns blue. Back to 0 switches it off.
Reconstruction
Past the highest level: boost.
Slide beyond the top to choose pan or pot boost, or tap the two top segments; the menu stays open for three seconds.
Reconstruction
Free control.
Five zones from back to front. Slide the pot and its level follows; arrows show where it can still go.
Reconstruction
The settings travel with the pot.
Move a pot far and the display asks whether its level and timer should come along. Without an answer, nothing changes.
Reconstruction
Let the cooktop watch the temperature.
The frying sensor works at two fixed spots, the cooking sensor is a wireless probe on the pot. Sensor modes show in yellow.
Reconstruction
Timers that belong to a pot.
A count-up timer on the avatar, a switch-off timer in 30-second steps, and an alarm that a tap ends.
Reconstruction
Active Light.
Two bars of 15 LEDs in the glass echo the display: start-up, a pot placed, focus, pause and residual heat. Blue stands for a power level, yellow for the sensors, white for a pot placed but not heating, red for a warning.
Reconstruction

A frying pan slid across the dark glass of the cooktop, shown in three overlapping positions; a blue light line glows along the edge — The cooktop on the market: a pan slid across the glass, and the light lines in the glass. · Actual interface, press photos © BSH Hausgeräte GmbH

The empty cooktop in a dark kitchen island, with thin blue light lines in the glass and the display at the front — The cooktop on the market: a pan slid across the glass, and the light lines in the glass. · Actual interface, press photos © BSH Hausgeräte GmbH

04 / Refrigerator

One operating logic across three value classes.

A French-door refrigerator for the Chinese market, with four to five compartments, came in three value classes. In 2015 I developed its operating concept with the IXDS team: one interaction logic, from a single control panel on the main door to a display on every compartment, with light that reacts when someone approaches.

Value
One panel on the main door fridge and freezer temperature
Added value
Main door: every compartment – plus a display on the fresh drawer
Premium
A display with sliders on each compartment, woken by proximity

Value · Added valueSame control concept

Plus and minus next to seven-segment digits; the panel wakes when you touch it or open a door. The two classes differ only in the first compartment indicator.

PremiumPlus proximity and light

A sensor wakes the displays and notices a door left open – the handle lights pulse.

Value, added value, premium: more controls with each class, the same logic in all of them. Abstracted from the design specification. · Illustration

The value model has one panel for fridge and freezer temperatures. Added value puts controls on every compartment and a display on the fresh drawer. Premium adds a display with sliders for each compartment and a proximity sensor. Whatever the class, a touch wakes the panel, a press selects a temperature and plus and minus appear only then.

After the concept I designed the screens and wrote the specification, through to the layouts of displays, LEDs and circuit boards and the production data for the electronics. In September 2016 a usability study in Beijing and Guangzhou tested the concept with people.

Stand-by: only a small light
The displays are off.
Touch it or open any door
All displays switch on; the stand-by light dims to 30 %.
Press a temperature – plus and minus appear
The selected compartment is highlighted.
Tap again or wait 18 seconds – done
With all doors closed the panel returns to stand-by after 30 seconds.

Wake it, press it, adjust it. From standby a touch or an opened door wakes the panel; press a temperature and plus and minus appear. · Reconstruction

Stand-by: only small lights
Displays and handle lights are off.
Someone comes closer – the fridge wakes up
A proximity sensor turns on handle lights and displays.
Door open: the handle light dims
Down to about half, while the inside is lit.
Walk away with the door open – the handles pulse
The sensor notices nobody is there any more.

Light that notices you. Approaching wakes the handles and displays, an open door dims them to about half, and if you walk away with the door open the handles pulse. · Reconstruction

The open fresh drawer of a black refrigerator with vegetables and meat, its own small display on the front edge — The fresh drawer with its own display. · Actual interface, press photo © BSH Hausgeräte GmbH

Rendering of a white refrigerator with a person walking past it in a bright room; displays blurred — Door left open: a rendering of the alarm. Display content blurred. · Concept visualisation

A hand holding a ruler against a display on a green circuit board; the display content is blurred — From screen to circuit board: checking a display on the electronics prototype. Content blurred. · Original material

05 / Prototypes

Some questions were answered by tapping, not writing.

At the start, in February 2015, I built clickable prototypes for a refrigerator with a full touch display, twelve variants of rising complexity, to compare tapping and sliding on an iPad. The products themselves were tested on prototypes too. BSH had users try a working cooktop prototype in 2015, and people in China tried the refrigerator’s screens on tablets.

Flow sketches next to a cardboard panel. · Original material, image IXDS
A display in cardboard, tried by hand. · Original material, image IXDS
A page of the refrigerator concept, as presented. · Original material, blurred

06 / What remains

A specification is design work, too.

The free induction cooktop and the refrigerator for China went on sale with the screens I designed. The cooktop won the Red Dot: Best of the Best 2020 ↗; the award went to BSH’s in-house design team.

A black French-door refrigerator with three drawers on a dark stage, its doors lit by thin blue light lines — The refrigerator on the market. · Actual interface, press photo © BSH Hausgeräte GmbH

Reflection

Writing specifications that development could build from directly showed me how much care it takes to get from a concept to a finished product. What I would do differently: treat the specification as a product of its own from day one, with a structure built for change.

Team: Dominik Witzke, Johannes Roth, Frederik Dühsler and others at IXDS
Client: BSH Hausgeräte GmbH · Siemens home appliances
Interaction concepts: BSH · UI language: Siemens brand design
References: Red Dot: Best of the Best 2020, iQ700 induction hob with activeLight ↗

Two appliances went on sale with screens I designed.

What is left to design when the behaviour is set?

The specification was where design became product.

The display became a map of the cooktop.

How it works

Place it, tap it, slide it.

Past the highest level: boost.

Free control.

The settings travel with the pot.

Let the cooktop watch the temperature.

Timers that belong to a pot.

Active Light.

One operating logic across three value classes.

Some questions were answered by tapping, not writing.

A specification is design work, too.

Post-SUV