My Role: lead concepter, IA & UX
The task: turn around the digital representation of www.zdf.de into the state of the art digital TV-brand, including all subbrands of ZDF (neo, info, kultur) and think of ZDF as the traditional TV channel for sports.
In short: breake everything and make it fancy, but stick to the traditional values of ZDF.
Summary: Once upon a time, in 2010, we all were flashed from the first Apple products, it was the time of the first iPad, (most people felt cool with their blackberries), no Netflix, no AmazonPrime, YouTube was a toddler. HTML5 just was predicted to come to the market soon....
The online team of ZDF.de had the idea to completely start from scratch, new, different, younger, ready to face all the challenges from the new newly rising needs for smartphone and tablet technology. So they decided to ask different agencies to pitch their ideas.
At that time, I was part of the Plan.Net Solutions (Serviceplan München) team and we started to work for this project.
Step 1: Research
Besides of tons of official studies, statistics and analytics the ZDF-online team provided to us (it was so much data, they did very good), I decided to analyze the national and international TV-channels, to get a feeling for the market.
While looking at all these channels, I felt overwhelmed and filled up and confused with everything of daily yellow press topics and rised the question: "But what is currently on air? What will be next/tonight?"
I felt this was the main question we need to answer. Because this is the reason, why a user opens www.zdf.de. Nothing more than that.
So, to focus strictly to the roots of ZDF and its purpose became our guiding idea.
Step 2: Pitch
Right after we found out the main problem we have to solve ("focus on nothing els but the TV programm"), we startet to brainstorm and reduced the existing page content to the minimum. In the end we thought: "the only thing we need, is a searchfield and an EPG"(electronic programm guide) We felt right on track but in the same time we doubted that we can show up with an idea like this at the very traditional ZDF. It´s an institution. So we did a second design for the pitch presentation. More conventional. More typical TV channel but nice, more expectable. But argumented for extreme reduction, extreme fokus on formats, programm, to the core of ZDF. We ended up in the second round of the pitch. But the ZDF online Team called us and asked us: We expected you to be more extrem! Can you?
Yes. we can.
My first huge pitch.
Than reality hit us, and we needed to add some topics and functionalities to the concept, but we startet nothing less than a revolution in the TV channel online representation....
Step 3: creation & wireframing: Home
General: my idea was it, to find one template for all channels. Through this we achieved a visual consistency but also individuality option for personality in design for every channel. Furthermore we could reduce efforts in coding and technical solutions. We wanted to create an overall system for ZDF, with templates, modules, molecules. Usabel for all channels.
The Background: normally the BG is nothing special. In this case, I wanted the BG to be a main and identity element for every channel and special situations. If there are events like the olympic games, Soccer WC, European elections, etc. the ZDF online team is able to adjust the BG visually and give the whole page a different look and feel.
All ZDF channel brands, the Mainzelmännchen, link to livestream (which was completely hidden before and a real obstacle in online rights), the weather feature which we discussed away but came back.
User perspective: I know where I am, I can easily check out the orther channels. I´m only one click away from live content. No distractions.
Middle: The programm. The only content. And man navigation at the same time. I decided to set a fixed number of changeable categories which give guiding topics to the user. These categories are filled with content from the editorial staff or via automation ("now on air"/today, most important...)
User perspective: the user can easily navigate horizontal through a wide range of formats, program and content. Click on one tile leads the user to the detail page of the format. No distraction.
All clickable on the desktop, labtop, swipeable and touchable on the tablet. This was a brandnew option at that time I have to say ;-)
Bottom: fixed on every page. The EPG, Electronic Program Guide. Besides the new way of flowing through the ZDF content, the EPG is the second backbones of the page. While I focused on the overall concept, content, structure, templates, modules and their integration, my colleague Falk focused on the function of EPG-module. I had nothing to do with that.
Challenges: completely new path for "traditional" institution ZDF, no existing cms (set up completely new for this project), new channel CI which wasn´t ready when we started, no experience with video streaming formats, nor tablet or responsive behaviour, integration of several internal technical services like "Sendedienst" for live content, roles and rights of the different editors, we planned with html5 when our devs testet html5 the first time, communication as an external team which completely changed the first impression of the brand ZDF, we turned around the way the editors worked with the websites of 4 channels, keeping up the process and communication between Munich and Mainz ..... just to name some.
Result: we nailed it.
Kat. Digital Media
Timeframe: we started in spring 2010 with preparing the pitch, ended the concept by the beginning of 2011. Then it took another year for the devs, technicians, editorial staff and testing to implement it. Relaunch was end of April 2012. This version of the zdf.de stayed until october 2016, when they decided to bring together the mediathek and www.zdf.de - which is the logic consequence for me. This was already a thought we had in 2010, but wasn´t possible to implement. I´m happy that I still see elements, features and functions from our revolution. It´s still alive!
Thanks to: Tim Schnabel as my boss who had the faith in me, Ines Rensing as the best pm with a lot of accuracy and patience, Fabian Zarse and Tobias Tiefert for a lot of patience bringing my wireframes to life with design and and the ZDF.de online team in trusting us.