OVERVIEW
I explored the subtlety of different motion models for real-time and non-real time transition for the new SiriusXM mobile app. I mapped out all the motion changes for major flows such as “subscription”, “homepage exploration”, “adding to library” etc.
My Role
Motion Design
Documentation
Team
3 UX/Motion Designers
Client
SiriusXM
Design Timeline
1 Month, June 2023
WHY MOTION?
Motion in UX is the visual behavior of a user experience as it exists over time. It explores the temporal behavior of interface objects during realtime and non-realtime events.
There are four goals when designing motion, and I aimed to follow these goals when I was mapping out motions.
Expectation
Minimize the gap between what the user expects, and what they experience.
Narrative
Narrative is the linear progression of events in the user experience that results in a temporal/spatial framework. How can motion shape and enhance the narrative?
Continuity
Making the user flow as seamless and natural as possible.
Relationship
Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making. how can motion guide users and assist their user experience?
TASK
I mapped out motion design guides for in-page and page-to page transitions with the 4 goals in mind.
“Standard”, “Large in/ Out”, “Press Down”, “Expressive” are 4 primary customized easing curves for transitions in the app. In different scenarios, these easing curves can enhance users’ action and response to the interface.
For non-realtime transitions, I designed these cards to indicate:
The type of easing curve (standard, large in / out, press down, expressive)
The direction of the transition (x or y axis, horizontal or vertical)
The type of transition (Move in / out, fade in / out etc.)
Visual changes (opacity)
