Hannah Yeo
Motion that earns its keep or gets cut. Champion of the 160ms ease-out.
- Role
- Motion Designer
- Based
- Singapore
- In the journal
- 19 articles
Scrollytelling with restraint: narrative pages that respect the scrollbar
The production playbook for scrollytelling that earns its keep: a one-pin budget, chapter navigation, a designed reduced-motion variant, and a print-test honesty check.
Sonic branding for studios without a jingle budget
Lightweight sonic identity without the six-figure jingle: the three-moment rule, UI sound principles, accessibility defaults, and one commissioned motif.
Taxonomy is the store: e-commerce navigation done properly
E-commerce taxonomy done properly: category trees that match how customers think, mega-menu rules, facets vs filters, and search as a navigational layer.
Animation is engineering: shipping motion at 60fps
Motion at 60fps is an engineering discipline: compositor-only properties, FLIP for layout changes, when canvas or WebGL earn their weight, and testing.
Comparison pages that convert without lying
Vs pages and plan matrices sit on your highest-intent traffic. Fair-dealing rules, honest asymmetry, and the anatomy of a comparison row people actually read.
View Transitions in production: the practical bits
The View Transitions API after the hype: same-document and MPA transitions, reduced-motion fallbacks, 2026 browser reality, and where motion aids comprehension.
Perceived performance is a design material
Perceived performance is designed, not just engineered: skeletons, optimistic UI, progressive images, zero layout shift and the choreography of waiting states.
The true cost of video heroes
Video heroes feel premium and invoice like it. A cost-benefit ledger in megabytes, milliseconds and attention — plus the poster-frame discipline that makes one worth shipping.
Engineering the 80-millisecond moments
Micro-interactions are where product quality is felt. Press states, instant visual feedback, focus continuity, and testing feel with the same rigour as function.
WebGL on a budget: shipping 3D without melting mid-range phones
Shipping WebGL inside a performance budget: draw-call discipline, texture arithmetic, lazy canvases, device tiers, and keeping the 3D moment under 500KB.
Aspect-ratio systems for editorial imagery
Stop cropping at random. A small, deliberate set of aspect ratios — what each says editorially, how object-fit discipline works, and how ratios survive art direction.
Sonic branding: the layer most products mute
UI sound is brand identity nobody briefs: sonic layers, notification tones, testing with accessibility in mind — and knowing when silence wins.
Designing for the gift buyer, not just the fan
Gift buyers are a different user with different anxieties. Gift finders, delivery-date honesty, card messages and the Q4 checklist done right.
The technical SEO checklist we run before every launch
Our pre-launch SEO checklist became code: crawl assertions in CI, header diffs, structured-data audits — plus the judgement checks that never automate.
Inclusive design beyond the checklist
Inclusive design past WCAG audits: inclusive language in UI copy, cognitive load budgets, SPA focus management, touch targets, and a critique criterion that sticks.
Scrollytelling without the hostage-taking
Scroll-driven narrative can make complex data click — or trap readers in an unskippable slideshow. The pacing, exit lanes and motion fallbacks that keep it honest.
The motion layer of brand identity
Easing is a signature, transitions are grammar. Building a kinetic identity system, exporting it as motion tokens engineers use, surviving prefers-reduced-motion.
Digital merchandising: shelves, not search results
Collection pages are shelving decisions wearing a UI. Sequencing strategy, badges with meaning, photography rhythm, facets that match mental models.
Micro-interactions: the fine layer that makes interfaces feel expensive
Hover, pressed and focus states are where interface quality hides. Our working rules for micro-interactions: durations, material honesty, and when to cut motion.