UX website redesign - zo fixen wij dat (in 5 stappen)

Het team om tafel. Exitable's UX designers aan de ene kant, Gymna’s afgevaardigden aan de andere. Let's go!

De briefing

Het merk Gymna op de juiste manier online profileren, en het voor de gebruiker zo makkelijk mogelijk maken om producten te bekijken en een offerte of informatie aan te vragen.

Hulpmiddelen

Gymna’s eigen grote schat aan kennis aan de ene kant, en de grote berg slimme data aan onze kant.

Uitwerking en opleveringen

• Uitwerking digitaal landschap
• User Centered Design Canvas
• UX research & toepassingen
• Digitale Strategie
• Wireframes
• Design met klikbaar prototype
• Custom Responsive Drupal Front-end theme
• Drupal 8 back-end met eenvoudig beheer
• Dashboard met real time statistieken en inzichtelijke KPI prestaties

Dat is wat eruit moet komen, aan het eind van het traject samen. Dit is hoe we dat fixten, in deze volgorde:

De aanpak, in 5 stappen

Het doel is duidelijk, de briefing helder, de uitkomsten in kaart. Tijd voor een plan van aanpak. Tijd voor actie. Gestructureerde actie, welteverstaan:

• Overzicht – Gymna’s digitale landschap in kaart brengen.
• Discovery fase – eindgebruiker onder de loep nemen.
• UX Research – onderzoeken hoe we het design het beste bij de gebruiker aan kunnen laten sluiten
• Uitvoering – de scrum sprints
• Het meetplan – testen, meten, itereren.

Zo kan een UX designer werken. Kop, staart en de juiste stappen en tools daar tussenin. Dit zijn de onze - in project Gymna - uitgebreid op een rij, van 1 tot 5.

1. Overzicht - het digitale landschap in kaart.

Om een goed online product neer te zetten, moet er een strategie zijn. Gevalletje eerst denken, dan doen. En om die digitale strategie te bepalen, moeten we eerst weten wat de huidige situatie is.

Dus brengen we het digitale landschap van Gymna allereerst in kaart, en baseren onze strategie op het verbeteren / optimaliseren van de flows tussen de verschillende digitale communicatiemiddelen:

“We baseerden onze strategie op het optimaliseren van de flows tussen de verschillende digitale communicatiemiddelen”

2. Discovery fase - eindgebruiker onder de loep (met UCDC)

Voor een goed eindproduct, moet je weten wie je gebruiker is. Vanuit ‘hem/haar’ denken. In de discovery fase nemen we daarom de eindgebruiker onder de loep en plaatsen deze centraal in de digitale strategie.

Met behulp van het User Centered Design Canvas (UCDC) leren we de doelgroepen kennen. We kennen hun problemen en komen erachter wat zij belangrijk vinden in het maken van keuzes. Met deze informatie bedenken we de digitale oplossingen die het nieuwe platform de gebruiker kan bieden. Vervolgens koppelen we deze aan de business doelstellingen van Gymna, volgens briefing.

“User Centered Design Canvas: it’s all about the user”

3. UX Research - het product afstemmen op de gebruiker

De gebruiker staat nog steeds centraal. Tijd voor onderzoek, in stap 3. Gebruikers georiënteerd onderzoek, dus. Ofwel: UX Research.

UX research verplicht ons te denken vanuit de gebruiker, en dat maakt het verschil tussen een mooi plaatje en een efficiënt product. 

“UX Research maakt het verschil tussen een mooi plaatje en een efficiënt product.”

Onze 4 UX Research ontdekkingen, voor Gymna:

3.1 Product structuur moet anders

De belangrijkste ontdekking die we tijdens user research deden was hoe de gebruiker omgaat met de huidige product structuur. Gymna heeft een aantal productcategorieën met onderliggende producten en daarbij weer verschillende uitvoeringen. 

Bezoekers weten wel welk product zij nodig hebben, maar weten niet precies welke uitvoering. Moeten ze dat wel al weten? Of is dat op dit punt in de customer journey nog niet relevant? We namen de gehele besluitvorming in de klantreis van de bezoeker nog eens goed onder de loep en pakten op basis hiervan de productstructuur aan.

Waar eerst alle 7 productcategorieën een andere structuur en indeling hadden, hebben we een nieuwe structuur ontwikkeld die bij elk product past. We hebben in de nieuwe structuur een gehele productlaag (uitvoeringen) weggelaten en verwerkt in de achterkant van het systeem. Zo maken we de we gebruikerservaring en daarmee de besluitvorming voor de aankoop een stuk eenvoudiger.

De gebruiker die precies weet wat hij/zij wil heeft nu de mogelijkheid om productspecificaties te kiezen, die hem of haar naar de juiste uitvoering van het product leiden. Dit is echter optioneel, waardoor bezoekers die (nog) niet precies weten wat ze nodig hebben niet lastig gevallen worden met onnodig moeilijke keuzes.  

3.2 Er is behoefte aan real life

Fysiotherapeuten zijn mensen die graag met hun handen werken. Een product dat essentieel is bij hun dagelijkse werkzaamheden willen zij dus graag eerst ‘echt’ voelen. Bijvoorbeeld een behandeltafel wordt niet zomaar online gekocht, maar wordt eerst bekeken en getest in een showroom.

Dit inzicht bevestigde dat directe online verkoop minder potentie heeft binnen deze productgroep. Wel kunnen we gebruikers online naar een fysiek contactmoment helpen in een showroom, door de dealerinformatie als voornaamste conversiepunt op te nemen in de customer journey.

3.3 Vertrouwen en service is belangrijk

Bij een grote investering in producten in je fysiopraktijk verwacht je een bepaalde kwaliteitsstandaard en service. Je wil persoonlijk contact en een product dat uitermate betrouwbaar is.

Dit inzicht verwerken we in ons design:

• door de producten helder weer te geven
• specificaties duidelijk uit te lichten
• de meer dan 50 jaar ervaring van Gymna uit te lichten om zo de ervaring, kennis en betrouwbaarheid van het merk over te brengen
• door te laten zien dat Gymna actief is over de hele wereld, maar ook kennis heeft van alle lokale behoeftes: "A global partner with local expertise"
• door "client cases" te laten zien om de expertise en betrouwbaarheid te onderbouwen
• daarnaast zorgen we ervoor dat contact opnemen op elke pagina beschikbaar is op verschillende manieren, via een dealer, per telefoon, e-mail of zelfs chat. Ook worden de werknemers van Gymna veelvuldig getoond op foto's. Zo blijft Gymna benaderbaar en persoonlijk.

3.4 Verschillende type gebruikers vragen om combi-pagina

Representatiesystemen leren ons om voor verschillende typen mensen te ontwerpen. De een is erg visueel ingesteld, de ander leest liever alle ins en outs en weer een ander wil graag een video ter verduidelijking. Zaak is om al deze mensen te geven waar ze naar op zoek zijn.

“Representatiesystemen leren ons om voor verschillende typen mensen te ontwerpen. De een is erg visueel ingesteld, de ander leest liever alle ins en outs.”

Met dit inzicht hebben we een combinatie gemaakt van een productpagina en een landingspagina. De landingspagina is bedoeld om met behulp van inspirationele en visuele informatie de bezoeker te triggeren om meer informatie tot zich te willen nemen. Op deze pagina, die optioneel is binnen de content-structuur, motiveren we de gebruiker om door te klikken naar de pagina met productgegevens. Deze pagina is vormgegeven als een echte productpagina zoals we die kennen, toegespitst op productspecificaties en details.

4. Uitvoering - de scrum sprints

Op basis van de scope (omvang) van het project besloten we om volgens de scrum werkwijze te werk te gaan: in sprints van 2 weken. In 6 sprints zijn de insights uit voorgaande stappen verwerkt in een design, en iteratief ontwikkeld. Aan het begin van elke sprint begonnen we met een kick off met de product-owner van Gymna. In deze kick off werden de prioriteiten en werkzaamheden voor de komende sprint bepaald. Hierbij was de product-owner (dus de klant) leidend in het maken van beslissingen. Zo bleef de klant dus gedurende het hele traject "in control". Aan het eind van elke sprint werd een demo van de afgeronde werkzaamheden gegeven. Dit is wat de scrum-methode zo mooi maakt; elke twee weken is er weer een oplevering waarin je het eindproduct gefaseerd tot leven ziet komen. 

Project management

Hoewel de klant, als product owner, de leiding heeft in de besluitvorming, verzorgen wij als Exitable het project management. Zo kunnen we er samen voor zorgen dat de werkzaamheden binnen de afgesproken deadlines en het beschikbare budget blijft. Uiteraard maken wij als digitale nerds hierbij gebruik van een digitale project management tool: Asana is onze favoriet bij het scrummen. Alle stories uit de backlog kunnen hier naar een scrum-board worden verplaatst, zodra er aan gewerkt wordt:

Natuurlijk gaat er niets boven een fysiek scrum-board. Een wand vol post-its zorgt ervoor dat de planning en de werkzaamheden altijd helder en overzichtelijk zijn. 

Aan de slag

De eerste sprint (sprint 0) brengt doorgaans veel druk met zich mee. In deze sprint worden de verkregen inzichten tijdens de discovery-fase vertaald naar een idee en vervolgens een design. Hoewel het hele team hierbij betrokken wordt, is het de UX designer die hier de belangrijkste rol in speelt.

Dit resulteert in een klikbaar prototype. Dit presenteren we aan het eind van die sprint in Invision. Na feedback van de klant wordt dit prototype vervolgens "gefinetuned".
 

Belangrijk in sprint 0 is dat de basis van het design staat, zodat ontwikkelaars er mee aan de slag kunnen in sprint 1. Als (UX) designers zorgen we er telkens voor dat de elementen die nodig zijn in de volgende sprint, in de huidige sprint klaar staan voor gebruik. Zo kan iedereen elke sprint vooruit. Op die manier werken we samen toe naar de lancering (livegang) van de eerste - Minimum Viable Product - versie.

“Als (UX) designer zorgen we er telkens voor dat de elementen die nodig zijn in de volgende sprint, in de huidige sprint klaar staan.”

5. Het meetplan - testen, meten, itereren

Na lancering zijn we natuurlijk nog niet klaar. We zullen de prestaties van het redesign nauwlettend gaan monitoren, om te kijken of we onze doelen bereiken. De in de strategie bepaalde KPI’s zijn verwerkt in een meetplan. Dit zorgt ervoor dat we de juiste data vergaren. Deze data analyseren we vervolgens periodiek, om het redesign constant te blijven verbeteren.

Ervaring leert dat een digitaal product nooit 100% af is. Het product wordt altijd beter naarmate we leren van de gebruikers(statistieken), en op basis hiervan het product doorontwikkelen.

Het testen, meten en itereren is daarom een continu proces dat de gebruikerservaring en de prestaties van het webplatform blijft verbeteren. Hiermee wordt écht het verschil gemaakt, want er is niks zo waardevol als je eigen data en statistieken. We zien helaas dat dit nog te weinig wordt toegepast, waardoor webplatformen na de lancering niet meer verbeterd worden. Eeuwig zonde.  Daarom hebben wij analyse en doorontwikkeling tot een standaard onderdeel in ons dienstenpakket gemaakt.

“Ervaring leert dat een digitaal product nooit 100% af is. Het product wordt altijd beter naarmate we leren van de gebruikers(statistieken),

Dat betekent dat we Gymna vanaf livegang maandelijks spreken om de resultaten te bekijken en de doorontwikkeling hierop aan te passen. In dit geval gaat het dan met name over:

• Dealer interacties
• Product interacties
• Offerteaanvragen

Laatste stap: party time!?

Deze mag zeker niet vergeten worden. Eigenlijk de 6e stap in het hele proces: het resultaat vieren.

We werkten maandenlang met een sterk en dedicated team (inclusief product owner Sofie van Gymna) aan dit gebruikersgerichte platform. De samenwerking was intensief en het proces soms een uitdaging, én we hebben samen de “hell yeah” momenten gedeeld. Als de hele boel dan live gaat, is dat meer dan reden genoeg voor een feestje. Met vlaai uiteraard.

Bekijk het eindresultaat op: gymna.com.