← Back to design work

Feel a coating through a screen.

Covestro make soft touch coatings, the finishes you judge with your fingertips. The brief was to turn that into something you could explore on a screen, so only the samples that mattered ever had to ship.

Engagement
IBM iX, ecx.io, with Covestro
Focus
Visual design, interface, research
Role
Lead Visual Designer

The work

The explorer

The Soft Touch Explorer, a rail of controls on the left and the coating photography filling the canvas

Choosing a character

Macro photograph of a reflective screen surface, the metaphor for a slippery coating Macro photograph of an iridescent feather, the metaphor for a silky coating Macro photograph of a dark cracked surface, the metaphor for a velvety coating Macro photograph of a citrus cross-section, the metaphor for a rubbery coating

Slippery

By slippery, think of a screen

Formulation KLIP B 75-9

The four doors

Performance
Formulation
Products
Let's get in touch

Colour is navigation. Each layer keeps its own, on every screen.

Two voices

Velvety

Display, for the one word that carries the feeling.

Lotion resistanceHigh
VOCLow

Quiet, exact, for every specification.

Expert grading

Haptic qualityExcellent
1
5

Covestro grade their own formulations by hand, on a five point scale from excellent down to insufficient. The scale is a component, not a picture.

The file behind it

The work, and my own version of it.

Thirty-four screens. The deck as it went to the client, and a version I never showed one. The foundations and their tokens, the flow, the wireframes, the component library with its variants and states, the decisions and what each one cost, my role, and the case notes.

Open the Figma file

Overview

A property you can only judge with your fingertips.

Covestro make soft touch coatings, the tactile finishes on phone cases and car interiors. They approached IBM iX, where I worked at ecx.io, to translate a physical, felt quality into a digital experience. I ran the research, owned the design, and was the one in front of the client.

The business goal was to stop shipping a case of physical samples to every interested customer worldwide. Let people explore and pre-select on screen first, then send a small number of real samples of the one they chose.

The problem

The brief and the problem were not the same brief.

Until then the only way to evaluate a coating was a case of samples, produced and shipped worldwide. Slow, expensive, hard to scale.

We started by interviewing the client, to separate what they asked for from what the problem really was. The real job was not a catalogue. It was to let someone feel a coating through a screen well enough to narrow the field.

The research

We asked the people who choose.

Coating developers inside Covestro, and automotive interior designers at a car manufacturer, ninety minutes each, some joining in pairs. The question was how they explore and choose a coating today, not what they thought of an idea.

The same shape came back every time. They arrive with a feeling and a requirement, they cannot name a product code, and nothing can be judged until a case of samples arrives. That is the shape the product took: start from the feeling, cross it with the requirement, and get to a shortlist before anything is shipped.

What we ruled out

Sound went first. Video was parked.

Everything was on the table, so the useful work was elimination. Sound went first. Two tones are not far enough apart to tell a silky coating from a velvety one, and a tone is not something you can hold.

Video was the other one, and it survived longer. We parked it for a version two and chose photography, still, with the option of a slight movement later. A still image can be read at a glance and compared side by side, which is what someone narrowing a shortlist actually does.

The creative leap

Touch has no shared visual vocabulary.

I engaged a vision-impaired man from a sheltered workshop and invited him to our offices to run a test. I gave him the Covestro samples, asked him to feel them and say what each coating reminded him of, and to keep it abstract.

What he described was not filtered through how anything looked.

That is where the four metaphors came from. A feather for silky, the bottom of a chocolate bar for velvety, a screen for slippery, a citrus cross-section for rubbery.

The system

A texture reads before a specification does.

Four haptic characters, each locked to a metaphor and a macro image. Slippery to a screen, silky to an iridescent feather, velvety to the bottom of a chocolate bar, rubbery to a citrus cross-section.

Two voices, a display voice for feeling and a quiet voice for fact. Colour used as navigation rather than decoration, so you always know which layer of the coating you are looking at. Two axes, haptic character crossed with performance, so the conversation starts from a shortlist rather than a catalogue.

The whole file, on request.

Foundations and their tokens, the flow, the wireframes, the component library with its variants and states, the decisions behind them and what each one cost, and the case notes. It is client work, so the file is password protected. Ask and I will send the password.

Open the Figma file

← Back to design work

Currently available.

Product ownership and user experience leadership. Evidence based. Across banking, fintech, SaaS and more.

Let’s talk