In oktober 2021 heb ik gewerkt aan het project voor de herontwerp van de footer van Kabelshop.nl. Uit de data en heatmaps bleek dat er weinig interactie was met de footer en dat het ontwerp niet consistent was met de rest van de website. Ik kreeg de opdracht om een herontwerp voor de footer te maken. Samen met het IT-team heb ik drie maanden aan het project voor het herontwerp van de footer gewerkt.
Skillset
User Research, Concept, Wireframing, User Experience, User Interface
Doel
De website overzichtelijker maken op het gebied van design en bezoekers makkelijk door de website laten navigeren.
Kabelshop footer desktop en mobiel
Wireframes Desktop & Mobiel
Lo-fi functionaliteit mobiel
Voor de footer heb ik gekozen voor een designpatroon met een uitklapbare functionaliteit (+ en -). Aangezien Kabelshop.nl veel subcategorieën heeft, leek dit de beste oplossing. Met dit ontwerp wordt voorkomen dat de footer onnodig lang wordt op mobiele apparaten, waardoor gebruikers niet lang hoeven te scrollen. Bovendien zorgt dit voor meer overzicht voor de gebruiker, zonder de focus te verliezen.
Categorieen blijven overzichtelijker met behulp van deze functionaliteit.
Menu klapt open zodra gebruiker erop klikt. Zo kan hij/zij een keuze maken.
Huisstijl van Kabelshop
#91C13E
#DAF5E1
#DE0D7C
#FFFFFF
#111210
Open Sans Bold
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Open Sans Regular
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Categorieën van de website. Na het scrollen op de homepage kunnen bezoekers ook onderaan in de footer navigeren naar bepaalde categorieën. Hiervoor hoeven zij niet naar boven te scrollen.
Een aparte sectie voor klantenservice en informatie over het bedrijf. Op deze manier is het overzichtelijk voor de bezoekers en kunnen zij sneller navigeren naar hun bestemming.
Hi-fi ontwerp desktop
Ik heb een wireframe voor desktop ontworpen in de huisstijl van Kabelshop.nl. Hierbij is de volledige huisstijl van Kabelshop.nl toegepast. Gebruikers kunnen nu ook vanuit de footer naar specifieke categorieën navigeren, zonder helemaal naar boven te hoeven scrollen. Dit maakt het voor hen een stuk eenvoudiger.
Hi-fi ontwerp mobiel
Ik heb ook een wireframe voor mobiel ontworpen, waarin een nieuwe functionaliteit is geïmplementeerd: plus- en min-icoontjes die als dropdown-menu’s fungeren. Wanneer een gebruiker erop klikt, klapt het menu open. Als de gebruiker vervolgens op een andere categorie klikt, wordt het menu dat eerder geopend was automatisch gesloten.
Gestures
Resultaten van redesign footer kabelshop.nl
SEO
Alle linkjes op de homepage geven extra kracht mee in de ogen van Google. Oftewel, staat een link op de homepage, dan denk Google dat dit een belangrijkere omgeving is t.o.v. pagina’s die niet direct gelinkt worden
Doorlinken
Veel mensen scrollen naar onderaan de pagina. Nu we hier extra onder de aandacht brengen wat we allemaal bieden is de kans groter dat de websitebezoekers eerder vinden wat ze zoeken.
Mobiel
Op mobiel ziet de nieuwe footer een stuk overzichtelijker uit met plusje om een categorie verder te openen en met minnetje om te sluiten. Dit zorgt voor meer orde en onnodig lange footer op mobiel.