We have long partnered with DR to redefine and evolve their streaming service, which offers LIVE and on-demand content to the people of Denmark, Greenland and the Faroe Islands.

Client

Danish Broadcasting Corporation

Role

UX Design, UI Design, Design System

Project date

2020

Platforms

Web, iOS, Android, TV

Summary

Over the projects lifecycle, styles and components had become fragmented and stored across several different files, making it difficult to maintain and scale. It was clear we needed to introduce a design system to bring consistency and structure to the product, and give us a baseline to build consistent experiences in the future.

The challenge

The designs were unorganised, inconsistent and difficult to maintain across all the different platforms. The lack of a single source of truth had a direct impact not only on designers, but also engineers and QA teams, who were often confused by what should be built or tested.

This fragmentation resulted in designers spending increasingly more time looking for or rebuilding existing components as well as leading to further inconsistencies throughout the product. Conflicting designs, patterns and styles impacted the development cycle, and often led to frustration and delays.

Solution

Design Audit

I began by reviewing and consolidating all of the existing files, which helped highlight the inconsistencies presented throughout the product. I was then able to begin merging conflicting styles and components into several core platform libraries.

Creating the Foundations

I started with establishing a global library, which contained any shared styles like colours, iconography, logos and anything else that would be used across all platforms. This meant any global changes to branding would then be reflected across all the product, regardless of the platform.

Colour styles used throughout the different platforms

Colour styles used throughout the different platforms

From here I began defining the core libraries for responsive web, native and TV platforms. As responsive web and native shared many styles and components, I decided to combine these into one library. Ultimately this made it easier to maintain and reduced inconsistencies between the platforms. I chose to separate TV components and styles into its own dedicated library due to the fundamental differences from the other platforms

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ce549503-1fb4-40c7-a926-5b9ed0d3a6e4/Components-16.png

Rebuilding