From 2017 to 2019, I had the privilege of being part of the development team responsible for the NBA app created by You.i TV. Initially joining as a software tester, I later transitioned into a motion design role focused on enhancing the NBA app for PS4 and Xbox. At the time of my arrival, the application was already launched, and our team diligently worked on its maintenance and continuous improvement. I was fortunate to collaborate directly with NBA Digital, a division of Turner Sports, alongside the internal teams at You.i, contributing to impactful updates that enhanced the overall app design.
This included periodic updates to the Player Score Bar, to better support the live score updates, and updates for the NBA All-Star and Finals. I was also able to help with adding Live NBA TV functionality, and TV Provider Authenticated sign-in.
Process
Visual, System, and Interaction Design
The project began with the client's design team providing visual mockups of the desired screens. The You.i team, under the leadership of Jake Asiddao, played a key role in developing the initial visual design. Corey Beman, a visual designer from NBA Digital, then continued to carry on the design work throughout the app maintenance phase.
Utilizing You.i TV's patented After Effects workflow, we incorporated motion into the user interface. This involved translating the visual designs shared through Zeplin and meticulously recreating them in After Effects while adhering to the project's existing structure. It was crucial to seamlessly integrate these new elements with the NBA app's established motion style and component system.
Implementation & After Effects
I was initially given the job on the motion design team starting by improving the design of the layout system used to display scores in the video player. Initially, the project would involve me making updates to the details page for NBA league games to ensure scores were properly aligned properly and spaced with the associated teams. At first, the system would cause elements to appear misaligned or unevenly spaced depending on the score of the game.
After that, I was able to continue to help out with other design implementations using the You.i TV After Effects workflow. I was able to apply the NBA motion style to the TVE (Television Everywhere) Flow, and the NBA TV Screens. I was able to further build on them by applying the NBA motion curves and applying unique motion styles to the onscreen elements.
The motion style applied 66% influence of the right, and 44% influence on the left for In Animations, 44% influence of the right, and 66% influence on the left for Out Animations.
