Website design and branding for the popular student competition run by Stiftung Warentest
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.
After looking at their existing website, it was clear there were multiple issues with the overall layout; uncentred 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.
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.
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.
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.
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 years chosen colour. The parent companies logo was added, alongside a clear navigation strip.
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.
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.
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
The design went live in 2017. Comparing the live build to the initial art direction I had proposed in 2016, the majority of the design made it past the finish line. Hurrah! Although a lot more copy had crept into their final build (which is typically the case with 99% of websites I've designed in the past). We can see some extended elements and copy-heavy areas that weren't necessarily stress-tested in my initial art direction phase. It would have been beneficial to have more time to test this, and come up with some additional ideas and solutions to prevent the bulky copy looking overwhelming or unbalanced.
The website that went live in 2017, versus the latest updates in 2019
Jugend Testet updated their website with the new accent colour and header imagery in 2019. I’m really happy to see that they opted for the cleaner background option with no background panels. This really frees up the design, although we then compromise on content organisation. The new header design looks great and works well with the accent teal colour.
Overall I’m happy with my response to the brief, designing something that could easily be updated, 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