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

Pizza Hut
T1 Investment Bank

MY ROLE

UX Motion Design
Illustration
Animation

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)

SOLVING UX CHALLENGES WITH MOTION DESIGN

Setting Expectations

It’s essential to keep the user constantly updated.

By visually representing current status and progress we are providing assurance and making our users aware and confident in the process of using our app.

STATE PROGRESSION FEEDBACK
ONBOARDING PROTOTYPE – FIGMA / AFTER EFFECTS / LOTTIE

Product Illustration

Product illustrations are used to add a human element to the user experience, and to communicate complex ideas in a simplified, attractive way.

LOTTIE / JSON ANIMATION
LOTTIE / JSON ANIMATION
LOTTIE 7kb / JSON 50kb
LOTTIE 9kb / JSON 59kb
LOTTIE 10kb / JSON 98kb

My Role Included:

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

UX 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

Illustration Design System:

Created a series of on-brand characters, props and environments.
Using Design System methodology, I imported these illustrations into Figma and separated them into components & variants etc. for easy scalability between teams and new artwork.
4

Animation Design System:

This is an extension of the Illustration System where I created seamless loops of the illustrations in After Effects allowing new scenes to be created with ease and speed. All Animations were Lottie / JSON ready for export.

Motion Design Framework

UX Motion Design is a fairly new discipline which is why I’m creating a framework which democratises motion as a UX solution so everyone can start thinking in this way.
Starting with the user research and linking that feedback to potential motion design solutions.

A NEW WAY OF SOLVING UX CHALLENGES

View my Brand and Marketing motion graphics portfolio.

Explainers, How Tos, Product Demos, Promotional & Social Ads

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.

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.

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-practices with a distinctive brand point of view which makes them more unique to the products they are used for.