Bally's streaming platform is devoted to local sports. Due to its regional focus, it’s a complex product with extremely location-specific content offerings. The games, teams, and content customers can access depend completely on their home zip code.
The concept of zip code determining content was a known pain point for users that caused a lot of confusion, especially if they signed up for Bally Sports intending to watch a specific team that turned out to be unavailable in their region.
We needed to help Bally’s customers understand the connection between their zip code and the content they could access as early as possible in their experience with the product.
Using insights from user research, we made the following changes to help educate users on the connection between location and content:
Redesigning the website experience for new users
Refining our website navigation
Optimizing user flows in our app and TV experiences
We knew from existing user feedback and customer anecdotes that Bally Sports users didn’t always understand how connected their location was to the content they were able to view.
To gain a more robust, data-backed understanding of this, we conducted user testing. Our research questions were:
Our UX Research team conducted an unmoderated usability study with 20 participants nationwide, with a focus on Bally's website.
We tested 4 unique web prototypes that asked users to confirm their zip codes in distinctly separate places:
An "edit zip code" form field featured on the homepage
A website banner that appeared when users tried to play content or clicked a CTA to get started and sign up
Before viewing subscription options on Bally's packages page
A required form field on the "Create Account" page
Overall, we learned that asking people to confirm their zip code as early as possible in their user journey helped them understand the significant of their location.
Visually, the closer a zip code was to the list of available teams, the better people understood the connection between location and available content.
Providing several options to edit the zip code throughout the process helped people and strengthened their understanding of its importance.
People found the CTA hierarchy on the homepage unclear with too many options.
Should they "confirm" the zip first, or start a free trial, or try to watch content?
It wasn't clear what paths were possible or desirable.
My team and I explored possible ways to get users to confirm their location and to simplify the website’s hierarchy.
These were our initial proposals for the product team:
We could add a CTA within the zip code form field. One of our prototypes tested this, and it performed pretty well.
But this didn’t solve the problem of CTA hierarchy — if anything, it added another confusing element to the page instead of presenting a clear path to users.
We could change the website navigation, consolidating key CTAs in the upper righthand corner and pushing zip code info next to the Bally logo.
Or we could move the list of teams below the CTAs. This might clarify the hierarchy better and strengthen the connection between zip code and teams.
But it didn't look great.
In all scenarios, the downside was that new navigation had a site-wide impact from an engineering perspective, but that might be worth doing if it clarified our offerings to customers.
We could introduce a soft wall to the web experience and display a pop-up modal as soon as new users landed on the website that asked them to confirm their location.
We got this idea from our mobile app, which has a partially gated experience that requires users to confirm their zip code before exploring the app.
One huge advantage of asking users to confirm their location upfront was that it eliminated the need to ask them again later in the process (although they could still edit their zip code if they’d made a typo).
We also saw some benefit in creating continuity across the web and app platforms to emphasize the importance of location.
We presented our options to our product team, and together decided to proceed with solutions two and three: a hybrid version of updated navigation and the pop-up modal confirming location.
First, I led an exploration of the pop-up modal, playing with ways to best communicate why a new user needed to enter their location information.
We had tested a text-only modal in the prototype, and it performed well.
But we’d also learned that users formed clearer mental models if we presented location next to a list of teams they’d be able to access.
This option created a stronger connection between location and content offerings.
But the teams displayed here would be associated with whatever location we pulled based on their IP — an imperfect, often inaccurate way of determining location.
If we pulled the wrong zip code, this option could set users up for disappointment if a team they wanted was displayed at first but became unavailable after correcting their zip code.
The animated map graphic appeared in our app experience, so using it again on the website provided a continuous experience across platforms.
We also felt this option was general enough to apply across Bally’s numerous regions, but still conveyed the importance of confirming location.
We also weighed the pros and cons of using a forced modal that required users to enter their zip code vs. one that allowed users to “skip for now” and verify zip code later.
The forced modal would help us tailor content and improve the user experience immediately, but it had the risk of annoying and slowing down existing users who were, for example, accessing the website on a new device or after clearing their browser cache.
On the other hand, the "skip for now" option wasn't a huge departure from our existing design.
Next, I stress-tested the tweaks we’d proposed in our navigation bar. This revealed a couple of problems very quickly:
Long city names and the new CTA placement were not going to scale across breakpoints. As in, they fell apart almost immediately, particularly in geographic regions with a lot of teams.
Oops. That's not going to scale.
On a larger level, this revealed a weakness in our design process: we typically started top-down, working primarily with our largest web breakpoint and working our way down through graceful degradation.
This was based on early user research about how the majority of users were accessing our product for the first time, and on what sized screen.
If we’d worked with a mobile-first approach, we likely would’ve caught this scaling issue much sooner. But this pushed us to come up with a few additional solutions that would scale—some of which required fewer engineering changes.
In addition to exploring visual concepts, a major task was to comb through our existing user flows for web, app, and TV and highlight all the implications of the design changes we were making.
Web was our top priority since our app already had a soft wall, which meant if someone wanted to browse content on our app, they were already required to enter their zip code.
For the pop-up in particular, we had to consider all possible scenarios for how someone would land on our website.
For example, what if someone's friend was watching a game and shared a link that pointed directly to the video content? That would send the user into a different flow than if they had landed on the packages page or typed in "ballysports.com"
Every possible entry point necessitated updated user flows.
In addition to web, I focused on our TV platform's user flows. Our TV experience already featured a hard wall requiring users to sign in/sign up before browsing any content, so some of our existing user flows asked for zip code confirmation.
In this case, my focus was not on visual design, but on thinking through the most logical point in the user journey to ask for a zip code while balancing engineering constraints based on TV types (for example, subscriping through Apple TV vs. Roku).
After several rounds of discussion with our product team, we landed on the following design solutions:
A redesigned website experience for new users
In our final design, we settled on a pop-up modal that will appear on whatever Bally website page a user lands on first. This solution tailors content from the beginning of the user experience and helps clarify the region-based nature of Bally’s product.
Existing users will ideally do this step just once; once they’ve created an account, Bally products will remember their location.
Users still have the ability to modify their location information, but the CTA hierarchy is improved and nudges users more clearly into paths that get them to the sports content they crave.
An updated visual treatment of our website navigation
Ultimately, we decided on a simplified version of the existing design that addressed the hierarchy issue from our research by minimizing and visually decluttering the location information at the top of our homepage.
An option to edit the location is still displayed, but it's much more subtle since at this point, people will have already confirmed their region.
Optimized user flows in our app and TV experiences
Finally, we re-arranged where in our mobile app and TV experiences users are asked for their zip code.
The final flows bring this step up early to help people create a stronger mental connection between location and content while honoring platform-specific engineering and technical requirements.
