Every game, every goal, every story in one app
Context
Sportsrocket was approached by the National Lacrosse League, which asked us to build native iOS/Android apps that would allow their fans to stream live games, watch highlights, and read articles. Our video distribution platform would power both apps.
The apps were delivered on a very tight deadline with a very simple design. We intended them to serve as templates that could be reused for other clients. However, this approach resulted in numerous usability issues.
Problems
⛓️💥 Inconsistency
Android and iOS were designed by separate teams with no consistent design language.
Android and iOS were designed by separate teams with no consistent design language.
🥱 Static content
The Featured tab had to be manually populated. This added unnecessary effort for editors and hindered viewership for new and relevant content.
The Featured tab had to be manually populated. This added unnecessary effort for editors and hindered viewership for new and relevant content.
🕵🏻♂️ Hard to find games
There was no single destination to find live, past, or upcoming games.
There was no single destination to find live, past, or upcoming games.
💸 No way to pay
Payments could only be made on the web. There was no in-app purchase flow.
Payments could only be made on the web. There was no in-app purchase flow.
Goals
In advance of the next NLL season, we aimed to resolve usability issues and deliver a more compelling fan experience.
❤️🩹 Unify the design
Establish a consistent design and implement NLL's identity across iOS and Android.
Establish a consistent design and implement NLL's identity across iOS and Android.
▶️ Drive viewership
Make it easier to discover new content and watch more of it.
Make it easier to discover new content and watch more of it.
🧭 Get to the games
Allow users to navigate past, upcoming, and live games easily.
Allow users to navigate past, upcoming, and live games easily.
💵 Keep users in the app
Allow users to purchase subscriptions and match passes without leaving the mobile app.
Allow users to purchase subscriptions and match passes without leaving the mobile app.
Learning from a rough start
After our initial release, I carefully studied customer reviews and end-of-season surveys, then put myself in the shoes of these users. I diligently tested the app as a fan of specific teams, noting every negative experience I found.
For example, as a fan of the Buffalo Bandits who missed the last game, the only solutions to find the game were to scroll through dozens of unrelated videos in the "Latest" tab or manually search by name.
Designing an experience on par with top leagues
As the de-facto app for the NLL, users expected it to be on par with apps from other major leagues. Our initial release wasn’t up to par. As a result, users felt neglected.
"Our sport isn't popular enough for a good app?"
(not a direct quote, but a general refrain from users)
(not a direct quote, but a general refrain from users)
To address this, I closely examined other sports apps (NFL, NBA, NHL, Premier League, MLS, etc.), comparing their structure and features to the NLL app.
Common themes emerged such as tabbed navigation and dedicated views for games, scores, news, and stats.
Navigation and discoverability
Based on what I learned, I prioritized updating the navigation to make it easier to find relevant content.
I started by flattening the hierarchy, switching from a hamburger menu to bottom tabs so users could more easily discover content.
The new structure included a redesigned home tab, emphasizing live and upcoming content, an Explore tab that would continually engage users with new content, a dedicated Games tab where users could find every game from every team, and finally a League tab where fans could find detailed standings and stats.
Tailoring the app for dedicated fans
Fans said it was difficult to follow their favorite team amidst the sheer volume of content.
After completing the core experience, I explored solutions to help users tailor the app based on their preferences. These included the ability to set a favorite team, which prioritized content from their chosen team. I also implemented theme colors for each team's hub to further emphasize their unique identities.
Subscribe to watch every game
For season one, payments were only possible via our website. Going into season two, we wanted to meet users where they were by allowing in-app purchases.
One issue we discovered from the website was that users tended to drop off before completing the checkout, usually due to the excessive number of steps required. I streamlined the mobile flows so subscriptions could be purchased with fewer taps. I also optimized how the device keyboard interacted with the interface, ensuring important actions were accessible.
Design philosophy
The original iOS and Android apps were developed separately, a necessity due to limited resources and time. This resulted in an inconsistent user experience between platforms and drastically increased efforts for our engineering team.
To remedy this issue, I designed a platform-neutral look and feel inspired by a mix of Material Design and Apple's HIG that looked consistent on both iOS and Android, then applied NLL's branding.
iOS/Android, phone and tablet
I designed the UI to scale to different screen sizes across iOS and Android devices.
Organic animations
To add polish, I worked in Principle to design slick and delightful animations.
Retrospective
This is the longest project I've worked on, spanning roughly two years. It was very rewarding to have the freedom to identify user issues, prioritize them, and work closely with engineers to implement polished solutions without hard deadlines.
There are a few things I could have done better. Onboarding was one aspect of the experience I planned to account for, but it was never prioritized. We also discussed conducting proper user research and A/B testing. If I worked on this project again, I'd take a leadership mentality and strongly advocate for both.
