Radio brands – Design system

Radio brands - Design system

Challenge:
How can I ensure that there is one single source which groups all the elements for the 538, Radio 10, Sky Radio and Radio Veronica app?

The job:
The radio apps of 538, Radio 10, Sky Radio and Radio Veronica all consist of exactly the same components. The apps are built exactly the same and are maintained by the same development team. There are too many versions of designs floating around and for some brands there are even designs missing. Since the radio brands often make changes (for example, the logo or brand colors), it is essential to have a system for this.

The job is to create a design system which is build for all the radio brands together. With a design system there is consistency throughout the apps, it will fasten the design process and allows better communication with the development team.

Let's clean this mess!

When I started collecting all the Sketch files, I came across a lot of duplicate designs, but also a lot of designs of certain brands were missing. Radio 10 had designs of almost all their screens, Sky Radio had mainly screens related to promotions and Radio Veronica had almost no designs at all. The first thing I did was to bundle certain screens of all brands in separate Sketch files. I created a sketch file for all homepages, one for all stationpages and so on. This way I got a better overview of what was already available.

After this, I started building the design system. I started with the atoms, which included colors, buttons, icons and text styles. Because the icons for all brands were a mess, I designed new icon sets for all brands.

After all atoms were put together, I assembled all components (molecules and organisms) together per brand. All dimensions were the exact same, the only differences were the atoms (colours, fonts, etc.). I used all organisms in pages and uploaded both all the elements to Zeplin. Because of this, Zeplin not only contains all pages, but the developers can also find the corresponding atoms, molecules and organisms.