Goede doel redesign

Redesign?

Volledig op vrijwillige basis heb ik de homepage een goed doel uitgekozen om eens te grondig onder handen te nemen. Het doel? Datgene wat ik geleerd heb op het gebied van interactie, conventies, ui, etc toe te passen. Puur als oefening. En, daarbij vind ik ook dat het goede doel onwijs goed werk doet.

De huidige homepage

Screenshot: huidige homepage.

Wat zijn volgens mij de verbeterpunten?

Donatie link mag wel meer opvallen en laten zien dat het klikbaar is.
Informatie over de infolijn mag meer opvallen.
Button bij de zoekbox voorzien van de tekst 'zoek'.
Vulling van de 4 boxen onderin mag consistenter.
Uitlijning in het rode kader rechts kan beter.
Printen en lettertype vergroten is standaard browserfunctionaliteit en kan achterwegen gelaten worden.
De indeling kan beter. Het oogt erg rommelig nu. Je ogen weten niet waar te beginnen.
Actuele info vangen op één plek.
Woord preventie vervangen door voorkomen. Het woord preventie is moeilijker Nederlands.
Campagne 'Ik sta op voor' als zodanig zichtbaar maken.
Banners iets minder prominent op de pagina plaatsen.
Menu logischer indelen.

Redesign iteratie1

Screenshot: redesign, iteratie 1.

Call to action - 'Hier moet je klikken om te doneren!'

Met dit nieuwe ontwerp ben ik meningen gaan polsen. Wat valt op aan de nieuwe versie. Is het verbetering? Wat kan er nog beter? Daaruit kwam weer een nieuwe versie. Daarin heb ik de volgende aanpassingen gedaan:

Minder rood op de pagina. Dit is een alarmeringskleur en knalt van de pagina af. Het leest ook niet lekker.
Header aantrekkelijker maken.
Menu versimpelen.
Reden om de grote (call to action) button te klikken duidelijker maken. Overtuiging ontbreekt.
Content logischere plaatsen geven.
Doneerproces versimpelen en naar de homepage halen.

Redesign iteratie2

Screenshot: redesign, iteratie 2.

Zoals je ziet is de homepage nu een stuk rustiger. De indeling van de content zorgt voor een stuk meer rust.
Dit ontwerp heb ik aan Jeroen van Geel (founder en chief kahuna van Johnny Holland). Waar ik verwachtte dat hij hint zou gaan geven over onder andere de plaatsing van elementen, kreeg ik uitleg over het verhaal dat ik met de homepage wil vertellen, over middelen van overtuiging en over de kernpunten van het goed doel. Super interessant en reden om de homepage nog eens over handen te nemen.
Verbeterpunten zijn:

Kernwaarden van het goede doel beter in beeld brengen.
Zorgen voor een nog iets duidelijkere indeling.
Duidelijker in beeld brengen wat de bezoeker kan op de homepage.
Vormgeving verbeteren.

Redesign iteratie3

Screenshot: redesign, iteratie 3.

Ethos - Vergroot de overtuiging door een beroep te doen op iemands bekendheid.

Er is goed nagedacht over de kernwaarden van het goede doel Kankerbestrijding: onderzoek subsidiëren, voorlichting geven en patiënten ondersteunen. Als ik daartegenover de taken leg die de gebruiker waarschijnlijk zou willen doen, kom ik uit op: informatie en helpen.
Met deze versie heb ik een aantal 5 seconden gebruikerstests uitgevoerd. De uitkomsten van deze tests heb ik meegenomen in de volgende iteratie:

Feedbackloop toevoegen aan doneermodule.
Footer verbeteren.
Helpen veranderen in doneren. Om vrijwilliger te worden is toch meer info nodig en kan daarom naar een subpagina.
Quote van Arie Boomsma verbeteren.
Meer witruimte creëren.
Originele logo terug plaatsen.
Vormgeving donatiemodule verbeteren.
Structureel doneren mogelijk maken. Om meer donaties mogelijk te maken.
Menu verbeteren.

Redesign iteratie4

Screenshot: redesign, iteratie 4.

Feedbackloop - Hoe hoger het donatiebedrag, hoe meer lachende gezichtjes.

De site is nu iets rustiger. Je merkt dat alles redelijk vorm begint te krijgen, maar nog net niet helemaal af lijkt. Overigens, voorafgaand aan dit ontwerp heb ik een wireframe gemaakt om de beste positie van de verschillende onderdelen te bepalen.
Verbeterpunten zijn:

De kleur rood terugbrengen. Deze kleur is toch onderdeel van de huisstijl.
Details in vormgeving aanbrengen. Het is nog wat kaal nu.

Redesign iteratie5

Screenshot: redesign, iteratie 5.

Rood - Deze kleur teruggebracht zonder alarmerend over te laten komen.

Dit ontwerp heb ik aan een aantal Q42 collega's laten zien, waaronder Rahul Choudhury (interaction engineer) en Chris Waalberg (COO) laten zien. Hier is weer nuttige feedback uit gekomen, welke ik samen met mijn nieuwe ideeën heb meegenomen in de volgende iteratie:

Hoofdnavigatie toevoegen in footer.
Sitemap toegoeven in footer. Om in één oogopslag te zien wat er te halen valt op deze website.
Logo iDeal toevoegen om vertrouwen te winnen.
Meerdere quotes mogelijk maken. Leuk voor de gebruiker. Kan overtuigend werken.
Laatste nieuws uit de footer. Is geen footer materiaal.
Nieuwsbrief uit de footer. Hoeft niet op elke pagina te staan.
Tekst iets inkorten.
Schaduw toevoegen onder het logo. Hij is erg plat nu.
Underline weghalen onder linkjes. Linkjes vallen toch wel op als zodanig.
Grote plaat iets minder hoog maken. Donatie valt daardoor meer binnen de pagina.

Redesign iteratie6

Screenshot: redesign, iteratie 6.

Carousel - Om de ± 7 seconden is er een andere quote te zien.

Sitemap - Zo is meteen duidelijk wat de site te bieden heeft.

En toen was er html

Bovenstaande ontwerp heb ik omgezet naar een html pagina. Zo kon ook de interactie met de verschillende elementen worden uitgewerkt en heb je meteen een duidelijker beeld hoe de pagina er dan uit komt te zien.

Een greep uit de vragen die ik geprobeerd heb te beantwoorden. Daardoor zul je zien dat het uiteindelijke ontwerp nog best afwijkt van de 'laatste' iteratie die hierboven is te zien.
Dit zijn redenen waarom ik alsnog aanpassingen heb gemaakt:

Ervoor gezorgd dat je met je ogen prima over de site kunt glijden.
Alles goed leesbaar maken.
Duidelijkere ingangen (waar begin ik als gebruiker) laten zien.
De vormgevind ervoor laten zorgen dat de content tot z'n recht komt.
De juiste onderdelen de juiste hoeveelheid aandacht gegeven.

Tot slot

Belangrijk is om te melden dat ik dit ontwerp gemaakt heb op basis van aannames. Ik heb geen contact met het goede doel Kankerbestrijding over bijvoorbeeld doelgroepen, over wat zij willen uitstralen met de website of over hun ideeën over de website. Ik heb puur gewerkt op eigen inzichten en ideeën.

Tijdens dit proces heb ik veel gehad aan de mensen waaraan ik de verschillende iteraties heb laten zien. Technische mensen maar ook niet technische mensen hebben hun feedback gegeven. Dit bleek erg belangrijk en nuttig (dank aan al deze mensen!). Want daar gaat het uiteindelijk om: mensen!

PS: Op last van de juridische afdeling van het goede doel in kwestie is het logo onherkenbaar gemaakt, naamgebruik, zijn portretten met namen erbij verwijderd en wordt er een waarschuwing getoond dat het niet om de werkelijke website gaat.