Sketch
Web & App
UX Research, Wireframes, Visual Design, Design System, Klikbare demo’s
Hoe kunnen we Hussel digitaal aan nieuwe en bestaande klanten uitleggen en eenvoudig (bij)verkopen?
De huidige propositie sluit niet goed aan bij (nieuwe) klanten en wordt vaak niet begrepen. Klanten vinden het lastig om producten te kiezen en extra korting te krijgen bij aankoop van meerdere producten.
1 jaar
Uitleg over het project
Een extern bureau heeft dit jaar het concept Hussel zonder Hassle opgeleverd met het doel Hussel digitaal uit te leggen en (bij)verkopen. Voor ik begin te vertellen waaraan ik heb gewerkt is het goed om eerst uit te leggen hoe het concept Hussel tot stand is gekomen en vanuit welk punt mijn team heeft verder gewerkt aan dit project nadat het externe bureau het aan ons had opgeleverd.
Hussel zonder Hassle
Hussel stelt klanten in staat om eenvoudig aangepaste productpakketten samen te stellen die voldoen aan hun behoeften. Basispakketten richten zich op specifieke doelgroepen, zoals gezinnen, tech-liefhebbers en huisgenoten. Klanten kunnen extra producten toevoegen aan deze pakketten voor extra korting op de totaalprijs. Daarnaast hebben gebruikers de vrijheid om zelf een pakket samen te stellen met behulp van de Hussel configurator, waarbij ze kunnen zien welke producten goed bij elkaar passen en aansluiten op hun behoeften. Het kortingsniveau neemt toe naarmate meer producten worden toegevoegd.
Iteratief design en test proces & activiteiten
Hieronder staat weergegeven hoe het Hussel zonder Hassle proces tot stand is gekomen en welke fases en activiteiten er zijn doorlopen.
Conceptsprints
Om het concept te testen zijn er 4 conceptsprints uitgevoerd om te testen hoe het nieuwe concept ontvangen zou worden door de klanten van KPN.
Concepttests
Van iedere sprint is vervolgens een concepttest uitgevoerd met (ex) klanten van KPN om te zien hoe het concept begrepen zou worden en waar eventueel knelpunten zouden liggen. De uitkomsten per concepttest zijn hieronder te zien.
Doel & aanpak
Nu we de kernpunten van het Hussel project hebben besproken, geef ik een toelichting op de uitwerking van de details van het concept. Deze details hadden betrekking op de manier waarop een bezoeker de website doorloopt, producten bekijkt en bestelt.
Detaillering interaction design
Dieper in op de Interactie componenten van Hussel 2.0
Nadat Soda het basis concept had opgeleverd zijn we naar de ontbrekende details van de flows en componenten gaan kijken. Denk onder andere aan de volgende zaken:
- Kortingen
- Opbouw kassabon
- Postcode check scenario’s
- Verlengen
Feedback rondes met stakeholders
Iedere week zijn er een aantal componenten opgebouwd op de detaillering die Soda had neergezet. De realisatie hiervan ging als volgt:
- Sprints van twee weken
- Feedback review ronde met de stakeholders
- Feedback verwerken en opnieuw afstemmen
De huidige website van Hostnet
Hieronder staan drie afbeeldingen getoond van hoe de huidige website van Hostnet eruit zag voor we deze zijn gaan vernieuwen.
Een aantal uitgewerkte concepten
Vervolgens zijn we verschillende nieuwe concepten gaan uitwerken voor de homepagina, portfolio pagina en productpagina. We hebben deze verschillende designs vervolgens uitgeprint en zijn vervolgens met het hele team en stakeholders gaan kijken welke het beste beoordeeld waren door de mensen. Dit hebben we gedaan aan de hand van een puntenverdeling over de getoonde concepten.
De domeinnaam checken pagina van Hostnet
Voor andere pagina’s zoals de domeinnaam checken pagina, winkelmand pagina en checkout pagina hebben we ook verbeteringen aangebracht en het redesign doorgevoerd. De domeinnaam checken pagina is getest in het UX-lab met zes testpersonen. De uitkomsten hiervan, zoals het duidelijker weergeven van de domeinnaam extensies en prijzen zijn doorgevoerd in het ontwerp.
Winkelmand, cross-sell en de checkout wireframes
Nadat we de algemene pagina’s hadden vernieuwd zijn we naar het bestelproces gaan kijken wat daarin verbeterd kon worden. Dit bestelproces hebben we twee keer getest door middel van wireframes in het UX Lab. Een keer op Desktop en een keer op Mobiel. De desktop weergave van de wireframes is hieronder te bekijken.
Winkelmand, cross-sell en de checkout designs
Vervolgens zijn we de wireframes voor zowel de mobiele als de desktop weergave gaan uitwerken in high fidelity ontwerpen.
Terugblik op het project
Tijdens het gehele proces om de website te vernieuwen zijn alle belangrijke pagina’s meegenomen. De nieuwe stijl is overal doorgevoerd waardoor er een goede consistentie is ontstaan over de hele website. Daarnaast zijn door het onderzoek van het segmenteren van de klanten naar persona’s de producten en de websitepagina’s ingedeeld zodat het de verschillende klanten van Hostnet beter zal bedienen en aanspreken. Deze aanname hebben we kunnen nemen omdat we dit tijdens interviews en gebruikerstests naar voren hebben zienkomen bij de feedback van de testpersonen.
Tijdens het proces om de website te vernieuwen zijn alle belangrijke pagina’s goed gemonitord op het bezoekersgedrag en het doorklik gedrag van de bezoekers. Van hieruit zullen we de komende maanden bijhouden wat de statistieken laten zien tegenover de oude pagina’s. Waar nodig is zal vervolgens verder geoptimaliseerd worden indien de cijfers een lagere conversie tonen of als het doorklik gedrag lager is dan bij de vorige oude website.
Tijdens dit project ben ik de schakel geweest tussen front-end, conversiespecialisten en een backend team. Daarnaast heb ik veel geleerd van het hele UX-traject. We zijn echt als team door alle 5 de UX-fases van Jesse James Garret gegaan om het project zo gefundeerd mogelijk uit te werken tot een succesvol project.
