Bij mijn eerste voorbeeld heb ik visualisaties en prototypes gemaakt voor de expertisepagina voor de nieuwe website voor mijn stagebedrijf DutchGiraffe. Mijn stagebedrijf wilt namelijk al een tijd een nieuwe website. De reden hiervoor is dat de website die ze nu hebben al wat ouder is en ze tussendoor ook een nieuwe huisstijl hebben vastgelegd die ze graag op de website willen zien. Veel collega’s hebben al meegewerkt aan het nieuwe ontwerp en ik mocht er ook bij helpen. Voor veel pagina’s heeft mijn collega Anne het ontwerp al bijna definitief vastgelegd, maar onder andere de expertise pagina was nog leeg. Ik mocht Anne helpen met deze pagina vormgeven, hiervoor heb ik eerst geconceptualiseerd (bij mijn eerste competentie) en daarna gevisualiseerd en deze visualisaties uitgewerkt tot werkende prototypes.
Dit zijn screenshots van de oude expertisepagina op de website van DutchGiraffe
Het was nu eindelijk tijd voor het visualiseren en vormgeven van alle concepten. Dit vind ik zelf altijd de leukste stap. Hiervoor heb ik eerst beelden opgezocht die zouden passen bij de nieuwe website van DutchGiraffe. Daarnaast heb ik ze geselecteerd om te zien of ze bij een van de expertises zouden passen. Hiervoor had ik een paar foto’s gevonden op de oude website van DutchGiraffe. Ook heb ik stockfoto’s gezocht op Unsplash.
Voor het visualiseren van de expertisepagina had ik al een kleine opzet, er was namelijk al een pagina in het overzicht gemaakt met een header en footer. Alle pagina’s hadden deze opzet al in Anne haar ontwerp. Dit was dan ook mijn startpunt en hier heb ik verschillende visualisaties in gemaakt.
De kleuren van de huisstijl van DutchGiraffe zijn donkergrijs, wit en oranje. De lichte kleur oranje en onderstaande kleuren groen zijn officieel ook onderdeel van de huisstijl, maar deze zijn secundair, worden niet veel gebruikt en hoeven niet direct in het ontwerp. Wel was het een idee om op de nieuwe website de kleur aan te passen als je tekst selecteert op de website en deze dan de kleur groen te maken.
Voor de expertisepagina wilden ze een overzichtelijke pagina die laat zien wat DutchGiraffe als ontwerpbureau allemaal kan. Het was mijn taak als UX Designer om deze expertises goed weer te geven op een pagina die door linkt naar de subpagina’s van alle expertises. Hiervoor had ik meerdere concepten uitgewerkt en hiervan heb ik ook verschillende visualisaties gemaakt.
Een concept die ik bij het conceptualiseren niet heb gekozen als resultaat, maar die ik toch wel wilde zien met vormgeving en beelden, is het concept met alle expertises onder elkaar. De blokken onder elkaar maken het een lange pagina, maar er is wel veel ruimte voor representatieve beelden bij de expertises. Hierbij heb ik een versie uitgewerkt met gradiënt over de foto waar de tekst op staat. Ook heb ik versies met losse blokken voor de tekst die op een donkere achtergrond staat voor hoog contrast. Hierbij ging mijn voorkeur naar de blokken met losse achtergrond voor de tekst, want bij een gradiënt gaat de vele tekst niet goed leesbaar zijn. Bij deze blokken wilde ik ook een hover toevoegen, bij het tweede concept zijn de expertises nog 50% transparant totdat je eroverheen hovert. Terechte feedback van Anne hierover was wel dat de blokken niet actief lijken en dat wilde ik niet.
Bij het uitwerken van deze visualisaties viel het mij wel op dat de afbeeldingen nu half gingen overlappen en het onduidelijk werd welke afbeelding bij welke expertise hoort. Daarnaast leken deze concepten en visualisaties ook veel op de oude website. Reden genoeg voor mij om deze opties toch echt links te laten liggen en door te gaan met het andere concept met vijf blokken om en om naast elkaar.
Wet van nabijheid
Voor het plaatsen van de verschillende expertises op de overzichtspagina heb ik de Gestaltprincipes gebruikt. De wet van nabijheid zorgt ervoor dat elementen die zich dicht bij elkaar bevinden, als groep worden gezien. De elementen die ver van elkaar af staan, worden ook onafhankelijk waargenomen. Om deze reden heb ik van de vijf expertises vijf groepen gemaakt met de desbetreffende informatie dicht bij elkaar.
Wet van geslotenheid
De volgende Gestaltprincipe die ik heb toegepast, is de wet van geslotenheid. De elementen die omrand worden door een lijn, worden hierdoor als geheel gezien. Daarom wilde ik bij mijn vijf groepen van expertises ook lijnen eromheen die elk een geheel zouden maken. Deze lijnen wilde ik uitwerken tot gevulde blokken zodat ik ook beelden kon toevoegen.
De concepten met deze vijf blokken had ik bij mijn eerste competentie al besproken en heb ik hier ook weergeven. Bij deze blokken was de hoogte en uitlijning nog variabel, daarom had ik deze in verschillende visualisaties uitgewerkt. In eerste instantie wilde ik de titel in het midden uitlijnen, maar dit kwam nergens terug in andere ontwerpen op de nieuwe website. Toen wilde ik linksboven uitlijnen, want je leest van links naar rechts, maar dan zou je de titel van het bovenste blok ook al boven de vouw zien. Daarnaast gaf Anne ook aan dat haar voorkeur uitging naar het uitlijnen van de titel linksonder. Hierbij zie je van het bovenste blok ook alleen een beeld boven de vouw, die ook zou uitnodigen om verder te scrollen, zonder dat de pagina te druk wordt met nog meer tekst in beeld.
Wet van gelijkheid
Naast de nabijheid en geslotenheid wilde ik wel dat zichtbaar was dat de vijf expertises bij elkaar horen, aangezien het allemaal expertises zijn van hetzelfde bedrijf. Hiervoor heb ik het Gestaltprincipe toegepast, genaamd de wet van gelijkheid. Elementen die op elkaar lijken zullen ook gegroepeerd worden. Daarnaast zullen elementen met veel verschillen ook als aparte elementen waargenomen worden. Beide principes wilde ik toepassen op de overzichtspagina van de expertises. De expertises moeten vijf verschillende groepen vormen, maar tegelijkertijd één groep uitmaken. De introductietekst erboven en de mogelijkheid tot contact opnemen moeten wel verschillende elementen op de pagina zijn.
Om de introductietekst verschillend te maken van de expertises heb ik verschillende uitwerkingen geprobeerd met contrast en focus punten. Voor de tekst zelf had ik al feedback gekregen om deze groter te maken, daarom heb ik deze aangepast naar H4. De achtergrond wilde ik hierbij het meeste contrast weergeven en had ik daarom donkergrijs gevuld. De knop onder de tekst had nog verschillende mogelijkheden, hetzelfde zijn als op de expertise blokken of juist anders.
Door deze Gestaltprincipes op een consistente en doordachte manier toe te passen, wilde ik mijn ontwerp zowel samenhang geven tussen de vijf vergelijkbare blokken als onderscheid laten maken tussen de intro en contact secties, wat de algehele gebruikerservaring hopelijk zou verbeteren.
Om het contrast goed te maken tussen de introductietekst en de expertises, ging mijn voorkeur uit naar de tweede optie hierboven. Hierbij vormt de introductietekst met achtergrond echt een aparte sectie. De eerste expertise heb ik iets overlappend geplaatst zodat deze ook boven de vouw te zien is, waardoor gebruikers kunnen zien dat ze verder kunnen scrollen naar de expertises.
De oranje en witte blokken onder de tekst van de expertises vormen een goed contrast. Ik heb ervoor gekozen om de kleuren zo licht mogelijk te houden, gezien de donkergrijze kleur van de footer.
Voor de beelden van de expertises wilde ik een herkenbaar beeld kiezen die ook terug zou komen bovenaan de detailpagina’s. Ook wilde ik een korte intro tekst en knop weergeven op de expertise blokken.
Voor het hover-effect heb ik verschillende uitwerkingen geprobeerd om het contrast met de achtergrond te optimaliseren. Omdat ik voornamelijk grijs als overlay wilde gebruiken bij het hover-effect, heb ik definitief besloten om de grijze achtergrond achter de expertises te laten vallen. Bij de introductie overwoog ik aanvankelijk om een beeld van de eigenaar van DutchGiraffe te tonen, zodat bezoekers kunnen zien met wie ze contact opnemen. Echter heb ik ervoor gekozen om dit beeld verder naar beneden op de pagina te verplaatsen om de bovenkant van de pagina minder druk te maken.
Bij de blokken van de expertises heb ik een hover-effect toegevoegd waarbij tekst en een knop zichtbaar worden. De animatie is ontworpen zodat de tekst en knop van onderen in het blok schuiven, waarbij de transparante achtergrond gradient meebeweegt omhoog zodat deze achter de tekst blijft staan.
Een andere optie die tijdens een feedbackmoment werd besproken, was een flip-animatie. Na het uitwerken van deze animatie en het testen ervan werd al snel duidelijk dat dit de pagina erg druk maakte. Wanneer je naar een blok navigeerde, flipte het blok naar de tekst en knop. Echter, bij het navigeren naar een ander blok, flipten de blokken terug naar hun oorspronkelijke staat, terwijl het nieuwe blok tegelijkertijd naar de tekst en knop kant flipte.
Hierna ben ik weer verder gegaan met de animatie vanaf onderen, omdat deze wat rustiger oogde maar toch nieuwsgierigheid opwekte. De hoogte van de blokken was ook nog variabel; in mijn eerste concepten waren de blokken eigenlijk te hoog, en deze konden beter worden aangepast op de lengte van de tekst die erin zou komen. Als tweede variatie daarop heb ik ook een concept uitgewerkt dat heel kort is, en bij hover wordt het een langer blok met tekst erin.
De rechter optie zou de pagina wat korter maken, maar de animatie voelt minder natuurlijk aan omdat er teveel beweegt en de knop niet meer klikbaar is zodra je niet meer aan het hoveren bent op het korte blok. Dit zorgt ervoor dat het blok weer inklapt. Hierdoor zou de knop verwijderd moeten worden en zou je op het hele blok kunnen klikken, maar dat vond ik minder duidelijk dan een knop. Daarom ging mijn voorkeur uit naar de linker uitwerkingDaarom ging mijn voorkeur uit naar de linker uitwerking, waarbij je ook meer van de beelden ziet die de expertises weergeven.
Hierna ben ik verder gegaan met de blokken onder de expertises. Op de oude website stond hier ook tekst met het kopje “Visie,” maar die content hoefde ik niet aan te houden. Om de pagina kort en bondig te houden, heb ik ervoor gekozen om alleen een contactsectie toe te voegen onder de expertises. Deze sectie, met een knop eronder, zal de gebruiker naar de contactpagina leiden.
Op elke detailpagina van de expertises staat een contactmogelijkheid, maar ik wilde deze ook toevoegen op de overzichtspagina. Als potentiële klanten al zien dat we goede expertises hebben of nadat ze zijn teruggekeerd na het openen van een expertise, kunnen ze onderaan de pagina ook een mogelijkheid vinden om contact op te nemen.
Bij deze contactmogelijkheid heb ik ervoor gekozen om de achtergrond licht te houden. Hier voeg ik een afbeelding toe van het kantoor van DutchGiraffe, samen met een foto van de eigenaar met wie je waarschijnlijk contact hebt, om een goed beeld te geven van met wie je in contact komt wanneer je op de knop klikt. Dit zou ook een andere medewerker kunnen zijn dan Willy.
Bij het selecteren van een expertise komt de potentiële klant op de desbetreffende detailpagina terecht. Aangezien de nieuwe inhoud nog niet bekend was, heb ik de huidige inhoud toegepast op visualisaties als opzet voor de nieuwe detailpagina’s. Als voorbeeld heb ik de detailpagina voor UX design gekozen, omdat ik voor deze opdracht slechts één ervan hoefde uit te werken.
Op de detailpagina van de expertise UX design stonden al een aantal afbeeldingen, maar ook veel tekst. Na feedback tijdens mijn conceptfase heb ik de hoeveelheid tekst in de visualisaties verminderd. Hierbij wilde ik vooral dat beelden en korte, duidelijke teksten zouden vertellen waarom DutchGiraffe die specifieke expertise beheerst en kan uitvoeren.
Uit de gebruikersbehoeften die ik aan het begin van het conceptualiseren had opgesteld, bleek dat potentiële klanten graag ervaringen van klanten lezen om vertrouwen op te bouwen. Daarom heb ik een sectie met reviews toegevoegd, met het ontwerp dat Anne al had gemaakt. Daarnaast heb ik ook een alternatieve versie ontworpen om ervaringen weer te geven van collega’s die werken aan de desbetreffende expertise. Hierbij heb ik ervoor gezorgd dat de huisstijlkleuren goed terugkomen op de pagina, zonder te overheersen. Hierdoor zal het grootste deel van de pagina wit zijn, met een paar secties onderaan met een achtergrondkleur.
Het resultaat van de expertise overzichtspagina en detailpagina die ik heb gevisualiseerd zijn schermen waar ik trots op ben en die goed de essentie van DutchGiraffe overbrengen. Deze visualisaties heb ik ook uitgewerkt tot werkende prototypes die je hieronder kunt vinden.
In dit prototype kun je navigeren tussen de expertises op de overzichtspagina en klikken op de ‘Lees meer’ knop bij de expertise UX design voor de detailpagina.
De reactie die ik van Anne en Luc kreeg op het resultaat van de overzichtspagina en detailpagina was positief. Ik ontving ook waardevolle feedback om de pagina’s nog verder te verbeteren, ik zal deze feedback toelichten.
Bij de overzichtspagina kreeg ik de tip om een flip card animatie toe te passen op de blokken van de expertises, echter na het uitwerken van deze animatie in een prototype liet zien dat het een minder geschikte animatie is. Dit kwam vooral door de drukte die ontstaat bij het navigeren over de pagina, aangezien er twee bewegingen tegelijk gebeuren. De originele animatie die ik als eerste had uitgewerkt was daarom wel onze favoriet, deze zorgt voor een rustiger gevoel bij het navigeren over de pagina.
Mijn collega’s vonden de hoogte van de blokken van de expertises al veel beter. Ook vonden ze de grotere tekst die over de hele breedte loopt en slechts twee of drie regels lang is, een goede overzichtelijke uitwerking. Ze gaven hier nog wel de tip om de hover-effect te testen op genoeg contrast tussen de tekst en de achtergrond, aangezien dit een grijze laag is met het beeld er nog achter.
Ze vonden het een goede keuze om de achtergrondkleur van de overzichtspagina wit te houden. Hierdoor vallen de introductie- en contactsecties meer op vanwege hun donkere achtergrond.
Anne vond de hoeveelheid tekst op de detailpagina nu al veel realistischer met de uiteindelijke content die ze graag op deze pagina ziet. Mijn focus lag op het integreren van user stories door beoordelingen en ervaringen toe te voegen van klanten en collega’s, en ze vonden dat deze ontwerpen goed pasten bij de rest van de website. Desalniettemin wil Anne de detailpagina’s van alle expertises graag nog aantrekkelijker maken, maar ze wil dit pas toepassen nadat ik mijn werk heb afgerond, aangezien ze nog niet zeker weet hoe ze dat precies wil aanpakken.
Al met al vonden ze het resultaat zeker veelbelovend en Anne wil zeker aspecten hiervan werkelijk toepassen in haar ontwerp van de gehele website. Vooral de animaties die ik heb toegepast, daar waren ze enthousiast over. Ikzelf ook, want voor deze opdracht wist ik nog niet hoe dit in Figma moest en nu kan ik het al vrij snel.
Wat ik zelf nog zou willen verbeteren in mijn ontwerpen, is de cohesie tussen de pagina’s verder versterken. Op de overzichtspagina zou ik misschien ook de contactsectie willen gebruiken die ik voor de homepage heb ontworpen; ik zal deze sectie bij het volgende voorbeeld toelichten. Daarnaast zou ik op de detailpagina nog een knop of sectie willen toevoegen om eenvoudig te navigeren naar de cases en eerder werk te laten zien dat bij de expertise hoort.
Ik ben zelf echt heel trots op het werk dat ik bij deze pagina’s heb neergezet. Ik had weinig om mee te werken en dit project is iets waar DutchGiraffe al jaren mee bezig is, daardoor merkte ik dat de eigenaar en andere collega’s niet meer zo enthousiast waren. Desalniettemin heb ik wel een mooi ontwerp kunnen neerzetten waarbij ik heb gezien dat Anne al enkele aspecten van mijn pagina’s heeft overgenomen in haar ontwerp, en dat vind ik echt heel gaaf!
De volgende keer dat ik zou helpen bij het ontwerpen van een website voor het bedrijf zelf, zou ik toch liever een paar stappen eerder in het proces willen beginnen. Op die manier kan ik betere concepten ontwikkelen die echt verschillende sferen en toepassingen verkennen, in plaats van me alleen te concentreren op de plaatsing van blokken. Dit was voor nu niet mogelijk, wat ik lastig vond, maar het is zeker een goede les voor mij. Ik heb me nu vooral laten leiden door Anne en haar opdracht, waarbij ik eigenlijk haar hielp met haar project door een paar pagina’s te ontwerpen, in plaats van dat ik echt mijn eigen project uitvoerde.
Ik weet zeker dat ik de skills die ik nu in Figma heb geleerd, zoals auto-layout en animeren, zeker weer ga gebruiken. Het werkt zoveel handiger als een blok meeschaalt met de tekst die erin staat en als secties onder elkaar op een pagina meeschuiven wanneer een sectie langer wordt.
Bovendien heb ik bij deze opdracht zeker geleerd dat er meerdere feedback momenten plaatsvinden in het proces. Voor nu hoef ik alleen een resultaat uit te werken en daar feedback op te vragen, maar ik merkte al dat ik veel liever daarvoor al feedback vraag, zodat het resultaat al beter is en er daarna minder aangepast hoeft te worden voordat het getest kan worden.
Ook zou ik graag meer aandacht willen besteden aan het testen van mijn pagina’s in de toekomst. Op dit moment heb ik nog geen echte stakeholders en klanten kunnen benaderen, wat naar mijn mening het uiteindelijke resultaat zou kunnen verbeteren. Door feedback van hen te ontvangen, kan ik mijn werk beter afstemmen op hun behoeften en verwachtingen, wat positief zou moeten uitpakken voor het uiteindelijke resultaat.
Klik hier voor het tweede voorbeeld
Cases en contact voor DutchGiraffe