Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
5th January 2013

Behind the scenes with Nike Chosen and demodern

Cologne-based collective demodern is granted creative licence to produce the highly acclaimed Chosen Series site for sportswear giant Nike

Behind the scenes with Nike Chosen and demodern
Project
Nike Chosen Series – www.nikechosenseries.com
Company
demodern – www.demodern.de

The world of extreme sport prides itself on a high-octane image that is characterised by a certain uncompromising attitude to life. The subcultures that exist around surfing, skating and snowboarding share a similar identity and outlook towards design. This in many ways is exemplified when an established sportswear manufacturer like Nike applies itself to these more niche pursuits and must communicate its message in a suitable way. For a project like its recent Chosen Series website, this involved harnessing the creative talents of an independent agency that understood the target market. “When Nike approached us and introduced us to the concept we were crazy about it and dove into it right away,” explains demodern’s UX designer, Jonas Wüllner. “The collaboration was superb; you meet so many likeminded people who love their job. Creating a concept for online communication almost becomes a breeze.”
Chosen Series, for the uninitiated, is a snowboarding tour open to amateur riders only, which offers them the chance to showcase their skills alongside professionals. The official site would provide a hub for entry information, tour schedules and multimedia content from the series. This month we find out how demodern became involved in the project and also how much freedom they were granted to realise such a high-profile brief…

Behind the scenes with Nike Chosen and demodern

L-R: Jonas Wullner – UX Designer, Rob Gurski – Designer, Daniel Schroermeyer – Art director

CONCEPT

Jonas: “First I watched some snowboarding videos and did scribbles of snowboard jumps. Drawing allows me to think and I visualised the whole digital hub of the contest in my mind. Thinking about us telling the tale of a chosen one, it became clear pretty soon, that we would have to put the riders into the focus on this website. They are our stars – pros and ams at eye level. And the plan of the tour is at the same time the navigation of the page, so the single pages are arranged accordingly. Matching the tour navigation, the event pages also are positioned in a row next to one another, while the superordinate content stands for itself. There were no alternative interaction concepts in this project; we just knew right away that we had found the right solution. Luckily Nike agreed.”
Rob: “Basically there are still a lot of our initial considerations visible on the page. At the beginning there were relatively few assets already in place, which we replaced with sketches. At the same time we realised how well that new look fit the general appearance, so we abstained from using the 3D graphics.”
Daniel: “You could say that we were optimistic while we did the first web layouts. The amount of imagery and text varied, and we realised we would have to aim for a large-scale but hugely flexible and modular layout.” decision, because we later optimised the design for Facebook and mobile devices.”
Behind the scenes with Nike Chosen and demodern

DESIGN

Jonas: “Sometimes it’s easier to create something awesome when there are clear guidelines. But Nike let us work at our own terms to the greatest possible extent. We decided against internal communication through Facebook alone via app/tab; our idea comes alive through staging the story. That is why we chose a microsite that we could design freely without being limited by the requirements of a third party (pixel measurements, technics, etc).”
Rob: “We create every page individually, so just doing a template and handing it over to the programmer to let him work out how to integrate the content is not how we do things. For that reason there is a Photoshop file for every single state of the page. Just designing the background patterns took a whole day, plus testing by the programmers – it is details like these that make the user feel the love for every detail, and which give depth to a page.”
Daniel: “Most of the digital measures for Nike are being designed based on already existing campaigns with certain elements or defined style guides already in place that you have to abide by. In this case it was different; there were some visuals from the first campaign, but there were no concrete guidelines, so we were allowed to design relatively freely. Our talent for improvisation was requested, so we defined the style of the page ourselves.
“We also knew right away that we would closely collaborate with the development department, because we did not only focus on the look and feel but also on the usability and flow of the page. The whole user experience played a big role for us [in this project].”
Behind the scenes with Nike Chosen and demodern

BUILD

Jonas: “We chose to use HTML5 and JavaScript, because, on the one hand, it works across platforms and, on the other hand, it is easy for us to [update]. Every week the page is being extended by fresh, additional content from national events, so we had to make sure that this would be easy and quick to do. The entire layout is basically one single page on which the content is spatially distributed, uploaded and moved around. Within the tour the movement between the pages even becomes visible. Through this the user has the feeling of actually moving the page from left to right. Nevertheless the entire script had to be very flexible. Dates could be moved at short notice because of weather conditions, for instance, so we had to be able to adapt the page immediately. Everything is based on our own demodern boilerplate including frameworks such as jQuery or Compass, which we keep optimising with every project.”
Daniel: “Whether to use HTML or Flash was not a question that we pondered at any point because it has already become a standard to ensure cross-platform compatibility. But we still remain convinced that there is no need to blindly follow every fad, and therefore decided to use Flash for the intro, against all trends at the moment. Of course, this also comes with a fallback option for all mobile devices.”Behind the scenes with Nike Chosen and demodern

THE LAUNCH

Jonas: “The biggest issue launching pages like this is the testing of Facebook functionality. Everybody at the agency has one or two fake accounts on Facebook to make sure that the testing environment does not get published every time the liking is being tried. But there is no such thing as a 100-per-cent guarantee, because you could, for example, realise that the text wraps differently after 100 or so Facebook likes. Therefore the lesson we have learned from this is not just to test everything for a day or two, but to also schedule an entire team for quality control after the launch. But ultimately those were only odds and ends. Since the page was honoured with a CSS award we are convinced that the bugs have been eliminated as far as possible. If not, please do contact us!”
Rob: “The timing was seriously tight; we had to prove that we were able to pull off everything we envisioned in a very compact timeframe, which we did. I was especially happy about the positive response from our partner agency, Urb-Orbis in London. If you guys are reading this: Greetings, we loved working with you too!”
Daniel: “There is nothing I have to add to that. Apart from maybe that the user’s acceptance of the page is amazing as well. An average length of stay of six minutes is a lot. I am already looking forward to the finals, starting at the beginning of April. The next webpage for it is already online, just visit nikechosensessions.com.
Behind the scenes with Nike Chosen and demodern

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.