THE MARATHON DESIGN SYSTEM

by Kevin Dreher

ProSiebenSat.1 Digital has many different products that have been continuously developed over the last 20 years. But how can we create new digital interactions between our users and our highlight TV-shows? The answer is our entertainment design system. Implementing such a design system is a marathon — not a sprint. It is key to power through and after some effort you will reach the finish line. No pun intended.

At ProSieben we create entertainment. For that goal we extended traditional design by the new dimension of Narrative. Not only do we need to think about the needs of the user, but we also need to be sensitive to the narrative that the show aspires to create. To combine those aspects and create an interaction between the user and the show, we developed a process called Entertainment Thinking.

We are a dedicated team of Designers and Product Owners that brings digital interaction to our highlight TV-shows. But let us start in the beginning…

The Journey

Before we get started, let us take a closer look at the current state of TV and where we, at ProSiebenSat.1 Digital, are heading with this new process. On the one hand, we act as a traditional media house and are looking into strategies encountering our competitors like Netflix, Amazon Prime, DisneyPlus or local competitors like TV Now. On the other hand, we need to find a new USP. Thus, ProSiebenSat.1 together with Discovery channel, launched the streaming app Joyn that includes multiple live TV channels and exclusives.

Thanks to streaming services the traditional TV industry must compete even more strongly for the viewers’ time. With the increase of content, it is getting harder to engage the user to watch. This new and enhanced competition results in negative impacts for traditional TV channels. One of those being, that we cannot effectively sell advertising slots to our advertising customers.

But traditional TV is far from dead. In fact, over the course of 20 years the percentage of viewers has been steady within 70% of the German population using traditional TV. This can be explained by the live nature of TV — an experience which cannot be created by streaming services. Think about football, the news or certain live shows. TV still has exclusive content that attracts viewers. Paired with a wide adoption of TV technology, the reach of TV is still, and probably will be for some time to come, outreaching any streaming service. Of course such 1:1 comparisons are hard to draw, as the mentioned monetization models are completely different.

But there is another change going on. TV screens are not the main focus anymore. They are slowly turning into being only the second most used screens — being replaced by smartphones. Think about it. When you sit in front of your TV, regardless if you are watching via traditional TV channels or via streaming platforms, you are probably using your smartphone while doing so. And this device demands attention. It is not like a TV set, which can run in the background.

To tackle this problem, we are creating so-called ‘fanworlds’. These fanworlds are digital extensions of our highlight formats. We let viewers of the show participate with the format in unique and customized ways. And in some cases, we even let them influence the outcome.

In summary, we want to create an interaction between traditional TV formats and the viewer, using smartphones as a mediator. Our goal is to enrich the TV experience of every single viewer.

Fanworlds are a big success and will create a tremendous shift in how TV shows work and how they are being created, especially regarding live shows.

The numbers we were able to create were huge. One example is The Masked Singer. Users were able to guess who is underneath the mask, which the host of the show picked up on and commented on. Further, users were able to vote who should be unmasked in each episode. Using a simple app made all of that possible. The concept was successful: we where generating record numbers and it was the most downloaded app in the German ios app store. Using our free ProSieben app is a big step from traditional telephone voting, which normally costs 50 cents for each call.

We also created fanworlds for Germany’s next Topmodel, Big Brother and the Free European Song Contest. And there are more to come.

What has this to do with design systems? Running? Or marathons?

To create even more fanworlds and therefore many more great experiences for our viewers -all while sticking to a budget — we are currently working on our new ‘Entertainment Design System’.

Our structure grew from a lot of different sources, agencies, purposes and creators over the last 20 years. ProSiebenSat.1 contains about 20 different brands and includes about 40 different TV formats with different designs. While diversity normally is a huge plus, it can also lead to challenges.

We have to create content for a lot of different platforms, like iOS, Android, Web, HbbTV, SmartTV. Most designers who come to us do not have experience with each and everyone of these platforms.

When we imagine a design system, we imagine a beautiful component library, with every step being carefully tested to perfection. We imagine a beautiful documentation and description and how all teams are using these components exactly the way they are meant to be used.

And then you wake up and remember you are in a corporate world. Everyone wants to have such a perfect system but no one has time or energy to implement it. Nor are there the financial resources to pay for it. And adding extra chaos, there are various old design systems laying around.

So how do we as designers get started to build a design system that is comparable to Google’s Material Design System? How do we get to the point where everything is well planned out. Where there are guidelines written for everything. Where all assets are in one place. How can you get to a perfect system starting from scratch?

We are caught in a vicious circle. We have no time to design such a system nor to develop it, because we are caught up doing inefficient things. Like building the same teasers repeatedly, since nothing is componentized yet. Without the right system this situation won’t change. So how do we break the doom loop?

At first, we must ignite a spark in the minds of the right people. The people who are going to build and be responsible for the system — including ourselves. If someone is motivated by their own drive, it is always better than getting forced to do something.

It is like training for a marathon: You define a huge, almost unreachable goal, but with a set of small training segments you will get there. Just like getting in shape, creating a design system is hard, it seems much harder than it actually is. The hardest part actually is, that implementing a design system is 80% politics and 20% design.

For the design part, we started by analyzing all components, finding similarities and condensing them down to the most basic set. We therefore created the first basic rules and principles. Even though it is just a button, this first ‘workout’ will help us to get started and stick with our plan. It is only necessary to keep our larger goal in mind.

To reach that, we started to unify and standardize more components. When there was time, we continuously did the same for smaller components. This way we slowly started to outline the system on which we want to build designs on in the future.

For the first defined principle we tried to think big in terms of applying it to a wide range of components. Like in this case: Hover principles for everything that can be hovered.

Working out alone is boring. Same as it is boring to create a system on your own. With this beginning we hope to motivate the right people and find partners. The plan is to develop one component at a time, building them all into one big system.

We do not want to design such a system and then give it over to the devs and stakeholders. With an agile approach in design systems, problems can be identified way earlier than with a waterfall methodology.

We are getting fitter and fitter — slowly but steady. Since we now got a principle and first components, maybe with some guidelines we can start calling it a design system. Especially at this point it is more important than ever not to stop training, to push through and to keep on working on improving ourselves.

One thing to keep in mind

In a corporate world, designers have many more tasks than just designing. We want to find and manage the right people, develop the processes, create habits and change the mindset of stakeholders.

One more tip: Start using the new components in your design already. Do not turn back to the old ones. Even though not everything might be implemented yet, it is useful to have a transition phase. The phase can be a way to show off how cool things could look and function.

We pretend that we have everything planned out, we pretend that we have a complete system, when in reality it is still just a facade. But we are going to get there.

In our case, we now try to design everything as consistent as possible. Over all platforms, ignoring old restrictions and replacing the old stuff — one button at a time. Slow change is better than no change at all. We stick with what we can do and with each fanworld our vision is becoming more and more real.

So, even though we still are at the beginning, we have a solid foundation — and more importantly the right people to create change in a corporate environment.

Short Summary:

● Set a goal and inspire a vision

● Get off the couch and keep running

● It is about establishing the process

● Find training partners that share the vision and can push the vision themselves