Case: Office Depot / Viking

Na een wereldreis van 9 maanden plus een verhuizing naar Limburg ging ik weer op zoek naar een baan. Gelukkig waren er vrij snel meerdere opties om uit te kiezen, maar uiteindelijk werd het Office Depot (Europe). Een multinational die in een digitale transitie zat. De webshops stonden er al wel, maar van een duidelijke online focus was nog geen sprake. Er werd nog erg veel energie gestoken in de offline catalogi.

1. Structuur en tools

Het eerste wat me opviel toen ik begon bij Office Depot is hoe onduidelijk de structuren waren binnen de organisatie. Dat er enorm veel verschillende teams bestonden met allemaal een eigen vinger in de pap. Daardoor konden processen vrij ingewikkeld worden.

Het is dan belangrijk om uit te schetsen wat die teams doen en hoe ze in relatie staan tot het UX/UI team. Aangezien het team nog vrij nieuw was voor de organisatie, waren die lijntjes nog allerminst duidelijk. Daarom hebben we eerst hard gewerkt om de dit te definiëren.

Het tweede wat me meteen opviel is het gebruik van Photoshop en Axure. Nu is Axure een prima tool, maar het heeft wel een grote ‘learning curve’; het maken van prototypes is bijvoorbeeld niet erg laagdrempelig. Photoshop is daarnaast iets ‘not done’ voor een UX team. Ik vond het vrij onvoorstelbaar dat het UX team nog met Photoshop werkte als design tool.

Sketch is wat dat betreft een veel lichtere tool die veel beter om kan gaan met ‘symbols’ (repeterende elementen) en heeft daarnaast ook nog de mogelijkheid om prototypes te maken. Dit is waarom we snel zijn overgeschakeld naar Sketch en ook het werken met InVision.

2. Consistentie

Op de website was er ook nog wel wat werk te doen. Er heerste namelijk een enorme inconsistentie. Een aantal dingen hebben we als UX team geïntroduceerd om dit in de toekomst te voorkomen:

Styleguide met vaste componenten
Vast kleurenpalet met vooraf gedefinieerde campagnekleuren
Design system met design tokens en symbols (work in progress)

De styleguide en het kleurenpalet van de Viking website

Het ‘design system’ is op dit moment nog in progress. Hier kan ik daarom ook niks van laten zien. Het voorziet in ieder geval in een systeem waarbij componenten worden opgebouwd uit kleinere elementen en ’tokens’. ‘Tokens’ zijn bijvoorbeeld dingen als kleur, lijndikte, afstanden en typografie.

Dat het ‘Design system’ nog ingevoerd moet worden is wel af te zien aan de websites van Viking. Die zijn nog niet bepaald wonderschoon te noemen.

3. Storefront builder

Als onderdeel van de consistentie en ook het ‘opruimen’ van de website, hebben we als UX/UI team een ‘storefront builder’ ontworpen en gebouwd. Met deze ‘builder’ hebben we de tijd voor het bouwen van een standaard campagne pagina bijna gehalveerd. Met de huidige systemen duurde het namelijk 177 uur om een normale campagne pagina te lanceren. Nu duurt het ongeveer 100 uur.

Naast het bouwen van standaard campagne pagina’s hebben we de builder ook uitgebreid met andere soort pagina’s, banners en andere standaard elementen. Op deze manier konden we ook de kwaliteit en de consistentie waarborgen, naast de tijdwinst die het opleverde.

4. Testen

Het testproces was binnen Office Depot / Viking nogal onregelmatig en werd gedaan wanneer het uitkwam. Er was geen vast testproces dat onderdeel was van een groter iteratief proces.

Dit gold voor zowel het A/B testen als het User Testen. Samen met het ‘Digital Experience’ team en het ‘User Research’ team hebben we deze processen wat beter proberen vorm te geven.

Er lagen wel zeer veel uitdagingen:

Het development proces sloot niet goed aan
User testen werden vaak willekeurig geïnitieerd
A/B testing tools werkten niet goed

Ondanks deze belemmeringen hebben we met de bovengenoemde teams toch veel bereikt en zijn er veel succesvolle tests van band gerold.

5. Back office microservices

Naast veel opgeleverde front office projecten, heb ik binnen Office Depot / Viking ook veel ontworpen voor back office services.

Zoals al eerder genoemd is Office Depot / Viking een bedrijf in transitie. Een digitale transitie. Er bestonden nog steeds veel oude en logge systemen die aan vervanging toe waren. Daardoor is er voor gekozen om al die systemen stuk voor stuk te vervangen met kleinere microservices.

Deze konden MVP (minimum viable) worden opgeleverd en daarna stap voor stap verder worden ontwikkeld. De uitdaging bij deze services was om te zien wat het minimale was wat de gebruiker nodig had om de oude tools te kunnen vervangen. Daarna werd met de developers en de product owner gekeken naar wat als volgt moest worden opgeleverd.

Dit is een process dat nog steeds gaande is, maar al verschillende applicaties zijn vervangen. Alle services zijn gemaakt met dezelfde UI en daardoor is de ‘learning curve’ voor gebruikers vrij klein. Bijna intuïtief!

Helaas kan ik niks van deze back office microservices laten zien.

6. ‘Visual navigation’

Voorheen konden gebruikers alleen navigeren door de categorieën doormiddel van navigatie linkjes. De tekst kon misschien vertellen waar de gebruiker naar toe ging navigeren, maar visuele ondersteuning kreeg de gebruiker niet.

Daarom heb ik samen met andere teams de ‘visual navigation’ geïntroduceerd. Na het element eerst te hebben getest, bleek het uitermate goed voor onze gebruikers te werken. Gebruikers konden op deze manier op een visuele manier worden geassisteerd in het maken van hun keuze. In meerdere gebruikerstesten hoorden we dat het erg werd gewaardeerd.

Voorbeeld van de ‘Visual navigation’ op de batterijen pagina

Ook in de Google Analytics data zagen we duidelijk positieve resultaten terug. De gebruikers die interactie met het element hadden, hadden een conversie van 38%, dit in tegenstelling tot de 11% voor alle gebruikers. Verder zagen we de categorieën waar de ‘visual navigation’ werd geïntroduceerd de ‘page value’ steeg van €35 naar €48. Een duidelijke stijging.

Op dit moment wordt dit element op steeds meer categorie pagina’s uitgerold.