Live event streaming, across 8 platforms, with a white-label twist.

A new client has signed on to our white-label video streaming platform.
The owners of a boxing league, they want 100K+ fans to browse, purchase & watch live fights across any device.
I lead design on this project to build a full suite of white-label apps made to be re-skinned & stream any event, internationally, in multiple languages.
I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Simplestream.
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 product from conception to production.

Tools

Sketch, Figma, Principle, Zeplin.

Context

What is a white-label product? —

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. Instead, 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 framework. Clients are responsible for managing the content and users.

Constraints of an international white-label product with 16+ apps.

Our product serves a wide variety of content to 800.000+ users from all over the globe.

History documentaries, kids cartoons, big telcos... Each client serves a unique video niche and targets a particular audience.

Multi-language support & fully customisable text.

Through our CMS, a client can edit almost any text field on our apps. We also offer support for any left-to-right languages, including English, French, Spanish & Icelandic.

Our design is built to be re-skinned & adapted to each client with minimal effort from developers.

Each client can pick the app's colours, typography and add their copy to the service. The trick is making this change as painless as possible.

We build every module to work both independently from, and in conjunction with, all other modules.

Each client chooses and combines the modules to create a unique app.

Project goals

1

Create a flexible design that works internationally, for multiple languages & with any type of event.

2

Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.

3

Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.

Context: Building for scale —

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.
Our design must be ready to support it.

Key Requirement —

Our design must, with zero changes to the UI, offer an excellent user experience regardless of the event type.

Understanding the users —

We interviewed people of a variety of backgrounds, and more crucially, interested in different kinds of events, from basketball to cycling to opera.

🤔 Key questions we want to answer:

Can the key information be condensed into a single template?

What is the key information a user needs when deciding to watch a live event?

Does does these key information vary depending on the event type? How?

Card Sorting Exercise —

We used a variation of card sorting. We first asked users about their favourite types of events. We then asked them what information they consider most important. Lastly, we asked them to order the information by importance (thus creating a hierarchy).

Outcome of card sorting exercises

💡 Key Insight — Clear information hierarchy for users. Maximum flexibility for clients.

Some information (title, time...) was important across events types while other information was specific to the kind of event (distance and climb on cycling, singers in opera, stadium name in football...)

This insight pushed us to create a design that presents users with a clear information hierarchy (title, subtitle, date...) WHILE giving our clients the ability to override each text field to display whatever information they wished.

1

Any 16:9 image. The thumbnail is visible with no obstructions.

2

Text strings have a clear visual hierarchy and are fully customisable, enabling each client to introduce relevant information for their particular event.

3

A clear banner displays all information necessary to the user.

4

Data and time are fixed and can't be changed; this is due to complex logic that deals with the timezones. Luckily is an essential piece of information for users.

Project goals

1

Create a flexible design that works internationally, for multiple languages & with any kind of event.

2

Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.

3

Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.

Key Requirements —

A fully responsive solution — from small 320px mobiles to 4K TVs.

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.

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.

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

This was key to understand the variety of information required as well as serve as inspiration for our designs.

Some of the competitors we looked into and highlighted interesting approaches.

Exploration —

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

We created high-fidelity designs of several promising concepts.

Exploration examples

A banner to display statuses

After testing, we decided to introduce a new component, a banner that displayed each event’s status by using text and colour. The flag is also easily adaptable to all screen sizes.

Further iterations lead us to an elegant solution. We will use the banner throughout the event flow, both on the event library and the event detail screens.

Challenge

1

Create a flexible design that works internationally, for multiple languages & with any kind of event.

2

Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.

3

Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.

Context —

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

A complex entitlements structure must also be taken into account. Through our CMS, each client is free to create and change their entitlement structure to suit their business requirements.

Key Requirements —

Design clear statuses and entitlements, no matter the structure each client has picked.

Process —

Mapping the complete experience using flows.

Working out the app's flow allowed us to get a clear picture of all the screens that needed to be designed, including error and empty states.

Iterate in the UI and test to create a simple, straightforward & scalable solution

Quick iteration and testing loops allowed us to identify problem areas and test iterations quickly.

We aimed to find a balance between using existing components and creating new ones only when necessary.

Solution

For our users—

Consistent and easy to use across all platforms.

A simple, clear structure that displays key information about any kind of event.

Buy anywhere, watch anywhere (or in selected platforms due to in-app purchase restrictions)

Our design allows users to buy an event on the web and watch it on your TV. avoiding restrictions on in-app purchases)

For our clients—

Works with any kind event

A clear hierarchy & flexible text fields driven by our CMS give each client full control over the content.

Supports any brand

A design that can display any kind of event no matter the branding of our app.

Fully customisable entitlements & restrictions

Our CMS allows clients to choose the entitlement structure that best fits their business goals.

A coherent pattern library (evolving into a design system)

A pragmatic approach that works today — made to evolve as we improve.

What works today —

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

We created documentation to support our decisions and translated them into code in an easily scalable way.

What we will evolve —

This project reminded us that, before we can genuinely start calling this a design system, we must clear design and technical debt.

It did help us create the framework on which to base this evolution and has helped us accelerate the design and development process.

Note: Since the end of this project, we have made a lot of progress moving to a designs system. Stay tuned for more.

Design system features —

68 colour tokens make any rebrand a breeze

These tokens precisely control colour and ensure every client keeps it’s unique brand while remaining accessible

Platform-specific text styles

A design that can display any kind of event no matter the branding of our app.

Cross-platform documentation

A design that can display any kind of event no matter the branding of our app.

Responsive components

Made to fit in whit the rest of the UI, these components are the first to be fully responsive across all of our platforms.

Overall Impact

Since this is a completely new built, we can't compare the data to a previous iteration, but the build and launch has been a resounding success and we are now hoping to attract new clients thanks to our new capabilities

150K+ people

Have watched an event using our platform

45K+
people

Watch every event live

8+ events

8 live events streamed.
+1 new one every month.

Fast launch

Allowing or client to stream their fist fight in just 6 weeks after project kickoff.