Live event streams across 8 platforms

We designed and developed a fully responsive white-label events platform across Mobile, web and TV. Built to be reskinned and stream any kind of event in multiple lenguages.

Company

Simplestream

Core team

7 developers + me as the designer

Time

3 weeks design + 3 weeks development

My role

I was responsible for the design of the  of the product from conception all the way to production.

Context:
Create a new module to support streaming of live events.

A new client has signed on to our white label video streaming platform. The owners of a boxing league, they want to launch a suite of apps that allows 10's of thousands of fans to watch their library of content on any device.

Most importantly, they want fans to browse, purchase and watch live fights across devices.

What is a white-label?

Simplestream is a SaaS company building advanced, white-label, video streaming apps.

Working on a white-label means that we don't sell directly to users. Rather, we adapt our software and lease it to media companies for a monthly fee.

Each one of our 16+ clients has their own branded apps based on our common framework. Clients are responsible for managing the content and attracting users.

This is what the iOS app of 5 our clients looks like. As you can see, the home screen looks similar, but the colours, architecture, content and fonts are unique to each client.

Challenges of working on a white-label product

White label software brings interesting challenges to the design process as each component must integrate with any current and future clients with just a couple of lines of code.

Here are some of the things we must keep into account:

  • Our product serves a variety of content and users. Many client serve a unique video niche and target a very specific audience. These include history documentaries, kids cartoons, movies and series, sports...
  • Our product must perform in different languages and locations. Currently, our apps are live in dozens of countries and their local languages including USA, France, South Africa, Iceland, Spain...
  • Each client requires a different mix of features and architecture. Clients include small services (< 500 videos and < 10.000 users) to big TELCOS (5000+ videos and dozens of live TV channels and 60.000+ users.)
  • Our design is built to be reskinned and adapted to each client with minimal effort from developers. Each client can pick the app's colours, typography and add their own copy to the service.

Challenges & requirements specific to the project

  1. Create a flexible design that works internationally, for any kind of event.
  2. Deliver a coherent, responsive design across 8 platforms that supports touch, click and TV remote interactions.
  3. Solve for a variety of event statuses and user entitlements

Challenge 1:
Create a flexible system that works internationally, for any kind of event.

Context

Today we are building our live events module to serve boxing fights. Tomorrow, a new client might need to stream football matches, music festivals, online seminars or opera performances.

🔑 Key Requirement: Our design must, with no changes to the UI, offer an excellent user experience for any kind of event.

User interviews

When building such a wide-reaching app, it's essential to understand user’s expectations and mental models.

To get an idea of the information hierarchy we interviewed people of a variety of backgrounds, and more crucially, interested in different kinds of events, from basketball to cycling to opera.We used a variation of card sorting, presenting different data about a made up event and asking users to order them my importance, thus creating a hierarchy.

💡 Key Insight: some information (title, time...) was important across events types while other information was very specific to the type of event (distance and climb on cycling, singers in opera, stadium name in football...) This insight pushed us to create a design gives the user a clear information hierarchy (title, subtitle...) WHILE giving out clients the flexibility to display whatever piece of information they wished.

Competitor analysis

We visited dozens of event sites, including for sports, concerts, corporate events and others to understand what information they presented to their users.

Solution: a fixed layout with flexible inputs, flexible colours & flexible content.

Clients can toggle fields on and off, write and manually override each string. But, because of technical requirements, the structure of the pattern can't be changed.

We came up with this idea of flexible inputs. We created fields with a set visual hierarchy, but it's up to the client to decide what information to show were.

Working closely with developers we defined min & max sizes of elements to ensure grate performance under any circumstance.

Challenge 2:
Deliver a coherent, responsive design across 8 platforms

Context

🔑 Key Requirements:

  • Our live events module will be built across all of our platforms: iOS, Android, Web, tvOS, FireTV, AndroidTV, Roku & PS4. The user experience must be seamless.
  • Our design must seamlessly adapt to work with 3 different input methods: touch on mobile and tablet, mouse on web and a remote for TV.

Exploration

Always with the requirements of a white-label in mind, (limited colours, set image ratios, fixed text fields...) we explored several design directions.

Solution: a card design responsive from mobile to TV that allows for different modes of interaction.

Our goal was to create a fully responsive design that works from a 320px mobile screen all the way to a 4K TV.

Our solution needed to adapt to the different input methods of each platform (touch, mouse clicks and smart TV remotes.)

Different interaction methods between platforms as well as existing app patterns forced us to implement slight differences in the UI of each platform.

Developing a coherent pattern library (& looking towards developing a design system)

Implementing a cross platform pattern library and moving towards a design system has been one of my missions while at Simplestream.

Events is a whole new module that gave us the opportunity to reuse existing patterns, formalize the use of others, and create some new ones.

Challenge 3:
Solve for a variety of event statuses and user entitlements

Context

Live events have several statuses we needed to accommodate: Live, Upcoming, Ended and Cancelled.

Through our clever CMS, each client is free to create and change their entitlement structure to suit their business requirements.

🔑 Key Requirement: Design event statuses and entitlements so it's clear to users no matter the structure each client has picked.

Mapping the Larger Experience

Working out the app's flow allowed us to identify all possible events and statuses as well as where the event's module sits within the overall app experience.

Introducing a new pattern that

We use statuses elsewhere in our app to mark live programs. Initially we explored reusing existing patterns for our new event module but soon realised that they weren't performing. We needed a completely new pattern.

Solution: a visual style based on clear banners and labels.

Handoff

By keeping developers on the loop we allowed for a pretty smooth process. We use Zeplin for the handoff.

Handoff

By keeping developers on the loop we allowed for a pretty smooth process. We use Zeplin for the handoff.