Bally Sports
Redesigning the tv app across all platforms
Bally Sports TV APp
Our TV app interfaces have remained unaltered for an extended period. The initial designs were sourced from a third-party provider. It became imperative to undertake a comprehensive reevaluation of our approach to television, aligning it with the newly developed mobile and web applications. This initiative aims to foster a seamless and harmonized user experience across multiple platforms.
Platforms
TV
Services
Planning
Design Audit
Design Direction
UX/UI Design
Design System
Teams
Product Design (me)
Product
Engineering
Motion Designer
Understanding everything Television
When we consider designing for websites and mobile devices, designing for TV is still relatively new. Designing for TV comes with its own set of challenges, like screen size, how far viewers sit from the TV, and the platform itself. TV users typically have a more relaxed, "leaned-back" experience, sitting about 10 feet away on average. Given this, we need to carefully think about the user interface and experience.
One notable aspect of TV design is the various remote controls and game controllers used for navigation. They all have something called a directional control pad. However, compared to mobile or desktop devices, this directional control pad can be limiting in terms of design possibilities.
In product design for different TV platforms, it's important to recognize that each platform has its own unique rules and limits. Understanding these rules helps us navigate the TV landscape, knowing what we can and cannot do on a specific platform. For instance, Roku requires us to include manual input fields. To handle this, I not only had to work closely with the engineers to meet these platform requirements but also studied what our competitors were doing. This helped us find the right balance between custom features and off-the-shelf solutions, making sure we provide a good user experience while staying on track with our project deadlines.
Authentication + Pin & Pair
Authentication presented a unique challenge that required a deep understanding of user behavior. Users typically prefer a seamless experience, especially on remote devices. During our deliberations, we recognized the importance of enabling users with our app to effortlessly connect to their TV, but this posed several technical challenges.
After careful consideration, we opted for the use of QR codes as a sign-in/sign-up method for Bally Sports. This approach also extended to our web platform, which was undergoing a concurrent redesign. QR codes are a familiar feature in most TV apps, giving us confidence that users were already acquainted with this method before we introduced it for mobile app sign-ins.
Another option we explored was allowing users to manually input their credentials on the TV, leveraging the platform-specific mobile app keyboards. However, after consulting with fellow designers, it became apparent that this feature was relatively unknown and could go unnoticed by users. To err on the side of caution, we decided not to rely on this capability.
adapting to platform requirements
Right from the start, we understand there will be some differences in our product, but we're also committed to maintaining a consistent experience. By researching and working closely with others, we make sure we meet platform requirements. This way, we avoid having to fix big problems later on or risk our app getting rejected from specific app stores.
Architecture Exploration For our content offering
At Bally Sports, live content is the cornerstone of our offerings, and it holds the utmost importance. Our customers predominantly seek out our live games, and we are committed to ensuring that this crucial information takes center stage. Nevertheless, it's imperative to address how our content hierarchy adapts during periods when live games and events are not available. To effectively manage this situation, we implement a content prioritization strategy in close collaboration with our Product and Engineering teams.
Understanding our regions
As a Regional Sports Network (RSN), our content is geographically driven, aligning with specific team locations. Access to these teams is determined by your zip code, creating intriguing intricacies. For instance, if you reside in Texas with a zip code not recognized in our database, you may find yourself without access to local teams, despite being situated within the state's boundaries.
The availability of live games is subject to variability, influenced by both geographic factors and the number of teams within a given region. Consequently, we undertook a comprehensive analysis to account for diverse user scenarios, encompassing situations where users may encounter:
Live games available
No live games available
Off-season
National users
Video Playback Capabilities
Each platform presents distinct out-of-the-box (OOTB) elements. Given our project timeline constraints, we explored various approaches to determine the most suitable design strategy. I developed three design options:
1. Option 1: Strictly OOTB, maintaining the platform's default elements.
2. Option 2: A blend of OOTB elements, incorporating our chosen typography and color scheme.
3. Option 3: A comprehensive and fully customized approach, ensuring uniform UI and functionality across all platforms.
During a collaborative team review, I presented a detailed analysis of the advantages and disadvantages associated with each option. Ultimately, we reached a consensus in favor of Option 3, despite the increased engineering effort it would entail, to ensure consistent UI and functionality across all platforms.
OLD vs new
〰️
OLD vs new 〰️
Design system
Through collaborative efforts with fellow designers, we've crafted a dynamic design system that effortlessly adapts to our diverse requirements at the press of a button.
