Mogen we je even voorstellen? Frankwatching 5.0!

Tweet

Save

74

Email

Tweet

74

Email

In februari 2004 ging Frankwatching van start; vrij snel daarna, in 2005, maakten we de overstap naar WordPress. Nu, ruim 7 jaar later, maken we de volgende stap: een totaal redesign, weer in WordPress, maar vanaf de basis opnieuw opgebouwd. Zijn onze doelstellingen (o.a. een betere gebruikservaring, meer interactiviteit) daarmee gerealiseerd? The proof of the pudding is in the eating...! 

Een nieuwe site lanceren heeft, zeker als je meer dan 10.000 artikelen over allerlei verschillende onderwerpen hebt staan, nogal wat voeten in de aarde. Het was hier in de afgelopen dagen dan ook even wat stiller. Stiekem ging afgelopen woensdagavond rond de klok van 21 uur de knop vrij geruisloos om.

Teams Frankwatching en Level Level aan het werk als voorbereiding op de lancering

Maar omdat we gisteren nog aan allerlei knoppen moesten draaien, doen we vandaag pas de officiële aankondiging: vandaag, precies 3,5 jaar na de vorige relaunch, presenteren we vol trots het nieuwe Frankwatching! In dit artikel doen we verhaal van het project waar het afgelopen jaar, samen met onze partner Level Level, zo hard aan hebben gewerkt.

Gebruikservaring en interactie

Wat bij de lancering van het nieuwe Frankwatching in 2005 gold, geldt eigenlijk nog steeds:

“Frankwatching 3.0. Een weblog of misschien wel een weblog plus. Onderweg naar een completere formule. Een formule waar allerlei vormen van ‘elkaar ontmoeten’, ‘in gesprek zijn’ en soms ook ‘samenwerken’, bij elkaar komen.”

Vanuit een eenpersoonsblog is Frankwatching uitgegroeid tot een platform met 400 actieve auteurs en een enorme community, die zich niet alleen op de site, maar ook op Twitter, Facebook en andere kanalen bevindt. Het draait bij Frankwatching nog steeds om ‘in gesprek zijn’ en kennis delen. Maar de schaal waarop we werken en de tools en social channels die ons tegenwoordig ter beschikking staan, stellen hogere en nieuwe eisen aan de inrichting van dat platform. ‘Frankwatching 5.0’ is het resultaat.

Doelstellingen

Bij het bouwen van de nieuwe site hadden we doelstellingen op drie terreinen:

• User Experience. Een betere totaalervaring voor bezoekers waarbij alle kanalen die samen het platform Frankwatching vormen elkaar aanvullen en versterken.
• Interactie en verdieping. We willen graag nog beter tegemoet komen aan de verschillende informatie- en contactbehoeftes die jij als bezoeker zou kunnen hebben.
• Services. Services als Gespot, Events Agenda en Vacatures zijn een uitbreiding op de dagelijkse artikelen. De bestaande servicerubrieken hebben een make-over gehad en er zijn nieuwe onderdelen (Dossiers, Informatie) bij gekomen.

Gerelateerd aan deze drie doelstellingen was ons streven om de relevantie en waarde van wat je op Frankwatching aangeboden krijgt, te verhogen. Ongeacht waar je je op de site bevindt, maar daarentegen zoveel mogelijk rekening houdend met wat je op die plek op dat moment wilt.

Zo flexibel als een deur?

De oude site was, zoals we hier intern wel eens zeggen, zo flexibel als een deur. We konden eigenlijk alleen in de content ‘iets doen’; de user interface was een gegeven. De sidebar was overal hetzelfde en de keuze qua opmaak was beperkt (slechts twee ‘smaken’: artikelopmaak, of pagina-opmaak).

Vakidioten als we zijn, willen we natuurlijk graag alles overal en elke dag weer naar onze hand kunnen zetten – bij wijze van dan – om op iedere pagina optimale waarde te kunnen geven voor de bezoeker van die pagina. Vandaag de @frankwatching twitterstream in je sidebar, morgen die van de hashtag van een belangrijk event. Een plattegrondje op een eventpagina (zie bijvoorbeeld hier), een widget op de ene pagina (maar niet op de andere…). Kortom; we willen voortaan echt aan de knoppen kunnen draaien.

Informatiearchitectuur op de schop

Om dat voor elkaar te krijgen, hebben de teams van Frankwatching en Level Level veel tijd gestoken in de opzet van de informatiearchitectuur. Je kunt hierbij denken aan eigen formats voor specifieke typen content (‘custom post types’), taxonomieën (termen, begrippen, lijsten) en metadata.

Ontwerpen voor Frankwatching 5.0

Level Level heeft hierbij op een geweldige manier de vertaalslag gemaakt van doelstellingen, functionele specificaties en content requirements naar interactie design, informatiedesign (interface) en de uiteindelijke vormgeving. Het resultaat is deze nieuwe site. Een site gebaseerd op een WordPress-platform dat niet alleen slim in elkaar zit, maar vooral ook heel gebruiksvriendelijk is. Zowel voor jou als lezer als voor de redactie, auteurs, adverteerders en ieder ander die iets met de community wil delen.

Knoppen en koppelingen

Brainstormsessie Michiel Mos (Level Level) en Frank Janssen

In deze nieuwe site kunnen we dan ook inderdaad aan alle knoppen draaien en zo per onderdeel proberen de inhoud zo relevant mogelijk te maken voor jou als lezer. We kunnen zelfs tot op het niveau van individuele pagina’s en afzonderlijke artikelen kiezen of we onderdelen in de interface wel of niet tonen, of we koppelingen maken met gerelateerde content of promoties en of via slimme widgets en scripts allerlei elementen aan de pagina of de sidebar toevoegen. Maar dat is uiteraard niet het enige dat gewijzigd is.

Beheergemak en efficiency

Usability heeft met de ‘voorkant’ te maken, maar ook aan de achterkant viel winst te behalen. Veel van de content op Frankwatching moest handmatig worden overgezet van wat mensen doorgaven via een e-mail of invulden via formulieren, naar WordPress. Er ging veel tijd zitten in het verwerken en opmaken van al die artikelen, advertenties, whitepapers, eventaanmeldingen, etc. Die tijd steken we liever in interactie met lezers, volgers, abonnees, partners, in innovatie en in mooie nieuwe content. Door slimme koppelingen, zoals real-time koppelingen tussen de formulieren en Google Docs (zie de paradepaardjes hieronder), gaan veel zaken nu automatisch en besparen we veel tijd.

Technische paradepaardjes

Als je ons vraagt wat nou de paradepaardjes zijn qua techniek, zijn er twee dingen die boven het geheel uitsteken.

Formulieren en rapportages

Een van de belangrijkste veranderingen die in de nieuwe site hebben ingebouwd, is de unieke real-time koppeling van de formulieren met Google Docs. Voor de formulieren maken we gebruik van de geweldige plugin Gravity Forms. Level Level bouwde voor ons er allerlei mooie zaken omheen. De aanmeldingen voor rubrieken als Gespot en Events ‘schieten’ helemaal voorbereid WordPress binnen en bij publicatie van documenten in Papers & Book worden er zelfs automatisch downloadpagina’s gegenereerd.

Level Level ontwikkelde ook een unieke Google Docs connect plugin waarmee alle inzendingen die via formulieren binnenkomen ‘live’ in Google Docs binnengehaald kunnen worden. Zelf bouwden we er vervolgens een heel stelsel van spreadsheets omheen. Door deze nieuwe opzet werken we voortaan met overzichten als:

• Werkvoorraad: bijv. bij aanmeldingen van  auteurs, cursisten, vacatures, whitepapers en boeken;
• Planning: bijv. voor Gespot, campagnes en trainingen;
• Administratie: bijv. voor facturering adverteerders en deelnemers trainingen;
• Managementrapportage: aggregatie van andere rapporten, binnenkort ook verrijkt met real-time graphics.

Dit alles maakt het plannen en organiseren van het werk en managen van de artikelstromen, campagnes en ook onze trainingen een stuk gemakkelijker en overzichtelijker!

Zoekfunctionaliteit: real-time én faceted search

De andere toevoeging aan de site waar sommigen van ons (we noemen geen namen…) over kunnen blijven praten, is Sooqr, voor de on-site search. Zo’n zoekfunctionaliteit is belangrijk als je artikelen die ouder zijn dan een week goed wilt kunnen terugvinden (in een database met meer dan 10.000 artikelen!). Bovendien was er, terecht, de nodige kritiek op de zoekfunctie in de oude site en daardoor voelden we ons natuurlijk uitgedaagd.

We zochten een ideale – maar, dachten we, onhaalbare – zoekfunctionaliteit. De combinatie van de zoekfuncties van Google en LinkedIn, dat was de droom. De real-time search van Google en filteropties (faceted search & navigation) van LinkedIn gecombineerd op de eigen site, dat werd de uitdaging…

Met Level Level oprichters Taeke Reijenga (de man van “alles kan, niks is onmogelijk”) en Michiel Mos (die zich voelde uitgedaagd op de combinatie van vorm en functie) concludeerden we al snel dat driekwart van onze wensen- en eisenlijst goed te verwezenlijken was. Aangevuld met de – naar achteraf vaak pas bleek – soms briljante vondsten en adviezen van Peter van den Hooren, kwamen we met het team van Level Level tot de 90%. De uitdaging zat hem in die laatste 10%, de real-time search, die een zware belasting van de site geeft. En toen kwam Sooqr dus op ons pad, probleem opgelost!

Sooqr verzorgt de on-site search & navigation

Sooqr is een prachtige oplossing, een real-time search engine, met de optie om je zoekresultaten heel eenvoudig te filteren. Sooqr (een SaaS-oplossing) analyseert bovendien alle gegevens die ze terugkrijgen van de gebruikers, waardoor de resultaten steeds verbeteren. A dream come true. In de komende weken zullen we de opties van Sooqr overigens nog wat verder uit gaan breiden.

Een strakke, groene site

Ook grafisch is er het een en ander veranderd. En niet alleen het logo. Het is niet altijd makkelijk om afstand te doen van je oude jasje. Wat betreft het structureel en het visueel ontwerp zijn we dus niet met een schone lei begonnen, maar hebben we voortgeborduurd op een bestaand grid en een bestaande look-and-feel.

Evolutie van de navigatie

Het doel was meer consistentie in de vormgeving en het ‘straktrekken’ van het totaal. Het was daarin ook belangrijk om de talloze advertentieposities, statistieken en social mediakoppelingen zo rustig en overzichtelijk mogelijk te stylen. De beperking hierbij ligt in de functionaliteit, want die bleef voorop staan. Het resultaat? Het mintgroene jasje is veranderd in stijlvol en modern …groen!

Grote verandering, kleine details

De vraag is natuurlijk hoeveel jij als bezoeker merkt van de toch ingrijpende wijzigingen die plaats hebben gevonden door het redesign. Als het goed is, is het kenmerk van zo’n verandering dat je je in eerste instantie afvraagt: “wat is er eigenlijk anders?”. Maar dat je daarna (hopelijk) ontdekt dat Frankwatching wel degelijk anders is: handiger, praktischer en – naar we hopen – waardevoller.

Behalve technische veranderingen, hebben we ook meer inhoudelijke dingen toegevoegd. Zo is er de nieuwe rubriek Dossiers, waar je een overzicht vindt van artikelen over populaire onderwerpen, van how-to’s en cases tot themadossiers als Facebook en Twitter. Een andere nieuwe functie is de mogelijkheid voor studenten om hun afstudeeronderzoeken gratis via Frankwatching te verspreiden (mits relevant natuurlijk).

Wensenlijst & next steps

Zijn we tevreden? Best wel. Met het live gaan van deze site is 80 tot 90% van ons wensenlijstje in vervulling gegaan. Als je zoals wij enorme ‘usability freaks’ in je team hebt, liggen de eisen erg hoog. Deze site begint, mede dankzij het geweldige partnership met Level Level, een beetje in de buurt te komen van wat onze ultieme site zou kunnen zijn.

Maar er blijft altijd te wensen over, natuurlijk. Het is een lang en intensief proces geweest (zie ook het artikel over het redesign dat we eind 2011 publiceerden!) waarin keuzes moesten worden gemaakt. Responsive design, waaronder een verder geoptimaliseerde mooie mobiele versie, staan hoog op onze wensenlijst, net als een gepersonaliseerde gebruikerservaring door vergaande integratie van sociale netwerken.

Meetbare veranderingen

Last but not least, hoe weten we of we geslaagd zijn in onze opzet? Het belangrijkste is natuurlijk dat onze artikelen goed gelezen worden en dat ook de minder actuele, maar nog steeds erg relevante, andere artikelen goed gevonden en gelezen worden. Daarnaast hopen we van jou als lezer feedback te (blijven) krijgen op de dingen die je mooi, handig, opvallend of juist onbegrijpelijk vindt, of nog mist. En tenslotte gaan we over een aantal maanden een gebruikersonderzoek uitzetten, waarvan hopen dat je er aan wilt deelnemen.

We nodigen je van harte uit om te klikken, surfen, zoeken, lezen en ontdekken en hopen dat het nieuwe Frankwatching je goedkeuring kan wegdragen! Laat ons vooral weten wat je vindt – alle feedback is welkom. Allemaal input voor het mapje Fw 6.0 .

Iedereen bedankt!

Rest ons om iedereen die betrokken is geweest bij dit traject, zowel de mensen uit het eigen Frankwatching team als de teams bij onze geweldige partners, te bedanken voor het harde werk en het mooie resultaat. Bijzonder veel dank gaat uit naar Taeke Reijenga, Michiel Mos & Peter van den Hooren van Level Level, zonder hun was dit alles niet mogelijk geweest.

Frank Janssen in gesprek met Taeke Reijenga en Peter van den Hooren (Level Level) over ‘hun’ nieuwe site

Dank ook aan Erik Keegstra en Eric Bus van Sooqr, waardoor we een prachtige zoekservice aan de site konden toevoegen. Partner Nines, dag-in-dag-uit de partij die ervoor zorgt dat de site goed presteert, bewees ons geweldige diensten bij de migratie. Last but not least dank aan onze partners Tam Tam, Measuremail (binnenkort hebben we vernieuwde nieuwsbrief-edits) en Yonego (voor de support op het vlak van SEO en Google Analytics) .

Al met al is het voor ons een feestelijke dag en natuurlijk zijn we razend benieuwd naar hoe jij als lezer deze verandering ervaart. Dus kom maar op met jullie mening, reacties en feedback!

Mocht je de komende tijd nog lege of niet volledig gevulde/werkende pagina’s tegenkomen; dat kan kloppen! We zijn druk aan het werk om alle content toe te voegen en eventuele technische issues te verhelpen.