Dunckelfeld

Close project

Ultimately Universal


A musical epicenter of the web, home to the artists you love.

Universal Music Group

The Universal Music GmbH, seated in Berlin, is the german daughter of the world's leading music label Universal Music Group.

Concept

The concept – prepping in space camp

Navigating the universe requires a great deal of care and planning. With more than 670 sitemaps, flowcharts, wireframes & co. we prepared meticulously for a successful journey. Three conceptual pillars were especially important for us:

Don't make me think

Our beacon from the start to the finish line. Introduced in the first briefing we always orientated ourselves by this guideline. It represents the necessity in all elements to be self-explanatory and dead easy to use.

Make it modular

To satisfy the branding and interaction demands we had to think modular. It allowed for many elements – in design or code – to be adapted for different needs and thus resulted in amplified efficiency as well as minimal maintenance.

Feels like a native experience

We implemented up-and-coming technologies to guarantee a fast, reliable and immersive user experience that might very well make users think they are using a native app.

wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire
wire

Features

Business before pleasure – we know. Nevertheless we are quite proud of our solutions and their implementation for some of the conceptual intricacies we faced.

Audioplayer

This homegrown goodie is in fact a multifunctional streaming app that let’s you continuously enjoy the music even while navigating completely different parts of the website.

Backstage

You just cannot get enough of your favorite artists? Come then and quench your thirst in the exclusive „Backstage“ area filled with raffles, behind-the-scenes footage, streams and more!

Color shade generator

We love diversity and that is why every single artist page has its unique color: not picked by hand but with the help of an algorithm – which is even cooler if we’re being honest.

Genre selector

It helps you find your favorite tunes. And yeah, it looks quite nice while doing that.

Integrated career platform

A site within a site – the company area supplies you with every bit of information imaginable about Universal Music Germany as an employer.

Intuitive search tool

No knickknacks. Quickly find what you are looking for.

Design

The design – a stellar look

When talking about a design for Universal Music even the sky is unfit to be the limit. Each detail has to be masterfully crafted and blend perfectly with the big picture.

Pitch vs. Final

Design is a process. It is a constant influx of new ideas, decisions and features each with a lasting influence on the initial design. Our task is to transform the resulting complexity of the project into simplicity for the user. Now it’s time for a face-off: pitch design vs. final composition.

Colors & icons

A carefully picked palette of colors and icons is decisive in giving the site its own character.

genre-klassik
Klassik
genre-pop
Pop
genre-rock
Rock
genre-urban
Urban
genre-songwriters
Songwriters
genre-jazz
Jazz
genre-schlager
Schlager
genre-folk
Volksmusik
Familie
genre-hörbuch
Hörbuch

Typography

We put special emphasis on aesthetic, contrast and high readability.

Open Sans
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Regular
Bold
Noto Serif
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Regular Italic
 

Modular structure

We designed a simple and easily understandable user interface that follows the standards of Googles material design. It is extremely modular which gives it great flexibility to accommodate for all kinds of situations.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum dolor sit amet doloris da la ipsum dela loris de ru ipsumusus
Tile Image

Shortcut needed?

Copy exceeding the character limit fades out softly. An elegant solution that makes SEO experts rejoice.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Interaction is key

The flexible action range of the modular tiles lets users quickly mark their favorite artists.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Survival of the fittest

While every tile is structured in the same way they can still fulfill a multitude of roles e.g. showing the charts rank of the respective artists new record.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

Neatly packaged content

The narrow format of the tiles helps to guide the user through long, repeating pieces of information (e. g. tour dates).

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ips
Tile Image

Compact format

When there is not much real estate to work with, a reduced interface with only relevant information keeps things functional.

Lorem Ipsum dolor sit amet de doloris de la ipsum dela loris de ru ipsumun.
vor einem Tag
Lorem ipsum
Tile Image

A flexible arrangement

Image, text and menu: the three core elements of the tile can be positioned freely.

Artist pages

3,400+ artist pages for the past, present and future stars of the music business. Here is where the highly customizable modular design really pays off: It’s just as flattering to Taylor Swift with videos, merch and more on display as to the newcomer with just one hit to show off.

Plug and play

Artist pages are generated automatically with all the content (products, videos, news, pictures etc.) deposited in the backend by the editors.

Empowering storytelling

Standardization does not transfer to uniformity. Editors can freely (re)arrange any artist page and utilize them as a canvas for unique storytelling. Countdowns, raffles and newsletters are only some of the special tools available for that.

default
custom

Development

Advancing technology

Our technically most demanding project to date gave us the opportunity to pursue a variety of new, exciting paths. This helped us in overcoming many complex challenges and in effect creating a highly performant web experience.

Mobile first, worries second

We don’t like compromises, sacrificing possibly vital parts of the experience. Our mobile first approach ensured that we didn’t have to compromise. Every user can enjoy the complete website – without concessions.

Technical delicacies

It’s a site that’s fun to use, feels very light and comfortable. We put in more than a few hours to achieve that. So, let’s take a closer look at what makes this musical epicenter tick:

Progressive web app

Fast, reliable and immersive – it just feels like a native app.

Big, bigger, universal

42 site types, 3,400+ individual artist pages and access to over 38 terabyte of datasets.

Data on demand

The average website has to retrieve its whole HTML source code upon visit. We thought of a better solution: Our „kickstart“ is a super small JavaScript file rocking not even 1MB that dynamically pulls in content and images when required.

Simply secure

With a hybrid set of encryption protocols like Internet Secure System, TLS and VAuth you always surf safely.

Music nonstop

This homegrown goodie is in fact a multifunctional streaming app that let’s you continuously enjoy the music even while navigating completely different parts of the website.

Next level caching

A secret weapon goes a long way when you want to beat the best. We’ll tell you ours: varnish cache. A web-accelerator for dynamic sites with loooots of content.

Development stack

A website so huge has to run like clockwork. There is zero tolerance for weak links. That’s why we used a progressive, modular and component-based system that we built to meet only the highest demands.

React

Pioneering JavaScript library able to create high-end user interfaces

Relay

A very handy framework for building data-driven React applications

GraphQL

Flexible and very precise query language

Webpack

A module bundler that meets the complex requirements of a growing platform

Babel (ES6 und ES 7)

A compiler that lets browsers make the most out of valuable JavaScript

Varnish-Cashing mit VAuth

Easy and quick access to cached content – even for protected areas

Summed up

We would like to say thank you to Universal Music Germany and our backend partners VOTUM and ostec for the wonderful cooperation. An incredible project – condensed into one numerical knockout:

  • 42site types

  • 670wireframes

  • 327design files

  • 65.969unique lines of code

  • 38terabyte of datasets

  • 3.119individual artist pages

  • 1.000.000unique visitors per month