Meekijken door de bril van onze Minister van Creatie

Als ontwerper werk je dagelijks voor wisselende bedrijven en branches. Je moet je inleven in de klant, maar ook in de opdrachtgever en de markt begrijpen waarin je klant opereert. Vandaag is de klant 123toilet.nl. Op het eerste gezicht niet de meest sprankelende branche, want wie wil er nou voor het kleinste kamertje van het toilet iets vormgeven. Juist hierin zie ik een mooie uitdaging! En laten we eerlijk zijn.. het is weer eens wat anders. Voor webshop 123toilet.nl mag ik een redesign doen van de website. Qua functionaliteit en vindbaarheid werkt de website enorm goed. De focus ligt dus op de beleving; een nieuw jasje.

Briefing

Als een soort Bob Ross wil ik je meenemen in mijn werkwijze en bijbehorende keuzes die ik maak om 123toilet.nl naar het volgende niveau te tillen. Uitgangspunt is onderstaande briefing:

Nu ken ik 123toilet.nl als bedrijf en ik ken de wensen op hoofdlijnen. De volgende stap is een verdieping in de markt van de online verkoop van toiletgerelateerde artikelen. Hierbij focus ik mij onder andere op vergelijkbare bedrijven in dezelfde sectors. Er blijken een aantal aanbieders in de markt te zijn die al slimmigheden hebben toegepast. Ook blijkt men gebruik te maken van passende content (tekst en foto’s). Ik heb gekeken naar Handdoekentoiletpapier.nl en Hygienepapier.nl

De huidige (oude) situatie

In onderstaande afbeelding tonen we het 0-punt van ons: de huidige website zoals deze live staat op het moment van ontwerpen van het redesign.

Nadat we het één en ander hebben geleerd van het DNA van 123toilet.nl, weten waar de krachten liggen, weten wat belangrijk is in de markt en we concurrenten hebben vergeleken, mogen we starten. We hoeven geen ‘functioneel design’ te maken, want daar wil onze opdrachtgever immers niets aan veranderen.

We gaan starten en beginnen bovenin.  De pay-off staat vrij rommelig onder het logo, alsof hij in de loop van de tijd langer is geworden. Die gaan we ernaast plaatsen. Het is passend om het kleurverloop uit het logo ook in de pay-off te verwerken. Deze klantenservice medewerker heb ik vaker gezien, het kan niet zo zijn dat ze bij meerdere bedrijven werkt en dus betreft het hier naar alle waarschijnlijkheid een ‘stockfoto’, hiermee verliest de website authenticiteit die je wel graag wilt.

Ik vervang de de stockphoto door een geïllustreerd icoon, in de kleuren van het merk en algemeen ondersteunend. De zoekfunctie blijft prominent in beeld, maar krijgt  dezelfde hoogte als de winkelmand knop, waardoor er rust ontstaat. Oranje is en blijft de signaalkleur. De oranje kleur komt terug in de belangrijkste acties als bestellen,  naar winkelmand en bezoeken van de winkelmand. De totaalprijs sluiten we nu in de oranje winkelmand kleur en niet meer er onder. Hoewel (vrijwel) alle functies zijn behouden, heb ik nu al enorm veel rust en structuur gecreëerd.

Over het algemeen is de truc om de  onderlinge afstanden gelijk maken, een duidelijke kolommenstructuur erin aanbrengen en kiezen voor een beperkt aantal lettertypes. Hierdoor krijgt het geheel een rustige en verzorgde uitstraling. Door te spelen met witruimtes kun je de suggestie wekken welke objecten bij elkaar horen en waar de aandacht van de gebruiker verlegd moet worden.

Meer focus op het hoofdmenu

Het hoofdmenu mag wel wat meer aandacht krijgen. Er zitten nu verwarrende streepjes tussen en oranje stippen. We trekken het hoofdmenu 100% breed door en maken het een strakke donkerblauw. Het is duidelijk welke items uit gaan klappen. Het hoofdmenu telt maar een paar items, de rest blijft onder het uitklapmenu staan. Hierdoor kan ik het mooie cijfer 8,2 van de revieuws kwijt in de blauwe balk. Reviews spelen een steeds grotere rol in de markt van de online sales. De groene kleur accentueert het positieve gevoel van het mooie cijfer. De usp (unique selling points) van 123toilet krijgen een plek direct onder het hoofdmenu. Gratis verzending wordt tegenwoordig bijna normaal geacht door de consument, maar bij bedrijven onderling geldt vaak een minimale bestelwaarde.

De hero header

Zo noemen we de grote banner bovenin die het merk neerzet. In dit geval worden er aanbiedingen, nieuwe producten en bijzondere nieuwsitems getoond. Het nadeel van de huidige versie is dat de gebruiker niet kan klikken op de verschillende items links. Dus je kan niet meer navigeren. Daarnaast heb je geen overzicht van alle aanbiedingen. Het oogt rommelig doordat er in verschillende stijlen wordt gewerkt. Met Wehkamp als inspiratie heb ik ervoor gekozen om hier meerdere aanbiedingen tegelijk te laten zien, maar wel met maar 2 mogelijkheden qua uiterlijk. De blauwe achtergrond of bij een nieuwsitem een foto. Oranje is wederom de signaalkleur.

De productcategorieën

Het is een trend om product uitgeknipt op een gekleurd plat vlak te zetten. Dit oogt lekker en ruimtelijk. Kijk maar naar Jumbo, bol.com, Wehkamp etc. Laten we eerlijk zijn, het ziet er mooi uit. Het leuke is dat ik nu al durf te voorspellen dat we over 5 jaar dit gedateerd vinden. Maar dat terzijde. Het gaat om nu 😉

Omdat we niets veranderen aan de functionaliteit, laten we de rijtjes hetzelfde en tonen we 1 mooie foto per categorie.  De link naar alle items uit de deze categorie is oranje en de als je op de afbeelding of de titel klikt ga je ook naar de desbetreffende categorie.

Tekst. Google wil tekst.

Er moet op iedere pagina ruimte zijn voor een dik aantal tekstregels. Zo ook hier. Inmiddels zijn we al zover gezakt in de koude zone van de pagina (75% van de bezoekers ziet dit al niet meer en is al verder gedaan) dat we nu wel wat ‘saaie’ tekstblokken kunnen tonen. Voor de vindbaarheid nog steeds erg belangrijk. Vanuit het oogpunt van een ontwerper is het heel vervelend dat dit erin moet, maar Google hecht er waarde aan. Dus.. we doen het maar *schoorvoetend*. Ook het blok ernaast waar de branches worden getoond is eigenlijk een direct zoekmachine-ingang. De pagina’s zijn niet bedoeld om eens lekker voor te gaan zitten en te lezen, maar des te meer voor Google. Zo kom je hoger in de resultaten en komt er meer verkeer naar je website. Simpel.

Ik heb de teksten verdeeld over kolommen en de branches als klikbare blokjes ontworpen. Ze kregen naar mijn mening te veel aandacht met een foto.

Video’s

De rood van de Youtube playknop mag dan duidelijk zijn, maar ik haal hem er wel uit. Oranje is ook te opvallend voor een actie die duidelijk minder aandacht moet trekken dan het bestellen dus wordt het ook blauw.

Topaanbiedingen

Deze aanbiedingen zien er in de huidige versie nogal druk uit. Het productoverzicht zou wat rustiger moeten ogen. Door alle ‘dubbele’ lijntjes weg te halen lijken de producten wat meer te ademen. Op dit moment van schrijven twijfel ik over de oranje bestelknop. Ik heb nu deze opties voor ogen.

Het werkt als volgt: als je wilt bestellen krijg je altijd nog een popup-scherm met de staffelkortingen en hoeveelheden. Dus de actie op de oranje knop is indirect bestellen. De winkelwagen suggereert dat het daarin gaat. Ook de plus suggereert de actie om het direct toe te voegen. Het nadeel aan de pijl is, dat het echt verwijst naar een volgende pagina en dit is ook niet helemaal wat er gebeurt. Mijn persoonlijke voorkeur is de plus. Mijn collega’s prefereren de winkelwagen en de pijl. Deze laten we nog even bezinken.

Als we op de detailpagina kijken dan blijkt dat de ‘normaal’-waarde staat voor wat dit product elders kost. Elders is alleen een behoorlijk ouderwets woord, dus kies ik nu voor ‘Concurrentie’. Al ben ik hier ook niet echt zeker van of dit hem moet worden. De concurrent van 123toilet beweert ALLES goedkoper aan te bieden dan de concurrentie. Dit is ook niet echt geloofwaardig als je het mij vraagt en onderzoek heeft uitgewezen dan consumenten hier inmiddels dwarsdoorheen prikken.

De magische spreuk, de payoff en de footer

Wat mij betreft mogen we hier best een beetje trots op zijn en duidelijk mee afsluiten. Vandaar over de gehele breedte, lekker groot, de payoff van 123toilet.nl. HOPPA!

De footer, de bodem van de website geef ik in dit geval een stevige blauwe kleur. Hierdoor krijgt de website een  fundament en is het duidelijk dat het hier einde pagina is. Hierin staat enkele vaste gegevens en weinig poespas.  Ik wil hier nog wel een persoonlijke touch aan toevoegen, iets van het team of iets dergelijks, want over het algemeen is het nu erg veel product en nog een beetje weinig mens.  Als laatste nog even een afscheurrandje van een toiletpapiertje boven de footer geplakt.. en klaar is Tarek.

Er is lang genoeg erover gesproken…. Dit is het eindresultaat: