C More design system
Designer focused

C More is one of Sweden's most popular streaming services and features a lot of original content. Now owned by Telia it is one of the biggest players in the Nordics with a service that covers mobile apps, responsive web and big screen TV.

By Martin Skybrand, Senior Art Director & Co-Founder

Building a design system

My experience from design systems in the past is that once it gets complicated, people start breaking the links to the system, making variations or just stop using it all together. Therefore I wanted to make something simple and robust without too many dependencies and relations. By writing and describing the principles of the design system I wanted to make sure that anyone could use it or help develop new features or components.

Starting out

When I joined the C More team the design was fragmented and development was moving slowly in different directions. There had been earlier efforts to create a design system but because no one had the chance to work with it full time it was put on hold more than once because of more important tasks. I was the first one to be able to give it all my attention which was something that payed of.

My process of setting up a design system

  • Going thru and mapping all design in the product
  • Interviewing designers for needs and expectations
  • Finding patterns - Deciding what to keep and what to throw away
  • Filling out the blanks - What could be improved
  • Trying out a new look based on what's already there
  • Launching the first components
  • Evaluating and getting feedback to see what works and what doesn't
  • Sketching out and distributing components
  • Evaluate and repeat

First level of the system is something all platforms use. It's things like the radius on corners, type scale, defined and named colors, function appointed icons, buttons, input fields and other small components. The idea here is to keep it universal and then have platform specific design libraries with more complex components.

A design system is a tool that caters for all designers in a team and should give them confidence and speed when building a digital experience.

Learnings

It's been a long process getting from start to an implemented design system. Every company has their own set up and culture so it's important to be susceptible to the needs of the team and organisation.

Involve people

You are building a tool for other designers so it is crucial that they have a chance to speak their mind about what you are building. Otherwise the risk is that some will not use what you build and then the idea of a system is broken.

Talk about it

Use what forums you have to get people to buy into it. Speak to developers and stakeholders and to anyone who wants to listen. Talk about the benefits of having a system and the agony of being without.

Sell it

Make pretty concept sketches and animations to sell the idea and to get other people on board. It's also easier to let other people advocate for the design if they have something inspiring to show.

Set of resources

Managing a design system is a lot of work and can't be done as a side project. You need someone dedicated to the task or it will start slipping.

Ultimately a design system is like any product. It needs resources, attention, regular updates and feedback from its users. Without it, it will stop being relevant and slowly turn into an expensive artefact.

Big screen player design based on system components