Interaction — 09 / 000%EN日本語繁中
Case 09 — HTC — 2016

How might we keep a phone running smoothly without intrusive ads or complicated settings?

Company
HTC
Role
UI / Motion Designer
Platform
Mobile
Period
2016

Overview

Boost+ scans and clears junk files, optimises memory and battery, and locks individual apps behind a key. It shipped for HTC devices and for other Android phones too, which for HTC at the time was the unusual part.

I was the motion designer: storyboard, animation, and the specification that got it built. The wireframes and the experience were worked out alongside a UX designer, and I ran the competitor analysis that decided what we could claim over the alternatives.

Animation, motion design, storyboard. Built with a UX designer, a product manager and the engineering team.
Boost+ logo
Boost+ logo

The brief nobody wrote down

The application already in the market was earning its revenue from advertisements users triggered by accident, and carried possible security holes besides. That is the thing being replaced, and naming it is the whole reason this project existed.

It reframes what “optimiser” means here. The category’s business model was the problem, so the design target was not a faster scan or a prettier gauge — it was an optimiser a person could open without being taxed for a mis-tap. Everything below follows from that.

What it had to do

Manual scan and clean for storage. Memory optimisation. A Smart Boost that runs on its own to hold performance without being asked. A battery optimiser that keeps working on whichever apps the user picked. And a Lock app, so personal data sits behind a key.

Five jobs in one app is a hierarchy problem before it is a visual one: the automatic function has to be trustworthy enough to leave alone, and the manual ones have to be findable when someone does not trust it.

Flat geometry, and water

Where the motion language came from

Clean and minimal, simple geometric elements, flat. I chose geometry so pages could transition into each other rather than cut — and took the motion idea from water, which recycles and takes the shape of what holds it.

That is not decoration picked for looking nice. Boost+ removes junk and reclaims space, so a substance that is cleared away and comes back as something usable is the product’s own argument made visible. The opening scenes are splashing liquid, and the rest of the system inherits it.

The screens

The flows, worked through with the UX designer before anything moved.

Landing page · Junk file notification
Landing page · Junk file notification
Flows08

Storyboard

The motion concept and the storyboard, which is where an animation is actually decided.

Motion concept and storyboard
Motion concept and storyboard

The motion

Animated in code, not played back

The animation was built in code rather than shipped as video, which makes the handoff the hard part: an animation only exists as accurately as it is specified.

So I gave engineering the parameters rather than a reference clip — when each object appears, how long it runs, the speed curve it follows — and tuned against the build. Storyboarding and animating in After Effects is the easy half; the half that decides whether it survives is being precise enough that a developer implementing it cannot misread you.

Home intro
Home intro
Home to scanning
Home to scanning
Smart Boost
Smart Boost
Scan result
Scan result

Outcome

Boost+ was a headline feature for the HTC 10 and was unveiled at the 2016 launch. It reached 4.5 stars and over a million downloads, and users started putting it beside Clean Master, then the most popular optimiser in the category.

Both figures come from the original case and have not been re-verified. Check them before this ships.