B/R Motion Library Case Study
B/R Motion Library Case Study
B/R Motion System
Case Study
The B/R Motion Library was developed based on the principles and practices of the B/R Motion System.
Using the Motion System as a guide, I built a cohesive set of hand-off-ready micro-interactions and ui animations.
The B/R Motion Library was developed based on the principles and practices of the
B/R Motion System. Using the Motion System as a guide, I built a cohesive set of
hand-off-ready micro-interactions and ui animations.
The B/R Motion Library was developed based on the principles and practices of the B/R Motion System. Using the Motion System as a guide, I built a cohesive set of hand-off-ready micro-interactions and ui animations.
EVP, GM, Bleacher Report: Bennett Spector
Sr. Director Design: Molly Goings
Sr. Product Design Manager: Jay Hutton
Lead Product Design: Marie Shatara
Senior Motion Design: David Hall
EVP, GM, Bleacher Report: Bennett Spector
Sr. Director Design: Molly Goings
Sr. Product Design Manager: Jay Hutton
Lead Product Design: Marie Shatara
Senior Motion Design: David Hall
Launch Screen
Launch Screen
Launch Screen
By working closely with product leadership, we identified key goals for this animation. These goals include decreasing the perceived latency of the app and delighting our users. With these goals in mind, I aimed to create an animation that conveys a sense of progression while maintaining a timeless aesthetic.
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.
In this phase, I brainstormed an animation that would dynamically reveal the B/R logo. During the reveal, I intended to highlight some of the app's functions subtly. After sharing my initial storyboards with the product team, they requested an alternative option that was more minimalistic and used imagery. Below, I document both directions: one in storyboard form and the other in animatics.
Direction 01
In this phase, I brainstormed an animation that would dynamically reveal the B/R logo. During the reveal, I intended to highlight some of the app's functions subtly. After sharing my initial storyboards with the product team, they requested an alternative option that was more minimalistic and used imagery. Below, I document both directions: one in storyboard form and the other in animatics.
Direction 01
In this phase, I brainstormed an animation that would dynamically reveal the B/R logo. During the reveal, I intended to highlight some of the app's functions subtly. After sharing my initial storyboards with the product team, they requested an alternative option that was more minimalistic and used imagery. Below, I document both directions: one in storyboard form and the other in animatics.
Direction 01
Exploratory Phase
Exploratory Phase
Exploratory Phase
Direction 02
Direction 02
Direction 02
After presenting Direction Two, the team quickly embraced the neon light aesthetic featured in the B/R animatic. They felt this style had a timeless quality and resonated well with the B/R brand. With this new direction in mind, I proceeded to animate and brought some exploratory concepts, storyboards, and animatics to life.
After presenting Direction Two, the team quickly embraced the neon light aesthetic featured in the B/R animatic. They felt this style had a timeless quality and resonated well with the B/R brand. With this new direction in
mind, I proceeded to animate and brought
some exploratory concepts, storyboards, and animatics to life.
Animation Phase
Animation Phase
In this phase, I aimed to present a range of fully developed options. In Figure 01, I continued the neon light design and created a simple pulsating light animation. Figure 02 demonstrates a more comprehensive solution that subtly emphasizes the functionality and fan-focused direction of the B/R App, based on the storyboards created at the start of the project. Figures 03 and 04 showcase streamlined, minimalistic approaches to the launch screen. Ultimately, the product team preferred the neon light design. They felt it struck a balance—being neither overly minimalistic nor too complex—while remaining simple and appealing to our audience. Additionally, it effectively communicates progression through the light-up animation.
In this phase, I aimed to present a range of fully developed options. In Figure 01, I continued the neon light design and created a simple pulsating light animation. Figure 02
demonstrates a more comprehensive solution that subtly emphasizes the functionality and fan-focused direction of the B/R App, based on the storyboards created at the start of the project. Figures 03 and 04 showcase streamlined, minimalistic approaches to the launch screen. Ultimately, the product team preferred the neon light design. They felt it struck a balance—being neither overly minimalistic nor too complex—while remaining simple and appealing to our audience. Additionally, it effectively communicates progression through the light-up animation.
Final Design & Handoff
Final Design & Handoff
Final Design & Handoff
With support from product leadership, we began collaborating with stakeholders. Below, I document the refinements to the final execution of the neon light design.
With support from product leadership, we began collaborating with stakeholders. Below, I document the refinements to the final execution of the neon light design.
After receiving approval, I converted the animation into Lottie format to ensure a smooth handoff. I worked closely with one of our developers to troubleshoot and implement the animation in our app. The reference includes some of the information shared with the developer.
After receiving approval, I converted the animation into Lottie format to ensure a smooth handoff. I worked closely with one of our developers to troubleshoot and implement the animation in our app. The reference includes some of the information shared with the developer.
After receiving approval, I converted the animation into Lottie format to ensure a smooth handoff. I worked closely with one of our developers to troubleshoot and implement the animation in our app. The reference includes some of the information shared with
the developer.
Learnings:
Creating this branded launch screen was an incredible opportunity. I collaborated with various teams within B/R, including product design leadership, executives, and developers. Each group offered unique perspectives. Some key takeaways from this experience include:
Learnings:
Creating this branded launch screen was an incredible opportunity. I collaborated with various teams within B/R, including product design leadership, executives, and developers. Each group offered unique perspectives. Some key takeaways from this experience include:
Learnings:
Creating this branded launch screen was an incredible opportunity. I collaborated with various teams within B/R, including product design leadership, executives, and developers. Each group offered unique perspectives. Some key takeaways from this experience include:
. Emphasize usability and purpose to reduce perceived latency.
Pull-To-Refresh
Pull-To-Refresh
Pull-To-Refresh
I was asked to help enhance the pull-to-refresh animation that the team wanted to implement in the latest B/R 2.0 update. This project presented a valuable opportunity to explore real-time animation solutions. I began by creating exploratory animations in After Effects. After receiving approval from the product design leads, I developed a fully realized prototype. Creating the Pull-To-Refresh feature in Protopie provided a hands-on experience and real-time spec information.
I was asked to help enhance the pull-to-refresh animation that the team wanted to implement in the latest B/R 2.0 update. This project presented a valuable opportunity to explore real-time animation solutions. I began by creating exploratory animations in After Effects. After receiving approval from the product design leads, I developed a fully realized prototype. Creating the Pull-To-Refresh feature in Protopie provided a hands-on experience and real-time spec information.
Micro-Interactions
Micro-interactions present an opportunity to create distinctive expressive moments and emphasize individual components. Some areas I worked on include, the action bar, follow buttons, controls, navigation, spinners, and loading states. Working with After Effect and Lottie enabled me to create handoff-ready animations and early-stage user flows that helped shape our final product.
Micro-interactions present an opportunity to create distinctive expressive moments and emphasize individual components. Some areas I worked on include, the action bar, follow buttons, controls, navigation, spinners, and loading states. Working with After Effect and Lottie enabled me to create handoff-ready animations and early-stage user flows that helped shape our final product.
Action Bar
An action bar is a horizontal container housing primary and secondary actions relevant to the current content, providing a way for a user to interact with the social features of the content. Below, I document the exploratory animations of the individual components that comprise the Action Bar and present the final, handoff-ready animations.
Action Bar
An action bar is a horizontal container housing primary and secondary actions relevant to the current content, providing a way for a user to interact with the social features of the content. Below, I document the exploratory animations of the individual components that comprise the Action Bar and present the final, handoff-ready animations.