• MSG +

  • Streaming Platform

  • MSG +

  • Streaming Platform

  • MSG +

  • Streaming Platform

  • MSG +

  • Streaming Platform

Madison Square Garden is a Multi-purpose indoor arena. They host MSG+, a premium streaming platform featuring teams like the Knicks and the Devils.

Madison Square Garden is a Multi-purpose indoor arena. They host MSG+, a premium streaming platform featuring teams like the Knicks and the Devils.

Project Goals

Project Goals

Project Goals

- Redefining the way people watch sports, fostering greater user involvement and enhancing the overall viewing experience.

- Stablishing our sport streaming platform as a leading digital destination

- Providing a unique and interactive live game experience that engages users, attracts new audiences and fans, and remains up-to-date with industry trends.

My Rol in MSG+

My Rol in MSG+

My Rol 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.

Effective Communication:

Team of over 60 professionals, navigating through challenges associated with diverse geographical locations (Poland, United States, Ireland, London, and Germany).

Agile & Time management:

Overcame time constraints and communication challenges inherent in a project with numerous devices, tasks, and stakeholders following agile methodologies.

QA & Testing:

Conduct thorough UI quality assurance by comparing the design with the production product and recommending enhancements. One by one thru all platforms.

Flows

Flows

Flows

broken image

Samsung TV

We created numerous flows to comprehend the platform's behavior and distinctions among devices.

Roku TV

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.

broken image
broken image
broken image

Wireframing

Wireframing

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.

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.

Design System

Design System

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.

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.

broken image
broken image

However, in the middle of the project, we had many changes from the client. These changes were specific to each platform, causing chaos at one point. Our solution was to divide the DS into two parts. I was in charge of the first one, so I'll share it here.

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. The main differences lie in the Navigation Bar and the Keyboards; these are usually native and offer limited opportunities for customization.

broken image
broken image

Prototyping

Prototyping

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.

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.

Synthesis & Retrospective

Synthesis & Retrospective

Synthesis & Retrospective

Outcomes & Metrics

The new visuals and functionalities have been met with great enthusiasm. While there are still some bugs to resolve, we have undoubtedly achieved the goal of creating a product with high value in the market.

Additionally, during the first quarter since the release, MSG got more than 500,000 users across all platforms.

What we did well

Working as a team, I was based remotely in Colombia while my coworkers were mainly located in Poland. Practically, when I started my day, they were ending their working hours. Therefore, we set up daily meetings that helped us discuss our progress and address any challenges. As the client mentioned, 'It was beneficial to have people working on the project 24/7.'

What I would improve

In total, we were designing and delivering for 10 devices. The relationship with the developers was sometimes tense because we received numerous changes from the client, requiring us to update our designs frequently. They expected us to freeze the designs, but we were unable to do so. Therefore, I would request more organization with sprint tasks.

Final Design

Final Design

Final Design

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