Een nieuw online platform voor FreoResponsive design op z’n best: mobile-first

Gewoonovergeld.nl: een nieuw merk met een nieuwe website. Op gewoonovergeld.nl lees je in heldere en begrijpelijke taal over geld. Opdrachtgever Freo koos voor Eight Media om de website te realiseren. Hoe hebben wij dit platform gerealiseerd?

Lees meer over Freo

Freo biedt de mogelijkheid om op een verantwoorde manier voordelig geld te lenen en is een onderdeel van de Rabobank Groep. Je kent ze waarschijnlijk als de shirt-sponsor van PSV. Freo wil dat mensen verantwoordelijk lenen. Op gewoonovergeld.nl zijn allerlei tips en nuttige informatie te vinden over hoe je het beste met geld kunt om gaan.

Eerste fase: de identiteit

Gewoonovergeld.nl is niet het eerste online platform over geld. Het moet zich onderscheiden om meerwaarde te bieden. Met de inzet van Innovation Games hebben we daarom eerst het DNA van het platform ontwikkeld.

  • Betrouwbaar
  • Coaching
  • Transparant
  • Open & Sociaal

Helder en begrijpelijk

Het speerpunt van de website is de tone-of-voice. Heldere en begrijpelijke taal voor onze doelgroep: de doorsnee Nederlander. Deze eigenschappen van Gewoon over Geld hebben onze design- en contentbeslissingen beïnvloed.


De concurrentie

Veel sites over geld zijn saai, doorspekt met jargon en de informatie wordt gepresenteerd als een brij van tekst. Met gewoonovergeld.nl kozen we voor infographics en heldere overzichten van cijfers. Eventuele toelichting wordt uitermate leesbaar en scanbaar. In onze schetsen plaatsten we kaders, streamers en samenvattingen rondom de content.

Andere platforms

Gewoon over geld

Focus op content:
Een enkel-koloms layout zonder gebruik van sidebars.

Aan de slag — in drie sprints

2 maanden!

  1. Kickoff
  2. 1
  3. 2
  4. 3
  5. Launch
1

Webstijl

In onze mobile-first aanpak maken wij geen apart design van de homepage voor desktop en mobile. Wij ontwikkelen eerst een visuele taal (ook wel Style Tiles) voor een multi-device experience, los van de content. Zo stellen we de juiste vragen, zoals ‘past deze typografie bij wat we willen uitstralen?’, ‘passen deze kleuren bij ons?’ en ‘herkennen wij onszelf in dit ontwerp?’.

De artikelpagina

Onze user experience designers startten met de artikelpagina. Wij identificeerden deze pagina – en niet de homepage - namelijk als de belangrijkste. ‘Designing from the bottom up’ noemen wij dit. De homepage komt als laatste aan bod.

Het concept dat wij ontwikkelden is ‘focus op de content’, een enkel-koloms layout met uiterst spaarzaam gebruik van sidebars. Het klinkt logisch maar het is pas sinds kort (zie het redesign van de New York Times) dat contentsites de artikelpagina niet meer volproppen met aanbevolen artikelen, top 5 artikelen, rubrieken, het weer en ‘nu op twitter’!

Mobile-first responsive design

De artikelpagina hebben we uitgewerkt in code. Initieel met toepassing van de webstijl, dit is later verfijnd met uitgewerkte ontwerpen. Eerst voor de mobiel natuurlijk. De navigatie zit bij een mobiel in een uitklapmenu - content gaat namelijk voor! Daarnaast tonen wij op een mobiel drie rubrieken onder elkaar met tekstkoppen. Maar op een groter scherm tonen we dezelfde rubrieken naast elkaar met illustraties.

Performance

Door mobile-first te werken, is gewoonovergeld.nl toegankelijk op alle devices (ook de oudere telefoons!), toegankelijk voor bezoekers met een handicap en zeer gebruiksvriendelijk op kleine schermen. Hiernaast verbetert de snelle performance de user experience.

Een mobiel laadt dezelfde website (content) met minder poes pas, waardoor het laden van gewoonovergeld.nl met 60% is geoptimaliseerd bij een smartphone.

2

Overzichtpagina’s

Toen we de artikelpagina’s met echte content in de browser zagen, gaf dit ons meer inzicht in vormgeving van de overzichtspagina’s en homepage. Deze inzichten bepalen deels wat bezoekers op de pagina’s zien en hoe de redactie in het CMS werkt.

Presentatie

Onze designers gingen ook aan de slag met de layout van de pagina -  hoe presenteren we overzichtspagina’s op mobile en hoe maken we gebruik van de extra ruimte op grote schermen?

We bedachten visuele hulpmiddelen om de pagina goed scanbaar te maken, zoals: hiërarchie in het design, typografie voor een goede flow van de pagina, labels bij lijsten om snel te kunnen beoordelen waar een artikel over gaat, persoonlijke verhalen de ruimte geven in de layout van de pagina.

3

Functionaliteiten

In de derde sprint focusten we op functionaliteiten die we in de site wilden zien -  artikelreeksen, voting van artikelen en ondersteuning voor de workflow van de redactie.

Er zitten meerdere redactieteams achter gewoonovergeld.nl. Om de workflow goed te faciliteren, kreeg onze open source Django CMS een upgrade. Daarnaast wilden we de redactie veel controle geven over de opmaak en presentatie van de artikelpagina.

Drag-en-drop en live editing van contentelementen maken het intuïtief om de pagina in het CMS te plaatsen én er goed uit te laten zien.

Het eindresultaat

Door vanuit beperkingen én mogelijkheden van mobile te denken, hebben we een platform gerealiseerd dat de content centraal zet. De navigatie- en andere functionaliteiten ondersteunen de content.

Mobile-first responsive design betekent ook: een prettigere ervaring met je smartphone. Je haalt veel minder data binnen via je 3G connectie. Tegelijkertijd beleef je achter je desktop een rijkere ervaring op je grote scherm. Met mobile-first responsive design bieden we een optimale ervaring, voor de desktop én mobiel.

Highlights

Eén van de eerste mobile-first responsive websites in Nederland
Performance optimalisatie voor smartphones (tot 60%)
Lekkere taart van Freo!
8 weken
Van concept tot launch

Bekijk live

Wil je met ons samenwerken?

Bel of mail ons!

eight.nl