User Experience Design

UX/UI Design & PWA

UX/UI afstudeeropdracht

Introductie

Reisartikelen.nl is een expert op het gebied van reisartikelen en biedt uitsluitend online reisgerelateerde producten aan. Reisartikelen.nl heeft als missie om consumenten georganiseerd, comfortabel en veilig op reis te laten gaan.

De webshop van Reisartikelen.nl moet opnieuw gebouwd worden. De werkelijke vraagstelling gaat niet over een nieuwe website, maar over het verhogen van de online verkopen via de website.

Met een stijging van het aantal bezoekers, een groter aantal huidige bezoekers dat besluit tot een aankoop en een hoger aantal terugkerende bezoekers zal het conversiepercentage stijgen en daarmee ook de online aankopen. Om deze hypothese te onderzoeken is de volgende hoofdvraag geformuleerd:

Hoe kan de user experience van Reisartikelen.nl worden verbeterd, zodat de omzet zal stijgen?

Design Toolkit

Design & Onderzoek Tool Kit
Home scherm Reisartikelen.nl

Reisartikelen.nl Optimalisatie

Inzichten

Het is belangrijk om vast te stellen welke doelgroep het beste past bij Reisartikelen.nl en welke trends en technologieën van invloed kunnen zijn op het concept.

Uit de enquête en deskresearch kan worden geconcludeerd dat de doelgroep die het beste bij Reisartikelen.nl past, bestaat uit een postmoderne groep die interesse toont in het opdoen van nieuwe ervaringen. De groep valt tussen de 25 en 40 jaar en is online actief. Er wordt regelmatig een online aankoop gedaan en de groep verwacht een heldere webshop.

Progressive Web Apps (PWA)zijn websites die zich gedragen als een applicatie. Het is een relatief nieuwe technologie en voor veel mensen nog een vaag begrip. Een PWA kan het gemak van een native app bieden via de browser. Het blijft dus een website maar het gebruikt de functionaliteiten van een mobiel apparaat.

De PWA vervangt de normale app. Personalisatie biedt een klantgerichte winkelervaring en de implementatie hiervan kan voor meer converterende klanten zorgen.

Inzichten statistieken

Momenteel bezoeken er maandelijks 25.000 mensen de webshop van Reisartikelen.nl. Het verschil in bereik ten opzichte van de concurrenten is erg groot waarbij Reisartikelen.nl een klein aantal volgers heeft. Concurrenten participeren en initiëren veel vaker. Wanneer Reisartikelen.nl ervoor kiest om meer mensen naar de webshop de webshop te trekken, kan dit het beste worden gedaan door social media in te zetten.

Na aankomst op Reisartikelen.nl gaat ongeveer 50% van de bezoekers verder op de webshop. Hiervan plaatst ongeveer 7% een product in een winkelmandje. Ruim de helft daarvan doorloopt het checkout proces en slechts 62% daarvan rekent daadwerkelijk af. Hierdoor bedraagt het conversiepercentage ongeveer 1,6%. Het belangrijkste aandachtspunt is de lage conversie naar de winkelmand.
Uit de analyse kan verder worden opgemaakt dat de webshop rommelig is met veel inconsistenties. Ook is het gebruikersgemak laag, waardoor de call to actions niet aanslaan. Webshops van concurrenten kennen een hoger gebruiksgemak. De tekortkomingen in het gebruikersgemak van Reisartikelen.nl is de belangrijkste oorzaak voor het lage conversiepercentage.

Google Analytics van Reisartikelen.nl

80% van de bezoekers op Reisartikelen.nl zijn nieuwe bezoekers en 20% zijn terugkerende bezoekers.
Door bezoekers te prikkelen keren zij sneller om een nieuwe aankoop te doen. Dit ‘prikkelen’ vindt plaats wanneer een bedrijf bezoekers naar de webshop probeert te lokken, of wanneer bezoekers worden verleid om een aankoop te doen.
Door de klant relevante informatie te bieden, in te spelen op social media en iets speciaals te bieden dat de concurrenten niet doen wordt de kans vergroot dat de klant terug zal keren en om zo een concurrentievoordeel te creëren.

Guiding Principles

Overzichtelijk Guiding Principle

1. Maak het overzichtelijk

Persoonlijk Guiding Principle

2. Breng het persoonlijk

Communicatie Guiding Principle

3. Zorg voor goede communicatie

Concept

Aan de hand van alle inzichten is het volgende concept tot stand gekomen:

Het nieuwe e-commerce platform van Reisartikelen.nl is een gebruikersvriendelijke dienst om alle reisbenodigdheden makkelijk in huis te halen. Waar je ook bent, je kunt door middel van je mobiele telefoon een duidelijk en frisse uitstraling verwachten met een persoonlijke benadering. Heeft men een vraag dan is het antwoord goed terug te vinden, of kan er op verschillende manieren contact worden opgenomen.

Navigatiestructuur

Vanwege de implementatie van een PWA betekende dit dat het uiterlijk, maar ook de structuur van het nieuwe platform gebaseerd moet worden op die van een normale app.
Om een goed beeld te krijgen van ‘webshop apps’ is een kort onderzoek uitgevoerd om te achterhalen hoe deze eruit zien. Daarbij zijn de volgende apps bestudeerd op basis van structuur: Bol.com, Coolblue, Wehkamp en Zalando.
Wat duidelijk naar voren kwam was dat elke app gebruik maakte van een navigatie aan de onderkant van het telefoonscherm. Dit is een goed alternatief van het hamburger menu. Naast de nieuwe categorie structuur moest de manier waarop informatie werd gecommuniceerd met de doelgroep anders worden ingedeeld.

Sitemap van Reisartikelen.nl

Wireframes

Nu werd er een eerste opzet gemaakt van de uitstraling van de PWA door middel van wireframes. Na het testen van de wireframes bleek één van de meest voorkomende punten dat sommige elementen onduidelijk waren, zoals iconen en knoppen. Sommige wireframes waren te druk waarbij er teveel informatie te zien was. Een goed voorbeeld hiervan is de winkelwagen waar een product aan toegevoegd was. In hetzelfde scherm werden ook andere producten aanbevolen. Dit was een informatie overload. Verder vond men de navigatiestructuur die verbeterd was veel overzichtelijker dan de originele versie van Reisartikelen.nl.

Home Wireframe Reisartikelen.nl Zoeken Wireframe Reisartikelen.nl Productpagina Wireframe Reisartikelen.nl Contact Wireframe Reisartikelen.nl Meer Wireframe Reisartikelen.nl Bestellen Wireframe Reisartikelen.nl

Na het maken en testen van de wireframes is er een start gemaakt en het maken van een prototype. Er zijn 3 scenario’s bedacht die de basis vormen van de prototypes. Ook de prototypes zijn vervolgens weer getest. Sommige feedbackpunten gingen over het missen van bepaalde knoppen. Andere punten waren groter, zoals de voortgangsbalk die niet duidelijk overkomt tijdens het afrekenproces. Doordat er van sommige schermen steeds meerdere varianten gemaakt waren, konden de deelnemers goed hun mening geven over welke ze er beter vonden uitzien.

Usability Testing

Het eerste scenario staat in het teken van het kiezen van een product en het aan de winkelwagen toevoegen daarvan. Daarbij is het belangrijk om te laten zien hoe het overzicht is gecreëerd door nieuwe categorieën en door het toepassen van een nieuwe navigatie.

In het tweede scenario kwamen er meer functionaliteiten en personalisatie van de PWA terug door een notificatie toe te voegen. Wat in dit scenario belangrijk was, waren wederom overzicht en duidelijkheid, maar ook communicatie en de navigatie door het bestelproces.

Het aandachtspunt in dit scenario is de makkelijke manier om informatie te vinden. Ook het persoonlijke aspect keert terug doordat je kunt inloggen.






Wat ik heb geleerd

Gedurende dit project heb ik meerdere dingen geleerd. Zoveel mogelijk bruikbare informatie uit verschillende bronnen halen om vervolgens dit mee te nemen en te gebruiken in het bedenken van een gepaste oplossing voor het probleem van de opdrachtgever. Ook heb ik geleerd om meer mensen in mijn proces te betrekken die feedback kunnen geven op mijn werk. Gebruikersonderzoek, feedback op concepten en prototypes. Ik heb mezelf verder verdiept in de programma’s Sketch en Adobe Xd, zodat ik bekwamer ben in het gebruiken van prototype programma’s en sneller kan prototypen.