My Role
I was the motion designer that helped make this product come to life through ambient and interactive animations which helped support the visuals of the UI. All together a total of 50 animations were created for the top 3 teirs of shows. I focused on the following areas: Splash animation, Background animations for show pages, landing pages and Collection backgrounds. The UI animation process consisted of the following areas of focus: Navigation, Focus States, Loading Animations, LSR Images, Transitions, UI Elements upon page load
Splash Animations
The splash animation consisted of sourcing materials from the on-air graphics and modifying it for an intro and a loop. I defined the intro to be set at a time of ~5 seconds with a loop of 5-10 seconds.
Show Art Animations, Ambience and Guidelines
Being that there are over 40 different shows on the ABC network, it was imperative that a visual system be developed to provide visual consistency and improve work flow speed. The approach that I decided to take was the dolly the camera out for ~5 seconds and loop elements in the background and/or foreground. Ambient backgrounds were animated by using atmospheric elements from each show's branding to harmonize with the interface.
Challenge and Opportunities
Loading
Load times, connection speeds and device performance all had to be accounted for. When implementing in the process, we found that there was a slight delay when loading the video. By dynamically displaying the first frame of the video while the video loads in the background, we were able to achieve a more polished experience.
Resolution
These animations were also output for usage on other platforms such as the iPad. Appropriate compression techniques were applied as well as considerations for resolution based on performance, quality and overall experience.
Testing
I partnered with a member from the dev team who provided a slimmed down ios build that allowed me to quickly test each file using XCode. This allowed me to test each individual animation quickly to achieve a proper delivery thus saving on QA efforts.
Additional Key Art Animation