//

HTC
Sense 7 UI — 2014

[UX Motion Designer]

Goal: Update the design and animation of the iconic HTC Flip Clock with a light-weight typeface and smooth motion.

Kris Cole iterated on the legacy Flip Clock design with italic numerals and a “slice” that bisected them.

He shared them with me in the studio one day, and the project kicked-off organically from there.

I created a 3D stage in After Effects and attempted to rig the transition using as few variables as possible.

My first approach felt clunky. The outgoing numeral, and the incoming numeral were both visible during the transition and that felt too busy for a homescreen clock. We didn’t want to call attention to this movement.

Once we discovered that precision timing would be necessary to pull off the transition, we reached out to our developer teammates in Taiwan to the ideal way to deliver those animation details.

The developer team created an on-device prototype where we could make fine-tuned adjustments and export the new values to code.

I delivered timing (in milliseconds) and easing (in cubic bezier) specifics for the top and bottom half of a digit’s 3D rotation.

That rotation is applied to the outgoing numeral and the incoming numeral. They exchange visibility with precision-timed sleight of hand.