IMG 3107
Villa Zebra, website
Download
Villa Zebra

Opdrachtgever

Untitled Artwork
Inclusive 3

Design team

Inclusive 

Tijdens deze opdracht heb ik in teamverband gewerkt aan het maken van een website voor Villa Zebra. Hierbij vroeg de opdrachtgever om een website met zo min mogelijk taal zodat het zo inclusief mogelijk zou zijn. 

Dit ontwerp is bedoeld voor de doelgroep van Villa Zebra. Wij hebben ons als team gefocust op moeders tussen de 25 en 40 jaar met hun kinderen. 

Klantvraag

“Ontwerp een website zonder taal/woorden/zinnen waarmee we onze digitale
informatie voorziening toegankelijk maken voor een zo groot mogelijke doelgroep op een manier die past
bij onze visie, maar vooral ook duidelijk de toegankelijkheid positief beïnvloed

4642e0c7 d2a5 4668 a7b0 94a762f3f78e

Mijn rol

In dit team heb ik de positie als teamcaptain op mij genomen. Dit heb ik gedaan omdat ik het idee had dat ik soms nog "te lief" was voor mijn teamgenoten en ik vond dat ik mezelf wat meer uitdaging moest geven. Buiten dat heb ik mezelf ook uitgedaagd door de rollen van vormgever, planner, analyseur en onderzoeker op mij te nemen. 

IMG 4205

Ontwerpvraag

“Hoe kunnen we een website ontwerpen met zo min mogelijk taal die de digitale informatie voorziening toegankelijk maken voor moeders tussen de 25 - 40 jaar met kinderen tussen de 2-12 jaar?”

Huidige situatie

Om een beter idee te krijgen vanuit ons doelgroep, moesten wij ons eerst in de schoenen van ons doelgroep stappen. Stel je voor, na een lange werkweek terwijl je constant voor twee kinderen zorgt als alleenstaande ouder, vond je dat het tijd was om weer een dagje uit met je kinderen te gaan. Je collega had al vertelt dat ze Villa Zebra geweldig vondt en dat het de creativiteit van kinderen stimuleert. Dus dat is het eerst wat bij je opkomt. Slaperig, open je de website van Villa Zebra met het idee dat je zo snel mogelijk een afspraak kan maken voor de dag erna. Maar wanneer je de site opent, krijg je alleen lappen tekst te zien, die te veel informatie bevat waardoor het extra tijd kost om een afspraak te maken. Nadat je je laptop heb dichtgedaan, voel je meer vermoeid dan wat je had verwacht.

Ik heb beide desk- en fieldresearch gedaan om een beter beeld te krijgen van de probleemstelling. Er werd gekeken naar de website van Villa Zebra en wat het allemaal al aanbiedt voor ouders/begeleiders en de activiteiten die worden gegeven. Ook werd er naar onze doelgroep gekeken, wat moeders tussen de 25-40 jaar zijn, om te kijken waar hun voorkeur van technologie ligt en ook iets over de kinderen.

Gewenste situatie

In de gewenste situatie kom je in de website of enig ander medium een stuk minder tot geen tekst tegen. Alles is zo duidelijk mogelijk en er ontstaat geen tot weinig verwarring over bepaalde onderdelen.

Zo kunnen we weer even de voorbeeld situatie erbij pakken: Na een lange werkweek kom je als alleenstaande ouder thuis en je hebt zin om een dagje uit te plannen met je kinderen. Je collega was positief over haar bezoek aan Villa Zebra, dus het lijkt jou ook leuk om dat uit te proberen met je kinderen. Na een vermoeiende dag op je werk en het naar bed brengen van de kinderen ga je online even kijken wat er allemaal te doen is bij Villa Zebra. Als je de website opent, krijg je allemaal tekeningen, afbeeldingen en een duidelijk overzicht te zien over wat je er allemaal kan doen en alles wat je te weten wilde komen over het bedrijf. Na succesvol tickets te hebben gekocht ga je tevreden naar bed wetende dat je morgen een leuke dag gaat beleven met de kinderen!

Dit is een manier om het probleem te verwerken en op te lossen. Het belangrijkste is dat de verwarring over informatie, hoeveelheid tekst en visualisatie problemen worden opgelost.

Belangrijkste inzichten

Vanuit de onderzoeksfase.

Belangrijkste inzichten uit mijn onderzoek

De inzichten die hiernaast te zien zijn heb ik door middel van desk- en fieldresearch behaald. 

Group 16
Group 19

"Het hamburgermenu is niet goed weergegeven (het lijkt net alsof de takenbalk een uitklapping van het menu is)"

Group 15

"Het karakter: meneer Zebra komt nergens anders in de website terug"

Group 20

Iteraties

Fases waarin we als team gewerkt hebben.

Untitled Artwork

Iteratie 1: Stijl en indeling

In deze iteratie heb ik samen met mijn teamgenoten gefocust op het testen van onze stijleguide (in vergelijking met die van onze opdrachtgever) en de onderdelen die wij in de website wilden plaatsen. Dit hebben wij gedaan met behulp van een cardsorting, A/B testing en een MOM-test. Op basis van deze gegeven resultaten heb ik een flowchart gemaakt en heb ik met mijn teamgenoten een styleguide gekozen die aansluit bij de wensen van onze gebruiker.

Untitled Artwork

Iteratie 2: Wireframes

Vanuit de resultaten van Iteratie 1 heb ik wireframes gemaakt en deze hebben we met zijn allen getest door middel van een usability test. Hierbij hebben wij gekeken naar de indeling van de website. Ik heb samen met een ander teamlid ook een video gefilmd die we in de website verwerkt hebben. Naast dat vond ik het zelf ook leuk om een karakter toe te voegen aan de tour (die een van mijn teamgenoten heeft gemaakt). Toen heb ik "meneer Zebra" gecreëerd. 

861a642d 58fe 4aa7 ad7c 68874f3e7c03

Iteratie 3: High-fid prototype

Aan de hand van de testresultaten van iteratie 2 heb ik het prototype verbeterd en hier een high-fid prototype van gemaakt. In dit prototype is een video en een tour verwerkt om de doelgroep zo goed mogelijk te informeren zonder veel gebruik te maken van taal. 

Onderzoeksposter

Onderzoekspresentatie

Ontwerpproceskaart

Ontwerpproceskaart
Ontwerpproceskaart

Eind product

Neem een kijkje naar ons prototype!

Vervolgstappen & aanbevelingen

Na het testen van ons Hi-fid prototype zouden wij in de toekomst de volgende vervolgstappen nog willen toepassen:

- De virtuele tour met 3D camera maken, hier hadden we helaas geen budget voor.

- Meer visualisaties, zoals kleine illustraties en meer symbolen gebruiken in de website.
- Video met professioneel beeldmateriaal maken.
- Meer woorden markeren wat op dit moment helaas nog niet gelukt is

Hiernaast zouden wij graag ons prototype graag willen ontwikkelen tot een echte website met behulp van kennis van freelancers.

7cd3bbe3 ffa7 4192 9a3a ba960fb77b47
IMG 1953

Belangrijke leerpunten

Ik heb tijdens dit project veel geleerd over vormgeving en ik heb hier ook veel vooruitgang in geboekt (volgens mijzelf en mijn teamgenoten). 

Naast vormgeving heb ik dit project ook veel geleerd over het leiden van een project en een team. Niemand pakte de leiding hier echt op en aangezien dat op sommige momenten echt nodig was heb ik de leiding vaak even in handen genomen. Voordat ik aan dit project werkte vond ik het nooit bij mij passen om de leiding te nemen, maar terugkijkend zie ik dat dit juist goed bij mij past. Vooral omdat ik iemand ben die graag georganiseerd werkt, houdt van plannen en met alle liefde wil helpen

Ik heb tijdens dit project ook veel geleerd over samenwerken. Tijdens dit project zijn we van een team van 5 personen naar een team van maar 3 personen gegaan. Wat ons een groot nadeel gaf ten opzichte van de andere teams die aan dezelfde opdracht werkten. Zo heb ik dus even om moeten schakelen en binnen onze planning een aantal dingen moeten aanpassen. 

Dit alles heeft bijgedragen aan mijn ontwikkeling als designer.