Website design and branding for the popular student competition run by Stiftung Warentest


Jugend Testet


Creative Director
Lead Art Director




Stiftung Warentest is an organisation that compares goods and services in an unbiased way. Their child company, Jugend Testet is a competition for young testers, offering prizes when youth take part in their comparisons.

The website was very outdated and lacked a solid structure, making it confusing to navigate and not so appealing to a younger audience. They wanted a brand refresh that would be easily updatable on an annual basis. So my role was to create an initial creative and art direction style for two or three pages that would be handed over to a Designer to complete.

Initial thoughts

After looking at their existing website, it was clear there were multiple issues with the overall layout; misaligned content showed how out of date the build was, the confusing hierarchy and relationship between items on the page, the massive logo, the unusually positioned registration button, and of course the dominating image gallery taking up half of the content area. Overall the content didn’t flow and the branding felt conflicted.

Jugend Testet's original website from 2015

The Jugend Testet website in early 2016

Looking at their logo, I could see that they had run perhaps a little too wild with the square shapes, repeating them throughout the content. This was possibly intended as a way to tie it all together, but it felt overwhelming, the lack of balance and alignment creating a messy layout. We never quite know what we’re supposed to be looking at. So while a new wireframe was created, I began to consider what I wanted to keep, and what I wanted to remove.

A selection of their existing logos

The previous Jugend Testet logo

Simplicity is key

Firstly, I wanted to keep the logo simple. It shouldn’t be tied in to a complex design like their existing logo. It should work as a standalone logo across multiple platforms and formats (e.g., digital, print, stationary, etc). The new logo also needed to work as part of the main Stiftung Warentest logo lock-up which is a light grey and white colour. So I would remove the coloured blocks and design a simple typography based logo.

Stiftung Warentest logo selection

The new logo also needed to work alongside the grey Stiftung Warentest logo

The second consideration was the logo should work as part of a yearly website change where both the colour and general graphics would be updated.

Again, clean and simple was key, and a typography-based logo won again, as this would contrast with each of Jugend Testet’s brand colours.

The Tahoma font, a vivid colour palette, and an image of students with overalls and holding paint rollers

Finally, I wanted to keep a bit of the charm from the existing Jugend Testet logo so it would still echo some original branding. To achieve this, I planned to take the real-life objects and implement them in to a fresh and modern design, that would have more longevity than the previous website had.

Art Direction Idea I

I liked the idea of using the main brand colour as the background to the header, with white object silhouettes rapidly animating in and out, one replacing the other. After five seconds, the silhouettes slowly turn in to the letters of ‘Jugend Testet’. I created a 45° gradient with the brand orange colour (#EA5E11) and a lighter less saturated shade of tangerine, giving a bit more visual interest and depth to the header.

Rough concept for a homepage header animation

Clean, graphical, modern, and fitting to the young target audience, it would also be easy for the client to update this on an annual basis. They simply had to update the background colours. Overall, the idea communicated the brand well, yet kept an echo to the existing logo design.

The issue with this graphical style was that I couldn’t envisage how the rest of the website design would look. Positioning the graphical silhouettes behind content would look like iconography, and placing them on to stickers or creating patterned backgrounds with them felt too childlike. I wanted something more sophisticated and mature.

Art Direction Idea II

My second idea was an explosive montage of the competition items. I wanted it to feel like a more sophisticated twist on their existing logo, so I took some similar real-life objects and arranged them in to an explosion of items. This would give a dramatic feel to the homepage header and would also be super easy to update on a yearly basis, giving a lot of flexibility to the clients design team to build up on the brand.

First sketch and Photoshop mock-ups for the ‘object explosion’ idea

I sketched out contrasting objects covering a variety of the Jugend Testet competitions, while keeping a close eye on the overall balance of the layout. Perfection wasn’t necessary as it was purely conceptual - the header would need to be properly designed with the correct level of care and time once the client signed off the concept.

After increased the logo typography size and weaving partial sections of the lettering with the objects, I was ready to place this in to my header design. I kept the header clean, with a great deal of white space allowing the hero image to take the centre stage. A minimalistic thin strip of colour was added at the top of the page, giving an opportunity to showcase that year's chosen colour. The parent companies logo was added, alongside a clear navigation strip.

Concept art for the 'object explosion' idea

Trying out my rough concept in the homepage header design

The accent colour

The main brand colour would change annually, so I had to consider when and where this colour would be utilised. Using it for important buttons and elements as an accent colour would create a stronger user experience, and would be easily editable via CSS on the clients side. My final decision was to use the accent colour for call to actions, main navigation (hover and active states), informative banners, sticky navigation background colour, and links. I kept the backgrounds clean - bright white and pale grey worked well with the whole range of colours in the clients' existing palette - so the graphics and accent colour would really take centre stage.

Top-down view

I loved the idea of continuing with the top-down view I created in the header, giving the user the impression that they’re looking down from above. I experimented, positioning more competition  assets - some taken from the header - across the website. These items could also be updated on an annual basis to match the new header design and accent colour, further driving more brand impact to the user, and generating more excitement for the competition.

Curves, not squares!

I introduced curved corners to the main buttons, and circles for the photographic content, offering something refreshing compared to the previously very square design. This gave a softer look and feel to the page, creating a more inviting and friendly atmosphere. I didn’t want to remove the angles entirely though -  so I used them for background panels, teaser backgrounds, sticky navigation, and footer. 

To further break up content types, and create deeper visual interest, I took some previously used header elements (ball of wool, macaroni, spices) and masked them with numbers, creating continuity and clear branded elements. These could also be flexibly redesigned every year to match their new header design.

Suggested art direction for the homepage
Suggested art direction for the jury page
Suggested art direction for the product page

Hierarchy and balance

I gave a lot of room for the design to breathe, avoiding the cluttered and chaotic feel of the previous website. Headlines contained both bold and light type weights, creating a visual hierarchy of the important information, and helping the user to scan through the content to find what they need quickly and easily.

The final live version

Comparing their 2019 website to the initial ideas I created back in 2016, the design had naturally progressed over the years and gone in a more abstract direction. And I think this works really well. More copy seems to have crept into the final build but this is pretty standard with most projects. Regardless, some areas are so copy-heavy, it would have been beneficial for the layout to have an opportunity to stress-test this in the initial art direction phase. I then would have been able to offer some additional design layouts and solutions, preventing the copy looking overwhelming and unbalanced in places.


How the website has progressed since my first concept in 2016

Final thoughts

In the years since my initial design, we cleaned up the background, removing module background colours, freeing up the design. This has meant we've compromised on content organisation as we no longer have boundaries between content.

I’m happy to see how their brand has progressed since 2016, to evolve with the current design trends. I look forward to seeing how their website further changes in shape over the next years.

Learn more about Jugend Testet

Other Projects

Hermann'sUX, UI & Art Direction

JoyrideUX & UI

WWFUI & Art Direction

The Metal PostArt Direction

Food AppUX & UI

Jugend TestetArt Direction

BBC World ServiceUX, UI, & Art Direction

Europa ParkUX, UI, & Art Direction

Hermann'sUX, UI & Art Direction

JoyrideUX & UI

WWFUI & Art Direction

The Metal PostArt Direction

Food AppUX & UI


Made with ❤︎ and ☯︎. Copyright Jessica denHeyer 2021. All rights reserved.

Made with ❤︎ and ☯︎.

Copyright Jessica denHeyer 2021. All rights reserved.