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.
Simplestream
7 developers +
me as the designer
3 weeks design +
3 weeks development.
I was responsible for the design of the product from conception to production.
Sketch, Figma,
Principle, Zeplin.
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.
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.
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.
Create a flexible design that works for international users, who speak multiple languages & watch any type of event.
Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.
Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.
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.
Our design must, with zero changes to the UI, offer an excellent user experience regardless of the event type.
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?
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.
.svg)
Any 16:9 image. The thumbnail is visible with no obstructions.
Text strings have a clear visual hierarchy and are fully customisable, enabling each client to introduce relevant information for their particular event.
A clear banner displays all information necessary to the user.
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.
Create a flexible design that works internationally, for multiple languages & with any kind of event.
Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.
Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.
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.
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.
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.
Create a flexible design that works internationally, for multiple languages & with any kind of event.
Enable users to browse, purchase & watch events across 8 platforms & interact through touch, click & TV remote.
Prioritise simplicity & clarity while solving for a variety of event statuses & user entitlements.
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.
Design clear statuses and entitlements, no matter the structure each client has picked.
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.
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)
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 pragmatic approach that works today — made to evolve as we improve.
'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.
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.
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.
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.
© Ignacio Allendesalazar
I have an inbox zero rule so I’ll see your message for sure and, I’ll reply with at least one smiley. I promise.
