CASESTUDY HERONTWERP HOMEPAGINA

Introductie:

Tijdens mijn 5 maanden stage bij VR Expert werd aan mij gevraagd of ik voor hen een prototype kan maken van de homepagina. Destijds was de homepagina niet meer up-to-date. Zo gaven bijvoorbeeld foto’s en stukjes tekst de verkeerde informatie over een product.

User Flow:

Voorafgaand begon ik met een korte onderzoek en was er een Design Brief gemaakt om samen met de collage’s van de marketingafdeling een beeld te schetsen van belangrijken onderdelen die op de website te komen moest staan. Ik begon de ideeën en schets uit te werken in een User Flow.

Prototype 1

Het prototype had ik gemaakt in Figma. Ik had ervoor gekozen om dit in Figma te doen, omdat Figma een programma is waar je web/app prototypes op een goede en overzichtelijke manier kan maken.

Voor mijn eerste prototype was mijn idee om het als een wire-frame te maken. Zoals de Mock-up. Bij het onderdeel wereldkaart had ik ervoor gekozen, om dit onderdeel zelf te ontwerpen in Illustrator. Zo liet ik zien hoe dit in de werkelijkheid eruit zou kunnen zien.

In de design brief had een collega aangegeven dat het stukje Client testimonials in tweeën gedeeld moest worden. Eén gedeelte hiervan moest kleiner en meer bovenaan in de website en (eerste foto onder de tekst) het andere gedeelte uitgebreider en lager in de website (tweede foto onder de eerste foto).

Ik had in het eerste ontwerp bewust gekozen om het tweede gedeelte nog even weg te laten, omdat dit meer een herontwerp was dan een nieuw onderdeel.

Feedbackronde op prototype 1

Toen ik dit al bijna helemaal had uitgewerkt vroeg ik aan een collega mondeling of zij mij feedback kon geven om te kijken of ik op de goede weg zat. De feedback van de collega was dat ik meer moest focussen op de onderdelen die er nieuw bij kwamen dan op de onderdelen die herontworpen werden. Zij wilde graag ook dat de definitieve vormgeving er ook al in verwerkt is.

Prototype 2

Bij het twee ontwerp van het prototype had ik de nieuwe onderdelen uitgebreider ontworpen. Ik had bij elk nieuw onderdeel een blokje toelichting toegevoegd. Daarin gaf ik aan waar dit nieuwe onderdeel voor bedoeld was. Verder had ik ook de bestaande onderdelen toegevoegd en zonder vormgeving omdat dit later werd herontwopren.

Feedbackronde op prototype 2

Een collage van het marketingteam vond het de goede kant op gaan. Wel wilde hij graag dat het onderdeel “Check out our assortment” een verandering moest krijgen. De vier onderdelen (VR Headsets, AR Headsets, VR/AR Software en Knowledge base) die er nu stonden lieten te weinig zien. Wat er te koop is. Ook wilde de collage graag meerdere opties hebben. Bij het onderdeel ‘Our Partners’ kon ook de logo’s zonder kader geplaatst werden. Een andere collage had de wens om de titel ‘Client testimonials’ een ander titel te geven.

Prototype 3

Deze feedback had ik meegenomen en verwerkt in mijn derde prototype ontwerp. Bij dit ontwerp had ik meerdere en specifiekere opties. In plaats van de vier opties:

– VR Headsets

– AR Headsets

– VR/AR Software

– Knowledge base

Had ik er acht gemaakt:

– VR Headsets

– Standalone VR

– Binocular AR

– Monocular AR

– VR accessories

– AR accessories

– Flight cases

– Branding

Zodat je hierin gerichter kunt zoeken. Daarna had ik de hokjes waar elk logo in zat weg gehaald. Op de feedback van de collage bij de vorige feedbackronde gaf hij aan dat er een andere titel moest komen voor Client testimonials. Als voorbeeld noemde hij toen “clients that trust us”. Hier had ik ook naar gekeken en verandert naar “Companies who rely on us”. Bij dit ontwerp had ik ook de onderdelen die al op de website stonden opnieuw ontworpen. Hierbij had ik de uitstraling en de inhoud meer up to date gemaakt.

Feedbackronde op prototype 3

De collega’s van het marketingteam waren erg tevreden met het resultaat. Wel kwam zij met enkele suggesties:

Het eerste ging over de blauwe knoppen bij “Product services”. In ons gesprek had ik aangegeven dat ik ervoor had gekozen om de oranje knoppen blauw te maken, omdat dat een optie was in de huisstijl. De blauwe knoppen vielen meer op, waardoor mensen hier sneller naar zouden kijken. Daar was een collega het mee eens, maar hij gaf aan dat de kleur blauw alleen in sommige gevallen gebruikt mocht worden. Hij gaf aan dat de kleur bij alleen op subsites werd gebruikt en niet de hoofdwebsite van VR Expert (eerste foto naast de tekst). De kleur oranje is de basiskleur van VR Expert. Een andere collega vertelde ook dat hier bepaalde regels zijn van hoe hoekig een hoek moet zijn van bijvoorbeeld een knop. Hij legde uit dat als een knop afgeronde hoeken heeft. Bestaat er een rekentool om de juiste hoeken te berekenen (tweede foto onder de eerste foto). Een andere collage was erg tevreden over de “Check out our assortments”. Wel gaf zij aan dat acht opties net iets te veel was. Zes opties zou beter zijn. Met net iets minder opties komt het duidelijker over voor de bezoeker.

Prototype 4

Na deze Feedbackronde met het marketingteam was ik begonnen met ontwerp vier te maken. De knoppen had ik in plaats van blauw naar oranje gemaakt. Bij het ontwerpen van de borders van de knoppen had ik de formule toegepast. De buitenrand van de container heeft een border van 16px. De knop staat 10px van de rand af, dus dat betekent dat de border van de oranje knop 6px moest zijn.

Daarna had ik de ‘acht assortiment’-opties teruggebracht naar zes. Ik had ervoor gekozen om de knoppen ‘Flight cases’ en ‘branding weg’ te laten, omdat deze twee onderdelen als enige in dezelfde assortiment staat. De beide assortimenten hebben dezelfde URL. Namelijk de URL: vrexpert.nl/vr-accessories/. De andere assortimenten hebben allemaal een eigen URL. Waardoor deze assortimenten niet samengevoegd konden worden.

Uiteindelijk had ik ervoor gekozen om de positie van de wereldkaart te verplaatsen. De wereldkaart had ik onder de ‘Check out our assortments’ sectie geplaatst. Gedurende het maken van de prototypes was ik voornamelijk gericht op hoe het ontwerp uiteindelijk eruit kwam te zien. Nu bijna alle informatie in het design staat, besloot ik toch nog even een stapje terug te doen, om te kijken naar de volgorde. Het viel mij nu op dat je lang moest scrollen om bij de producten uit te komen. Eerst heb je een slider met call to action naar het nieuwste product. Vervolgens de logo’s van de partners. Daarna volgt als derde de wereldkaart en daaronder pas echt het productassortiment. Het leek mij toch verstandiger om dit onderdeel iets meer naar boven te brengen, want dat zorgde meer voor dat het B2B gericht is wat ook werd verteld in de Design Brief. Je wilt ook graag snel de producten overzicht zien. Ook bij andere concurrenten staat de wereldkaart niet meteen bovenaan.

Feedbackronde op prototype 4

Bij de vierde feedbackronde was de marketingteam zeer positief over het ontwerp. Ik had aan hen uitgelegd waarom ik ervoor had gekozen om de wereldkaart op een andere plek te zetten. De collega’s waren alle bij eens over mijn keuze. Toen zij voor de rest ook positief waren met hoe het eruit zag, hadden zij mij de opdracht geven om dit ontwerp ook responsive te maken voor een mobile versie. Een collega vertelde nadat de mobile versie was gerealiseerd dat het project tijdelijk was afgerond. Het eind ontwerp dat ik heb gemaakt werd gearchiveerd en wanneer de website volledig wordt herontworpen, mijn prototype wordt meegenomen.

Responsive versie prototype

In Figma had ik de final versie van de homepage omgezet naar een mobile versie. Dit geeft ook goed beeld of de website er goed uit ziet op kleiner formaat.