Content- & UX design voor De Tijd

Soms heb je als digital agency ook snelle, kleinere projectjes nodig om je design team te challengen, je development workflows om te gooien, of zelfs andere technologieën te verkennen. Daarom geeft de krant De Tijd ons geregeld enkele opdrachten om hun lezers net dat tikkeltje extra te geven wat betreft digitale contentbeleving.

In deze 4 projecten voor De Tijd zochten we telkens onze uitdaging:

  1. Jaarverslag 18-19: Een digitale longread gebouwd voor leesbaarheid en performantie
  2. 50 jaar De Tijd: Augmented Reality als verrijking van de krant
  3. Weekendkrant Sabato 10 jaar: Hoe designen in de browser het demo- en developmentproces kan versnellen
  4. Kiesgids 2019: Hoe vertaal je een jarenlang vertrouwd print-format in een interactieve versie?

Nieuwe digitale formats brengen zoals voor een klassiek papieren eindejaarsmagazine: Wieni heeft ons een geweldig antwoord op die vraag gebouwd. Technisch stond de site heel stevig, en meer nog, Wieni begreep heel snel op welke specifieke manier De Tijd verhalen wil vertellen. Met korte en efficiënte lijnen over de hele productieketting, van concept over wireframes naar visual design tot development.

Andries Fluit - Head of Multimedia bij De Tijd

Project 1: Jaarverslag 18-19

een digitale longread gebouwd voor leesbaarheid en performantie

Het doel was om niet zomaar een jaarverslag te maken, maar om een zo essentieel mogelijk overzicht te geven van 2018, om 2019 beter te kunnen begrijpen.

Er zou één essay worden geschreven van een tweetal parafgrafen. En de belangrijkste 7 topics in dit essay zouden nog een extra verdiepend verhaal krijgen. Wilden we dat de gebruiker lineair door het essay ging en de topics 1 voor 1 doorlas? Of zetten we in op navigeerbaarheid? De longreads per topic gingen sowieso redelijk lang en text-driven zijn. 

Wat waren de uitdagingen?

  • handige navigatie tussen de topics
  • duidelijke situering waar je in het essay zit
  • lineaire reading experience naar het volgende topic
  • reading progress duidelijk maken binnen 1 topic
  • maximale deelbaarheid van de content

We organiseerden een designsprint van welgeteld een halve dag, met een team van 4 designers, om te researchen en brainstormen over volgende topics. En we kwamen allemaal met losse interface- en design-ideeën. Dit resulteerde in een Figma-presentatie waarin we de challenges één voor één counterde met een concrete oplossing:

  • We kwamen met vaste header waarmee je terug kunt naar het essay. Gemakkelijk deelbaar.
  • Elk topic in het essay was apart aanklikbaar
  • De underline van elk topic was ook de visualisatie van de reading-progress
  • We hebben samen met de redacteur gezocht naar het kortst mogelijk essay, zodat dit sticky kon gezet worden zonder teveel plaatsverlies.

Technische oplossing

We wilden niet met een CMS werken, omdat de content slechts 1x moest worden ingegeven. Maar dit had natuurlijk als gevaar dat we dagen ervoor eindeloze tekstcorrecties moesten doorvoeren.

Daarvoor gaven we de redacteurs toegang tot onze GIT-omgeving. Bij elke inhoudelijke aanpassing, werd de site naar een staging-omgeving gedeployed. Zo konden de redacteurs hun wijzigingen en foto's toch onmiddellijk bekijken, zonder een CMS op te zetten. 

Bekijk hier de longread voor De Tijd 1819

UX presentatie in Figma

UX presentatie in Figma

de tijd - jaarverslag

De start-animatie van 1819

de tijd - jaarverslag 2

Project 2: 50 jaar De Tijd

Augmented Reality als verrijking van de krant

Om de 50e verjaardag te vieren van De Tijd, wilden we de traditionele lezer belonen met een digitale verrijking van de grafieken die in de krant gepubliceerd werden. We onderzochten o.a. de mogelijkheden van augmented reality bij datavisualisatie. Een tool die ons daarbij kon helpen was Blippar. Het resultaat waren drie verschillende interactieve tools, die op je smartphone werden getoond, als overlay over de echte, fysieke grafiek in de krant. 

De tijd - 50 Jaar augmented reality

Bekijk hier hoe we digitaal leven in de weekendkrant bliezen

Project 3: Weekendkrant Sabato 10 jaar

Hoe designen in de browser het demo- en developmentproces kan versnellen

Hoe krijg je een bijlage van een print-magazine in een digitale experience vertaald op 3 dagen tijd?

  • Geen tijd verliezen door het bestaande Indesign project te ontwerpen  in Sketch
  • Alle content onmiddellijk in HTML omzetten
  • Assets zoals kleuren, lettertypes, visuals één voor één toevoegen
  • Constant kleine UI tweaks toevoegen om de leesbaarheid en navigeerbaarheid te verhogen
  • Kleine fancy effectjes om een maximale UX te bieden

Bekijk hier het project van 10 jaar Sabato

de tijd - 10 jaar sabato homepage
de tijd - 10 jaar sabato detail

Project 4: Kiesgids 2019

Hoe vertaal je een jarenlang vertrouwd print-format in een interactieve digitale versie?

In 2014 werd er bij de krant een bijlage gestoken met 15 verkiezingsthema's en 100 vragen voor alle partijen. in 2019 zou er geen printeditie worden gemaakt maar moest de volledige content in een eenvoudige, mobielvriendelijke interface verpakt worden. Samen met de contentmakers van De Tijd en L'Echo gingen we op zoek naar de juiste manier om dit te brengen.

  • Stap 1: Interface brainstorm & Whiteboard sketching
  • Stap 2: Digitalisering van de interface ideeën & "low fidelity" prototypes in Google Presentations
  • Stap 3: Mobile Prototyping in UXpin
  • Stap 3: Visual Design in Figma
de tijd - kiesgids
Whiteboard sketching & Lo Fi prototypes in Google Presentations

Whiteboard sketching & Lo Fi prototypes in Google Presentations

Mobile prototyping in UXpin

Mobile prototyping in UXpin