B/R Motion System

The B/R Motion System offers a consistent and thoughtful approach to integrating motion into the B/R App.

By emphasizing motion principles and processes, designers can create freely within a unified voice.

The B/R Motion System offers a consistent and thoughtful approach to integrating motion into the B/R App. By emphasizing motion principles and processes, designers can create freely

within a unified voice.

The B/R Motion System offers a consistent and thoughtful approach to integrating motion into the B/R App. By emphasizing motion principles and processes, designers can create freely within a unified voice.

Motion System Contributors

Lead Product Design: Marie Shatara

Senior Motion Design: David Hall

Motion System Contributors

Lead Product Design: Marie Shatara

Senior Motion Design: David Hall

Motion System Contributors

Lead Product Design: Marie Shatara

Senior Motion Design: David Hall

Inform

Motion shows spatial and hierarchal relationships between elements, which actions

are available, and what will happen if an action is taken.

Inform

Motion shows spatial and hierarchal relationships between elements, which actions are available, and what will happen if an action is taken.

Inform

Motion shows spatial and hierarchal

relationships between elements, which

actions are available, and what will happen

if an action is taken.

Focus

Motion can capture and bring attention to individual elements helping usability of the product.

Focus

Motion can capture and bring attention to individual elements helping usability of

the product.

Express

Motion can give a product a distinct personality, and create unique experiences that engage the user.

Express

Motion can give a product a distinct personality, and create unique experiences

that engage the user.

Movement & Distance

Duration is Distance Travelled

The speed of an animation is crucial for usability. If it’s too fast, it can be difficult to see. Conversely, if it’s too slow, it can feel

intrusive and create a sense of delay for the user. Generally, most animations should have a duration between 100 to 500 milliseconds, depending on their complexity and the distance the element is moving.

animations should have a duration between 100 to 500 milliseconds, depending on their complexity and the distance the element is moving.

The speed of an animation is crucial for usability. If it’s too fast, it can be difficult to see. Conversely, if it’s too slow, it can feel intrusive and create a sense of delay for the user. Generally, most animations should have a duration between 100 to 500 milliseconds, depending on their complexity and the

distance the element is moving.

Transformations

Transformations help users understand a component's various states. They are foundational for both micro-animations and transitions. While transitions manage the change of multiple elements simultaneously, transformations concentrate on individual components. Transitions are sequential transformations.

Transformations help users understand a component's various states. They are foundational for both micro-animations and transitions. While transitions manage the change of multiple

elements simultaneously, transformations concentrate on individual components. Transitions are

sequential transformations.

Transitions

it's important to think about the sequence in which elements appear and disappear, as well as the transformations and

focal points involved.

Transitions are essential for helping users navigate and comprehend the relationships between components. A well-designed transition ensures that users can easily see what has changed and draws attention to new elements. When creating transitions, it's important to think about the sequence in which elements appear and disappear, as well as the transformations and focal

points involved.

Common transitions:

Fig. 01 Container transform, Fig. 02 Shared axis, Fig. 03 Crossfade, Fig. 04 Fade

Common transitions:

Fig. 01 Container transform, Fig. 02 Shared axis, Fig. 03 Crossfade, Fig. 04 Fade

Common transitions:

Fig. 01 Container transform, Fig. 02 Shared axis, Fig. 03 Crossfade, Fig. 04 Fade

Interaction

Product Motion concentrates on two types of interactions: real-time and non-real-time. Each type of interaction requires a

different approach to ideation & execution. Real-time interactions occur when motion behaviors respond instantly to user input.

Non-real-time interactions occur after user input has happened. The approaches for both types of interaction are explored further in the B/R Motion Library.

Product Motion concentrates on two types of interactions: real-time and non-real-time. Each type of interaction requires a different approach to ideation & execution. Real-time interactions occur when motion behaviors respond instantly to user input.

Non-real-time interactions occur after user input has happened. The approaches for both types of interaction are explored further in the B/R Motion Library.

Phase 1: Discovery and Research

Step 2. Align feedback with benefits. Connecting your motion ideas to user needs and goals is the fastest and most effective way

to gain buy-in from your team.

Step 2. Align feedback with benefits. Connecting your motion ideas to user needs and goals is the fastest and most effective way to gain buy-in from your team.

Step 2. Align feedback with benefits. Connecting your motion ideas

to user needs and goals is the fastest and most effective way to gain buy-in from your team.

Step 1. Listen to user feedback. Focus on stages in their journey where motion can enhance the usability of the product.

Phase 2: Ideation to Execution

Motion Design Process

Ideation is guided by insights

It captures the user's attention and helps retain engagement. Communicates a progression that allows reduced perceived latency. Effectively conveys that B/R prioritizes a consumer-focused experience.

Ideation is guided by insights

It captures the user's attention and helps retain engagement. Communicates a progression that allows reduced perceived latency. Effectively conveys that B/R prioritizes a consumer-focused experience.

Ideation is guided by insights

It captures the user's attention and helps retain engagement. Communicates a progression that allows reduced perceived latency. Effectively conveys that B/R prioritizes a consumer-focused experience.

Sketch and Storyboard
Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering.

For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.

Sketch and Storyboard
Storyboards, style frames, and animatics are created to facilitate communication and gain

buy-in from product and engineering. For this specific project, once the general direction was

approved, the execution took elements from multiple storyboards.

Sketch and Storyboard
Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering. For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.

Final Execution and Delivery

Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering.

For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.

Final Execution and Delivery

Storyboards, style frames, and animatics are created to facilitate communication and gain

buy-in from product and engineering. For this specific project, once the general direction

was approved, the execution took elements from multiple storyboards.

Final Execution and Delivery

Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering. For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.

I collaborated with the NCAA product team to design an in-app college bracket tracker animation. It includes two states: a non-busted bracket and a busted bracket. Using the motion process we developed for B/R improved the clarity and structure of the project.

Final Execution and Delivery

Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering.

For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.

Final Execution and Delivery

Sketch and Storyboard
With guidance from the NCAA team, I developed a series of exploratory storyboards. After review, we selected a direction

that included minor adjustments to enhance brand iconography. I then created style frames using the brand's color palette and

incorporated a Fan Foam Finger, which had been featured in other creative materials, to ensure the animation had a more

cohesive feel.

Sketch and Storyboard
With guidance from the NCAA team, I developed a series of exploratory storyboards. After review, we selected a direction that included minor adjustments to enhance brand iconography. I then created style frames using the brand's color palette and incorporated a Fan Foam Finger, which had been featured in other creative materials, to ensure the animation had a more cohesive feel.

incorporated a Fan Foam Finger, which had been featured in other creative materials, to ensure the animation had a more cohesive feel.

Conclusion

The Motion System has established clear boundaries that allow for a unified focus on problem-solving and creating cohesive

animations throughout the app. The outlined creative process streamlines our approach, facilitating collaboration among stakeholders, product designers, and developers during the early phases of Motion Design. In the latest update of the B/R App,

I created custom micro-animations based on the established principles and practices of our Motion System.

The Motion System has established clear boundaries that allow for a unified focus on problem-solving and creating cohesive animations throughout the app. The outlined creative process streamlines our approach, facilitating collaboration among stakeholders, product designers, and developers during the early phases of Motion Design. In the latest update of the B/R App, I created custom micro-animations based on the established principles and practices of our Motion System.

Motion Library