Google x Sports
Google OneBox is the best in delivering sports information, but falls short in allowing users to engage with shareable moments from live sports casts. Improving the user experience could seamlessly enable sports fans to find and share highlights.
6 Months
Y — 2019
Role: Lead product designer, lead technical animator
Discovery
When looking for game scores or general match-related information, there's currently no engaging way for users to share the sought-out information. Allowing users to interact and share game related info would increase CTR on related Onebox content.
Fans are multi-tasking while watching live sports
During a live event, 72% of users are looking up stats, using social media, watching another game on a separate device, betting, and managing fantasy sports. During live interviews, it was found that 46% of fans were using social media or a messaging service to interact with others while watching a live sports.
Discovery & process
The easiest method was to add a share chip to Onebox. This chip would trigger a dynamic animation related to the live moment in the game when clicked. We would then check the CTR to determine if the share chip is engaging or if users mainly connect it with sharing Onebox info. Due to significant constraints in changing Onebox's current state, this appeared to be the most suitable.
Comprehending the approach for delivering these animations was crucial, posing numerous constraints due to the urgency of calling and delivering a complete dynamic animation. After pinpointing the method to streamline this process, our attention could shift to the design and animation outputs.
During the animation export phase, we encountered several issues with export code. This prompted a review of the export method to identify improvement, aiming to enhance our exports and prevent future bugs. I collaborated with Hernan Torrisi, the creator of Bodymovin, to determine better animation outputs during the export process.
Design
The design process primarily revolved around developing templates that could cater to numerous score types, encompassing players, various types of scores, and more.
Score templates
Single template
The template layout is flexible and controls the game results of all 32 NFL teams based on the designated data pulled from the live event.
Pre score
Pre score transition
Score celebration
Updated score
Post celebration transition
System Architecture
The created list for supporting a dynamic structure of animations associated with the appropriate data during a live sporting event.
Designing scorecards
Once scorecard structure and template were created, we were able to focus on the finalized design and animation portion. I art directed each NFL character which was then drawn and rigged for animation by Sportsmanias with approval from NFLPA.
Delivery
The final result was a highly robust dynamic score card and animation that was ready for users to share as a sticker to Snapchat or SMS messages.
