Revolutionary Multi-Device Sports Streaming by Madison Square Garden: Flexible Subscriptions, Interactive Live Games, and Over 1 Million Subscribers.
Project Goals
Redefine sports streaming by establishing our platform as a premier digital destination, enhancing viewer engagement with unique, interactive live game experiences, and staying ahead of industry trends to attract and captivate new audiences and fans.
Problem
Lack of a multi-device subscription platform for streaming live games, accessing past game records, and offering a betting system for sports teams such as the New York Knicks, Devils, and others.
Solution
Developing MSG+, a multi-device platform offering a wide range of sports services, allowing users to enjoy their favorite sports through monthly, yearly, or pay-per-game subscriptions.
My Role in MSG
Discovery & Artifacts:
Led discovery efforts such as research, workshops, user persona, customer journey mapping, wireframes, mockups, and prototypes.
Multiplatform Design:
Orchestrated the design and delivery for diverse platforms, including Android, iOS, Web Responsive, tablets, Roku, Apple TV, and Android TV.
Design System:
Established the MSG+ design system, defining style guides, documentation, and facilitating seamless handoff with developers and the product team.
User Flows
We created numerous flows to comprehend the platform's behavior and distinctions among devices. For example, Samsung allowed users to log in/sign up through a QR code or web URL. However, Roku had certain limitations, one of which required users to log in/sign up within the app.
Wireframing Mobile
We created wireframes for all platforms, accompanied by wireflows to aid stakeholders in understanding the connections between screens and user interactions. The main challenge was stepping out of our comfort zone and recognizing that even within mobile platforms, significant differences exist. We needed to consider that designing for Android differs from iOS, and it is also distinct from mobile responsiveness.
Wireframing Web & TV
It was also essential to highlight the differences between web and TV devices. For TV, we needed to create wireframes for Roku TV and Samsung TV, after which the stakeholders included Apple and Android TV. The wireframing process was extensive, but it yielded valuable insights and results.
Prototyping Mobile
Here are some of the screens we developed for this app. The most challenging ones were "Select a Plan" and the flow for connecting your TV provider. The former posed challenges due to specific client requirements, necessitating numerous iterations by our team. The latter was challenging because we depended on an external provider, requiring multiple meetings to understand the intricacies of these interactions.
Prototyping TV
Designing for TV was an incredibly rewarding experience. It opened up a whole new world of considerations, such as interactions with the remote control, ensuring compatibility with various external light sources reflected on the TV, and optimizing designs to accommodate limited memory constraints. Despite these challenges, it was a thoroughly enjoyable process from start to finish.
Creating the Design System
I was a guest speaker discussing Design Systems for TV. If you'd like to watch the video and go through my experience, simply click here.
Design System Challenges
One of the biggest challenges in this project was creating the Design System. We were working with many platforms: Web Responsive, Android, iOS, Tablet, Roku, Apple TV, Android TV, Samsung TV, plus the different breakpoints or resolutions. Initially, we created just one DS for all of the platforms.
Synthesis & Retrospective
As a disclaimer, I have permission to share these screens, and I'm not disclosing any confidential information. MSG+ is already in production, and if you are located in the United States, you can start watching on this platform using any device. Additionally, I would like to acknowledge and express my gratitude to the amazing and talented individuals who contributed to this process, including Juliana, Mateusz, and Martyna.
