OVERVIEW

Elevating Product Design through Motion

The value in UX Motion Design lies in the ability to bridge design disciplines and tell stories that aren’t bound to traditional formats and narratives.

Motion allows you to communicate meaning without words, sounds or well worn symbols.

Not only does it let you solve UX challenges more elegantly – it also breathes life and personality into products.

PROJECT

UX Motion Design Overview

CLIENT

Personal

MY ROLE

UX Motion Designer.

About this role

Using animation to simplify complex interactions and solve design problems.

Defining, documenting and implementing the Motion Design System – reinforcing the UX, enhancing interactivity and delighting customers.

I collaborate closely with UX, UI, research, strategists, and engineers to understand our users needs, behaviours and emotions – gathering insight that informs product strategy and motion design.

With the aim to create intuitive, beautiful products people love.

Onboarding Prototypes

As most of my client work is under NDA, I’ve started re-creating the type of projects I’ve worked on. Assets created in Figma, animated in After Effects & exported as Lottie & JSON files.

Role Responsibilities:

1

Principles & Guidelines:

Define and document how the brand, through animation can be used to bring clarity, humanity and inspiration to key moments in the product experiences.
2

Motion Design Systems:

Thinking systematically about creative problem solving to scale motion with speed and consistency through Motion Design Systems, Motion Design Tokens, patterns, best practices, templates and guidance on transitions to help orientate customers.
3

Exploration:

Creating proposals and prototypes - driving projects from concept to iterations and implementation.
4

Deliverables:

Delivering beautiful, high-crafted animations from subtle moments of delight with brand expression, providing context with fewer clicks and capturing attention and highlighting information through usability in motion.
motion design system

UX Motion Design is a blend of graphic design, illustration, animation, film-making and ux/ui product design. This broad focus makes it a versatile problem-solving mechanism.

How Motion Contributes To The UX

Motion with purpose helps customers navigate our products and tells a better brand story.

DELIGHT USERS

Brand Experience

Motion can turn a functional experience into a memorable interaction.
(2kb Lottie / 18kb JSON Animation)

EDUCATE USERS

Comprehension

Motion can provide context without requiring additional action/clicks.
(3kb Lottie / 11kb JSON Animation)

FOCUS USERS

Usability

Motion can capture attention and highlight key UI elements.
(3kb Lottie / 13kb JSON Animation)

Transition Patterns

Often screens are being designed separately and not thinking how they might transition from one to the other which helps the user understand the hierarchy and relationships between the screens.

The four main transition patterns are:
Container Transform
Shared Axis
Fade Through
Fade

Knowing which transition pattern to use within the app journey is key to helping users understand the architecture of the app, from the linear onboarding sequences to exploring deeper into each section.

rob heasley motion design easing animation curves

Easing and Speed

As in the real world – acceleration and deceleration help to make animations feel more natural. Rigid movement without easing can feel hard and clunky.

Typical app durations last between 200ms-300ms depending on the distance they need to travel, 300ms for full screen and 250ms or 200ms for shorter distances. These speedy times help the app feel more responsive.

The Linear animation in the demo shows the hard start and finish which feels unnatural.
The Acceleration which starts at rest and building up speed is used for UI elements animating off-screen where you don’t need to see the end of the animation. The opposite applies for the Deceleration, where the UI element starts off-screen decelerating to a softer stop on screen.
Standard and Emphasise easing curves are used for UI elements on-screen, with the latter emphasising the gradual slowing of the UI element to draw focus to it.

The best motion design systems combine common design best practises with a distinctive brand point of view that makes them more unique to the products they are used for.