Motion — Experiments
Motion & more
A selection of motion design — Lottie animations, After Effects work and interface motion studies.
01 What motion is forContinuity, feedback and perceived performance. Ornament is the first thing users disable.
Motion in a product interface has a job, and it is a narrow one. It explains what just happened, where something came from, and what is now different. Used that way it reduces the cognitive work of following an interface. Used as ornament it costs performance, delays interaction, and is the first thing users disable.
Continuity
When an element moves rather than cutting, the user does not have to re-orient. Transitions that preserve object identity across a state change are doing structural work — they are the difference between an interface that reads as one continuous space and one that reads as a series of unrelated screens.
Feedback
Confirming that an action registered — a coupon activated, an item scanned, a value saved — is where motion pays for itself most directly. In flows where uncertainty produces retries, a clear confirmation is not a nicety; it prevents duplicate actions and the support load that follows them.
Perceived performance
Well-designed loading and progression states change how long a wait feels without changing how long it is. This matters most on the wide range of devices a mass-market retail app actually runs on, where real performance varies far more than a designer's own handset suggests.
02 Why LottieMotion specified as a reference clip degrades at every handoff and disappears under deadline pressure.
I introduced motion into product work using After Effects with Lottie, most substantially in the Penny app during the redesign and relaunch at REWE Digital.
The practical argument for that pipeline is that it keeps motion under design control without imposing an engineering cost that gets it cut. Animations are authored in After Effects and exported as vector data that renders natively on iOS, Android and web from a single source. That means it scales cleanly across screen densities, keeps file sizes small enough not to affect app weight, and — critically — can be revised by the designer without a developer reimplementing it by hand from a video reference.
That last point is what determines whether motion survives in a product. Animation specified as a written description or a reference clip degrades at every handoff and quietly disappears under deadline pressure. Animation delivered as a file that engineering drops in tends to ship as designed.
- Which of these are from Penny, REWE, Elinvar, or personal exploration? Caption each one.
- For the product pieces — what state was each animation communicating?
- Which of them actually shipped?
