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:

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.

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.