Case study

How we built a motion system for all of Northwind

Northwind builds a workspace app for thousands of teams. We designed the motion behind all three product lines.

Product design

Launches

Templates

Northwind

Northwind

Maya Collins

Head of Product Design

Maya Collins

Head of Product Design

Tomas Cooper

Motion Designer

Tomas Cooper

Motion Designer










Maya Collins

Head of Product Design

Product design

Maya Collins

Head of Product Design

The team

The people
behind the work.

12

product designers

3

products in one system

3

motion leads

40+

launches a year

The shift

From afterthought to first thing on the board.

Before Liora

Motion waited weeks.

01

One designer for three products

02

Launch films animated last

03

Empty states shipped static

04

Handoffs lost the timing

05

Prototypes stuck in static frames

06

Fixes waited for next sprint

Before Liora

Motion waited weeks.

01

One designer for three products

02

Launch films animated last

03

Empty states shipped static

04

Handoffs lost the timing

05

Prototypes stuck in static frames

06

Fixes waited for next sprint

Before Liora

Motion waited weeks.

01

One designer for three products

02

Launch films animated last

03

Empty states shipped static

04

Handoffs lost the timing

05

Prototypes stuck in static frames

06

Fixes waited for next sprint

With Liora

Motion on every surface.

01

One system behind every screen

02

Their team reviews, we build

03

Onboarding moves from day one

04

Timing specs ship with each file

05

First drafts back in a day

06

Tweaks ship the same sprint

With Liora

Motion on every surface.

01

One system behind every screen

02

Their team reviews, we build

03

Onboarding moves from day one

04

Timing specs ship with each file

05

First drafts back in a day

06

Tweaks ship the same sprint

With Liora

Motion on every surface.

01

One system behind every screen

02

Their team reviews, we build

03

Onboarding moves from day one

04

Timing specs ship with each file

05

First drafts back in a day

06

Tweaks ship the same sprint

How we work

From layout to launch film.

01

Sketch the flow

Northwind briefs us screen by screen, and we board the motion next to the layout.

Northwind briefs us screen by screen, and we board the motion next to the layout.

02

Review together

Tomas reviews our passes in one thread, and timing notes land straight on the frames.

Tomas reviews our passes in one thread, and timing notes land straight on the frames.

03

Ship to product

The same motion goes into the app and docs, then into the launch film, all ready on release day.

The same motion goes into the app and docs, then into the launch film, all ready on release day.

Motion tips,
new work and studio
news once a month. No noise.

Motion tips, new work
and studio news once a month. No noise.

Create a free website with Framer, the website builder loved by startups, designers and agencies.