Remitly Motion System
Senior Product Designer · Remitly
Motion in most apps is an afterthought - something filled in after the real design decisions are made. This project started as a fix for one screen and became the foundation for how the entire Remitly product moves. Two parts: a system built with the Design Systems team to give designers and engineers a shared language for motion, and the home screen as its first real test.
Year
2025
Type
Design Systems / Motion
Team
Design Systems, Engineering
My Role
I initiated this project and owned it end to end. I identified the home screen load sequence as the entry point, made the case for building a system rather than a one-off fix, and partnered with the Design Systems team to build it out. I defined the animation categories, calibrated the spring presets, and wrote the principles. The home screen implementation - skeleton states, content reveal, stagger timing - was mine. I also designed the splash screen loading state that was later adopted across the product.
The Presets
Spring animations, not easings, for anything with physical weight. The presets are named for use – move-in-sm, move-out-lg, appear, disappear – and carry alt names that describe what they actually feel like: whobble, whoosh, whooosh. The naming is intentional — it's a handoff tool. Engineers don't have to translate from a designer's intent – the catalogue speaks for itself.
Move-in animations get slightly more bounce than move-out. Bigger elements move slower than small ones. Exit is always crisper than entry. These aren't rules for their own sake – they're calibrated to how physical objects actually behave, applied consistently so the product feels like one thing.
Move In
| Name | Alt Name | Stiffness | Damping | Mass | Size |
|---|---|---|---|---|---|
| move-in-sm | whobble | 815 | 48 | 1 | < 1/8 of screen |
| move-in-md | whoobble | 504 | 38 | 1 | 1/8 – 2/3 of screen |
| move-in-lg | whooobble | 342 | 31 | 1.3 | > 2/3 of screen |
Move Out
| Name | Alt Name | Stiffness | Damping | Mass | Size |
|---|---|---|---|---|---|
| move-out-sm | whosh | 1218 | 69 | 1 | < 1/3 of screen |
| move-out-md | whoosh | 987 | 62 | 1 | 1/3 – 2/3 of screen |
| move-out-lg | whooosh | 816 | 57 | 1 | > 2/3 of screen |
Appear / Disappear
| Name | Curve | Parameters |
|---|---|---|
| appear | ease-out | 220ms |
| disappear | ease-out | 200ms |
Application
The home screen was the system's first test. Before, the load sequence was a series of uncoordinated appearances – content popping in without timing, without weight, without any relationship to what came before or after it. After, every element has a role in the sequence. Skeleton states hold the space. Content reveals in layers. The transition from waiting to live feels like one thing happening, not many things happening at once.
Impact
Org-wide adoption. The motion system is now active across all seven product orgs at Remitly – Business, Core, Growth, and regional teams. 15 designers and frontend engineers across the organization reference it for both exploration and implementation. I'm the point of contact for usage questions and implementation support, which says more about adoption than any rollout metric.
~$51M send volume increase. Improving time to first interaction on the home screen drove a 0.17% relative lift in OCR for returning customers. The team's model had projected that 0.1% lift would result in $30M in additional send volume in 2026. We beat that target.
Six-figure annual profit impact. Designed a new loading state for the splash screen, now used across all major loading moments in the product. The post-submit experience team adopted the loading visual and motion principles for a flow with load times ranging from 11 to 34 seconds. The result: second time transfer rate increased by 0.15% and transfer cancellations decreased by 0.67% – an estimated six-figure annual profit impact. Likely driven by replacing confusing delivery estimate messaging with a loading experience that gave customers something to trust instead of something to question.