Van briefing tot eindproduct

Het designproces achter de Karrewiet-app

De briefing

We willen een mobile app ontwikkelen voor het jeugdjournaal Karrewiet die 2 keer per dag nieuws deelt met kinderen tussen de 9 en 12 jaar. Per update zijn er 5 à 6 nieuwsitems die samen een editie vormen. Kunnen jullie een design concept en interactief prototype uitwerken en testen?

Ja natuurlijk, zo’n kans slaan wij niet af. Dankjewel Ketnet!

De uitdagingen

1. De doelgroep

Het Karrewiet publiek is 9 a 12 jaar oud, kinderen dus. Maar we ontdekten al snel dat een klein verschil in leeftijd een groot verschil in gebruik betekent.

2. Timings

De volledige doorlooptijd voor het design traject was 1 maand. Daarna moest het development team kunnen starten. Challenge accepted!

Het design traject

Stap 1: Concept brainstorm

De eerste concept brainstorm hielden we intern met het PlayCo team. Daarin verkenden we de mogelijkheden en deden we een studie bij gelijkaardige apps. Zo konden we voorbereid gaan naar de brainstorm bij Ketnet met het project team. Om de mogelijkheden overzichtelijk te houden hebben we de app in 4 type schermen verdeeld:

In de brainstorm hebben we samen beslist welke patronen we zouden uitwerken en testen in de eerste sneuvelversie van de app.

versie 1

Stap 2: UX en UI design

Met het oog op de gebruikerstesten (en de deadline) was het belangrijk om het prototype zoveel mogelijk op het eindproduct te laten lijken. Door het prototype in een Ketnet/Karrewiet-kleedje te steken konden we én de merkbeleving én de gebruiksvriendelijkheid testen.

We waren geïnspireerd door de Snapchat Stories-trend die de kop op stak in alle populaire sociale netwerken. Ons eerste prototype had een gelijkaardige feed met stories en maakte uitvoerig gebruik van swipe gestures die verborgen menu’s tevoorschijn toverden. Daar zijn we na de gebruikerstesten van af gestapt.

Stap 3: Gebruikerstesten

Samen met de UX-designer van Ketnet testten we het eerste prototype met kinderen van verschillende leeftijden.

  • Jongeren snapten welk type app ze in hun handen hadden, nl. een nieuwsapp. Het visuele design en de inhoud sprak hen aan.
  • Het swipen tussen de nieuwsitems ging probleemloos dankzij de bolletjes. De kinderen herkenden dat uit andere apps.
  • Kinderen tappen op alles wat een pijl is.
  • Een kind van 9 jaar heeft meer moeite om de app te begrijpen en te gebruiken dan een kind van 12 jaar.
  • Het grootste struikelblok was de navigatie. De gestures waarbij je een verborgen menu naar beneden trekt waren verwarrend.
  • De progress bars die aangaven hoe ver je in een artikel zat, waren complete overkill.
versie 2

Stap 4: UX en UI design, ronde 2

Tijd om aan de volgende versie te sleutelen die meer houvast bood aan de jongste gebruikers.

  • We introduceren het Karrewiet logo als visueel ankerpunt. Uit de tests bleek dat de kinderen op zoek waren naar een houvast, een startpunt om naar terug te keren als ze klaar waren.
  • Die houvast was een nieuwe overzichtspagina. Ipv het overzicht te verbergen achter een gesture, was er nu een echte, aparte pagina met een overzicht van alle edities.

Het resultaat was een meer conventionele, maar robuuste navigatie. De extra pagina’s lieten meer ruimte voor taal. En dat bleek belangrijk bij de volgende gebruikerstesten.

Stap 5: Gebruikerstesten, ronde 3

Deze testen deden we met een kleinere groep en individueel. De feedback die we deze keer kregen was van een andere aard.

  • De navigatieproblemen waren opgelost. Kinderen vonden vlot hun weg tussen de nieuwsitems en het overzicht.
  • Door de nieuwe navigatie lazen de kinderen enkel de nieuwsitems die hen interesseerden en geen volledige nieuwsedities. Dat was niet de bedoeling.
  • Taalgebruik was het laatste struikelblok. ‘Vandaag’ was niet zo duidelijk. ‘Het nieuws van vandaag’ was wel heel duidelijk. Ook exacte datums waren te abstract voor de kinderen, het was duidelijker om te spreken over het nieuws van gisteren of vorige woensdag.
versie 3
versie 4

Stap 6: UX en UI design, ronde 4

Er kwam deze keer ook nog feedback van het project team. De merkbeleving stond nog niet 100% op punt.

  • Het kleurgebruik en de styling van de iconen werd bijgesteld.
  • Het was belangrijk dat kinderen alle nieuwsitems zouden doornemen als 1 story en niet als aparte items.
  • Ook het weerbericht was strategisch heel belangrijk en kreeg zijn eigen stek in het menu.
  • Vanuit technische kant is het design verfijnd zodat het kan worden gemaakt zonder designers en wel vanuit een CMS-systeem.

Het resultaat

Je kunt de app downloaden via de app stores van Google en Apple. Laat ons weten wat je ervan vindt!

Lees hier het persbericht

Disclaimer: Hier kun je lezen hoe we bij PlayCo de nieuwsapp voor Karrewiet hebben ontworpen en getest. We zullen vertellen wat er heeft gewerkt en wat er niet heeft gewerkt. Hou er ook rekening mee dat deze designs ontworpen zijn vóór de ontwikkeling van de app en mogelijks afwijken van de Karrewiet-app in de app stores.