Whitelabel —
Foundation to level up the tech and design stack

Whitelabel is the codename of a project at the Bauer Xcel Media to update all their products through a new base grid.

The Challenge

12 digital publishing brands all suffer from the same problems. They all are based on an outdated web grid, an CMS which needs high maintenance and thus eats up development costs. And last but not least they altogether use a display ad system which deter the user experience of the users by constant advertising popups and full-surface ad campaigns. This was especially seen in the low number of returning visitors.
‍
Just to name some of the 12 brands: Cosmoplitan, Madame, Lecker, InTouch, TV Movie, Autozeitung, …

Combined performance of all twelve brands.

129 Mio.

Visits (IVW 09/20)

290 Mio.

Page Impressions (IVW 09/20)

43 Mio.

Unique Users (AGOF 09/20)

Service

We worked in an interdisciplinary team with colleagues from almost every department, because this project affected everyone. From the product team (development, design and product owner) to the editors up to the brand managers and the revenue team.
‍
My role in this project was to drive the conception of the new grid and the creation of a design system as a base for every brand.

Design Sprint

Problem

In order to start the new project and to solve and test the problems of the old websites, it would take months in everyday business life for the ideas to be evaluated.

information graphic explaining design sprints

Solution

In order to solve our problems quickly and test our early ideas fast, i came up with the design thinking format of a design sprint from the book »Sprint - solve big problems and test new ideas in just five days«.

These five days were super productive and we could test our ideas on the last day with a prototype. We quickly noticed that we were on the right track and made some adjustments based on the feedback afterwards. The design sprint saved us at least 3 months of time.

workshop with ideas scribbled on the wall

Grid Creation

Problem

After we defined our solutions and iterated on them it was time to start with the basic grid creation. In this step I had to make sure that a complex ad systems, the development requirements and the majority of our userbase who visits specific viewport sizes are all well aligned.

Solution

I have analyzed the most frequented viewport size of our ~40 million users and sketched down the responsive behaviour and the breakpoints. All included by the new ad system and the development requirements.

Base Design System

Next I designed a base design system, which takes all special requirements of every brand into account. The brands offer from normal articles to recipes up to horoscope a wide range of different content types. To give more flexibility for the editors in placing and clustering each teaser, I came up with 15 different teaser modules.

First Brand —Madame

As to limited development capacities every product has to stand in line and wait for their update. The lucky first in this row was the brand Madame. Here I took over the creative direction and led the junior designer.