MSG+
Streaming Platform
Role
Sr. UI/UX Designer
Duration
Sep 2022 - Oct 2023
Platforms
Mobile · web · TV · Tablet
Impact
1M+ Subscribers
Project Goals
MSG+ is a multi-device sports streaming platform by Madison Square Garden — home to the New York Knicks, New Jersey Devils, and more. Built from scratch to deliver flexible subscriptions, interactive live game experiences, and historical content access.
The goal: a unified cross-platform service supporting monthly, yearly, or pay-per-game subscriptions — and to attract audiences who had never engaged with sports streaming before.
Process
Workshops
End to end
Every screen
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
Flow
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.
Wireframe for
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.
Wireframe for
Desktop & 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.
Prototype for
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.
Prototype for
TV & Big screens
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.
Working in 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.
Even though we are designing for TV, there are many differences between them. I was creating experiences for Roku, Android TV, Apple TV, and Samsung TV. I consumed the guidelines for all of those devices and learned the rules in a time record. This was the most exciting DS that I have made in my professional life.
Synthesis &
Retrospective
Outcomes & Metrics
What we did well
What I would improve
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.
More work
you might like
