How might we make a cover screen say more —clearer feedback, more function, and no more complexity?

Ice View is the successor to Dot View: a smooth, borderless, almost-opaque cover you can read through. Notifications, calls, music, and — the one Dot View could never do — open the camera and take a photo with the case shut.

I led it from the early visual concept through to launch, directing two UI designers. We ran the ideation, picked a direction, and the result was patented (TW D182760). I also did the motion design: the animation prototype that verified the whole operating sequence, and every animation that shipped.

Dot View had 48 points to say everything with. That ceiling is what kept the advanced functions out — and the one that mattered most was that you could not take a photo. Opening the case did not fix it either; it was still awkward.

So Ice View is not a restyle. Changing the front surface from a dot matrix to a translucent pane is what buys the resolution, and the resolution is what buys the functions.

The material cushions the phone and lets content through, and its hard problem is that it is blurry by nature. Transparency that protects well reads badly; transparency that reads well protects less.

We spent a long time with the CMF designer tuning the material properties, looking for the point where the aesthetics and the hardware performance both survive. This is the part of the project that no amount of interface design could have solved on its own.

Reducing the material’s transparency improved legibility and still was not good enough. So we stopped treating it as an opacity problem and started treating it as a wavelength one — which is how the palette ended up neon on white, and mostly red and green.

The reference is traffic sign theory: red and green carry furthest through a degraded viewing condition, which is exactly what a blurred translucent pane is. Picking an interface palette from penetration rather than from brand or fashion is the single decision this project turns on — everything legible on the finished cover is downstream of it.

The clock through the cover — red and green, three levels

Eight flows for the closed state, worked through before any of it was drawn at final quality.

Flow — 01

Flow — 02

Flow — 03

Flow — 04

Flow — 05

Flow — 06

Flow — 07

Flow — 08

The motion principle is smooth deformation used to mark the place on the screen where something just happened. On a surface this diffuse, position is easier to read than detail, so the animation carries the pointing that sharp typography would otherwise do.

The animation prototype was reviewed against the physical mockup rather than on a monitor, because fluency and legibility through the real material are not things a screen can tell you.

New notification

Incoming call

Call back from history

Open the case for detail

Birthday

Halloween theme

The translucent surface is full screen, so there is far more to draw than Dot View ever had. But when the cover closes the system goes to standby, and the memory available is at its smallest exactly when the most is being asked of it.

That constraint shaped the motion more than any aesthetic preference did. Every animation had to be worth what it cost to run in that state.

Eleven weather states, drawn to stay readable through the cover at the size the cover allows.

Sunny

Hot

Mostly sunny

Cloudy

Foggy

Windy

Clear

Mostly clear

Rain

Thundershower

Snow

Function screen — 01

Function screen — 02

Function screen — 03

Function screen — 04

Function screen — 05

Function screen — 06

Function screen — 07

Function screen — 08

Function screen — 09

Function screen — 10

Function screen — 11

Function screen — 12

Ice View shipped to a genuinely mixed reception. Read as an upgrade to Dot View it was well received; read as a case, the complaints were about the hardware and about customisation, and both are fair.

• The hardware complaints were about protection. The case is soft and the surface scratches easily. We took it to the ID designers as input for the next generation rather than something patchable in software.
• Customisation did not ship. The mock-ups existed; the schedule did not. Stating it that way round is the accurate version — it was cut, not omitted.
• Users kept suggesting. The reviews arrived full of specific requests and an expectation of updates, which is a better problem than indifference.

Motion build — After Effects