Als tweede voorbeeld heb ik gekozen voor de visualisaties en prototypes die ik heb gemaakt voor de cases en contactsecties op de homepagina. Deze secties tonen het werk van DutchGiraffe en bieden een gebruiksvriendelijke manier om contact op te nemen. De reden voor het nieuwe ontwerp is voornamelijk omdat DutchGiraffe een nieuwe huisstijl heeft en deze willen integreren op hun website.
Bij dit nieuwe ontwerp hoort uiteraard ook een nieuwe homepagina. De rest van de pagina bestaat uit een sfeerimpressie, een overzicht van de expertises en een weergave van andere klanten. Om de homepagina compleet te maken, was een sectie nodig die het werk van DutchGiraffe laat zien en een sectie waar bezoekers contact kunnen opnemen met het bedrijf.
Ik heb ook gekeken naar de huidige homepagina op de website van DutchGiraffe om te zien hoe ze momenteel hun werk presenteren en hoe bezoekers contact kunnen opnemen.
Het oude blok met cases
Het oude blok met contact
Aangezien de homepagina nog niet compleet was, kreeg ik de opdracht om deze aan te vullen met een sectie voor cases en een sectie voor contact. Ik kreeg ongeveer twee weken de tijd om het te visualiseren en een prototype te maken. Ik heb het grootste deel van het werk op kantoor gedaan, maar ook een paar dagen thuis gewerkt. Het doel was om een werkend prototype te creëren dat goed zou passen bij de rest van de website. Anne wilde hiernaast ook meer visualisaties zien van de tussenliggende stappen, zodat daar mogelijk aspecten uit gehaald konden worden voor het uiteindelijke ontwerp.
Voor mijn volgende visualisaties heb ik het ontwerp van Anne voor de overzichtspagina van de cases gebruikt. Op deze pagina worden blokken gebruikt voor elke case, met een afbeelding bovenaan gevolgd door de titel en een knop om de case te bekijken.
Deze blokken wilde ik ook gebruiken voor de cases, maar omdat de sectie op de homepagina tussen twee donkergrijze secties komt, besloot ik de achtergrond wit te houden. Dit contrast in achtergronden maakt duidelijk dat het een nieuwe sectie is. In Anne haar ontwerp gebruikt ze twee verschillende breedtes voor de cases: de nieuwste is net zo breed als de pagina en de rest is de helft daarvan. In mijn carrousel wilde ik ook verschillende breedtes toepassen, zodat het geheel goed bij elkaar past.
Bij deze visualisatie vond ik het echter verwarrend dat er tegelijkertijd twee cases worden getoond. Hierdoor kun je weliswaar snel door de cases navigeren, maar krijgt elke individuele case minder aandacht en focus. Het leek mij beter om de weergaven zo aan te passen dat elke case afzonderlijk wordt gepresenteerd, hierdoor zullen gebruikers meer tijd hebben om zich te concentreren op elke specifieke case.
Het idee dat ik heb uitgewerkt tot bovenstaande visualisatie legt duidelijk de focus op één case tegelijk. Het menu onderin maakt het eenvoudig voor de gebruiker om door de verschillende cases te navigeren. Echter, een verbeterpunt is dat de volgende case niet goed zichtbaar is in deze visualisatie. Ik zou graag de volgende case meer in beeld willen brengen, zodat gebruikers er ook op kunnen klikken om die case te bekijken. Dit kan worden bereikt door de breedte van de case iets te verminderen, waardoor duidelijker wordt welke cases je nog meer kunt bekijken wanneer je meerdere keren hebt geswiped. Op deze manier wordt het helder welke cases er vóór en ná de gecentreerde case staan. De gebruiker moet nog steeds navigeren om de desbetreffende case goed te kunnen bekijken.
Daarnaast heb ik een animatie toegepast waarbij alle cases hun oorspronkelijke breedte behouden, die minder dan de helft van het scherm is. De case die in beeld is, wordt breder weergegeven, zodat bij het navigeren deze animatie naar het juiste breedte animeren. Deze aanpak heeft goed uitgepakt en zal ik uitgebreid toelichten bij het resultaat van de gehele homepagina.
Voor de contact sectie bevatte het conceptualiseren al enkele visuele aspecten, zoals de achtergrondkleuren. Ik had de samenhang van deze kleuren bijna definitief vastgesteld tijdens het conceptualiseren, maar ik heb ook verschillende andere concepten visueel uitgeprobeerd. Hierbij heb ik ook een afbeelding van het kantoor toegevoegd, maar ik vond het gebruik van de kleur oranje samen met de foto te druk en afleidend van de belangrijke informatie voor de gebruiker. Bovendien leek het afsnijden van het oranje vlak aan de zijkant willekeurig en paste het niet bij de rest van het ontwerp. Het gebruik van de opvallende oranje kleur samen met het grijze vlak paste daarentegen goed bij elkaar. Na deze visualisatie was het voor mij duidelijk dat ik de volgorde van de contactmogelijkheden zal aanhouden op basis van de voorkeur van DutchGiraffe.
De titel vond ik al leuk maar kon leuker, om hier niet door afgeleid te raken ben ik eerst het contact blok gaan visualiseren zonder. Hierdoor zag ik beter hoe ik de ruimte gebruikte en heb ik de padding van de tekst aangepast. Ook zag ik dat ik het verkeerde contactformulier nog in mijn visualisaties had staan, daarom heb ik deze vervangen door het verbeterde contact formulier waarbij de klant eerst hun vraag of verhaal kwijt kan, om daarna pas hun contactgegevens in te vullen.
Ik heb er ook voor gekozen om een keuzemenu van de expertises toe te voegen, aangezien veel klanten vragen zullen hebben over een van deze expertisegebieden of daarom contact willen opnemen. Natuurlijk heb ik ook een optie ‘Anders’ toegevoegd, en het is mogelijk om deze keuze optioneel te houden. De weergave van dit keuzemenu heb ik geanimeerd op dezelfde manier als de knoppen met een lijn eronder, wat goed bij elkaar past. Deze animatie is te zien in mijn prototypes; nu ga ik verder met de visualisatie.
Het ontwerp aan de rechterkant was al aardig op weg, maar ik miste hier nog een afbeelding van DutchGiraffe. Een optie was om de foto toe te voegen die ik eerder had gebruikt op de detailpagina van de expertise. Ook moest natuurlijk de titel weer worden toegevoegd.
De laatste aanpassingen in de secties voor de cases en het contact heb ik toegepast en daarna samengevoegd met de rest van het ontwerp van de homepagina, om zo het geheel en de samenhang te kunnen bekijken.
Ik ben heel tevreden met het resultaat! Daarbij heb ik ook mijn uitgewerkte knoppen met animaties toegevoegd aan de andere secties en dat maakt het een mooi geheel.
Het was erg positief dat mijn UX design collega’s mijn ontwerp leuk en goed vonden en blij waren dat ze het echt als prototype konden testen. Natuurlijk hadden ze wel wat feedback op de secties, maar dat was voor mij juist waardevol, omdat ik daarvan kan leren.
Bij de cases sectie kreeg ik feedback dat ik de juiste visualisatie had gekozen om als prototype uit te werken, waarbij ze graag één case tegelijk wilden zien, met de highlighted case in het midden van de pagina. Ze adviseerden ook om verschillende uitwerkingen te maken voor de weergave van titels, aangezien deze van lengte kunnen verschillen, of om een maximum aantal woorden per titel in te stellen. Hoewel ze het goed vonden dat de vorige en volgende case ook zichtbaar waren, suggereerden ze dat pijlen misschien duidelijker zouden zijn voor de navigatie in plaats van punten. Anne benadrukte ook dat ze liever met pijlen zou navigeren dan door te klikken op de case, gezien dit normaal gesproken de pagina van die specifieke case zou openen.
Voor de contactsectie ontving ik feedback over het contrast tussen de grijze letters en de oranje achtergrond. Hoewel het net aan de test voldeed, adviseerden ze om meer ruimte toe te voegen tussen de tekst en de achtergrond om de tekst beter te laten opvallen. Ze waren enthousiast over de achtergrondfoto van DG, die goed laat zien hoe het kantoor eruitziet en met welk bedrijf men contact opneemt. Ze stelden voor om dit blok voldoende lang te maken om het contactformulier ruimte te geven voordat de donkere footer begint.
Luc adviseerde om te experimenteren met een witte achtergrond voor het contactformulier, maar ik benadrukte dat dit zou kunnen vervagen tegen de wittere achtergrond van de foto. Andere feedback was om ervoor te zorgen dat er voldoende padding rondom de tekst in de afgebakende blokken zit, wat meer dan in mijn prototype het geval was. Dit was zeker een waardevolle tip waar ik in de toekomst goed op zal letten.
Anne en Luc waren allebei erg te spreken over de animaties van de knoppen en andere aspecten op de pagina. Ze vonden de animaties goed passen bij het ontwerp en waardeerden dat ik ze effectief kon implementeren in Figma. Het was leuk om te horen dat ze mijn inspanningen waardeerden in het uitwerken van deze animaties en het gebruik van auto-layout.
Daarnaast waardeerden ze het positief dat ik verschillende opties had uitgewerkt. Dit bood hen de gelegenheid om goed te zien wat wel en niet werkt, en ze waardeerden mijn experimentele aanpak hierin. Ik vond dit feedback moment weer heel waardevol en ik besef nu dat we geen leuke groepsfoto hebben gemaakt. Dat is een goed feedback puntje voor mezelf om dit in de toekomst wel te doen.
