Wouter Buning

UX Designer

Een nieuwe weg naar de perfecte aardappel

Primaire ondersteuning van het volledige veredelingsproces

"We need a new trial field registration system that supports the ‘HZPC way of working’ in the most efficient way.
Deliver a robust and future proof expandable system with the re-use of the current database."

Project mission as stated by CEO of HZPC Research

Stapsgewijze transitie terwijl het primaire proces gewoon door moet gaan

In de rol van freelance ux designer heb ik meegewerkt aan het vervangen van de primaire applicatie voor aardappelveredelaars.

Door het aflopen van support voor de tools en technieken die in gebruik waren ontstond de noodzaak voor een vervanging.

Met een extern agile scrumteam werkten we on-site in direct contact met eindgebruikers. In 14 maanden hebben we stapsgewijs de transitie van een database-gestuurde applicatie naar de nieuwe werkproces-ondersteunende applicatie gerealiseerd.

Een nieuwe weg naar de perfecte aardappel

Van oud naar nieuw

Dit was de software zoals die in gebruik was. De opdracht was om oud en nieuw side-by-side te laten draaien om een geleidelijke overstap mogelijk te maken.

Om dit te realiseren hebben we gedurende ons project per (deel)process functionaliteiten opgeleverd. Wanneer deze in productie genomen waren hebben we (waar mogelijk) functionaliteiten uitgezet in de oude software.

Stap 1:
De werkprocessen in kaart brengen

Uitgebreid meelopen

Met de luxe van in-house plaatsing konden we gemakkelijk met elk deelproces meelopen om de workflow en de context zelf mee te maken.

Er was geen drempel om gebruikers te interviewen, concepten te toetsen en user tests uit te voeren.

Flow diagram

In de eerste fase heb ik alles wat ik gehoord en gezien heb terug gebracht tot een eenvoudig flow diagram van de fundamentele processtappen.

Dit diende als kapstok tijdens het hele verdere traject en gaf richting aan zowel design sessies als sprint planningen.

Card Sorting

Met het team en de product owners kwamen we zeer regelmatig bij elkaar om input samen te brengen en te ordenen.

Design sessies

Voor de belangrijkere deelprocessen brachten we alle betrokken stakeholders samen om ieders belangen te erkennen. Met als resultaat: overeenstemming over een gezamenlijke oplossingsrichting.

Stap 2:
Het ontwerpen van de oplossing

Micro interacties en screen states

Alle stappen en micro interacties werk ik eerst schetsmatig uit. Voor mij de beste manier waarmee ik snel ideeën naast elkaar kan leggen om ontwerpkeuzes te maken.

Vervolgens heb ik ze ook gebruikt om te sparren met developers en product owners en af te stemmen met eindgebruikers.

Schetsen

Als er consensus was bereikt over het hoe het moest gaan werken schetste ik iedere screen(state) uit. Soms in low fidelity, soms in high fidelity tot aan pixel-perfect mockups, afhankelijk van wat er nodig was.

Wireframes

Als aanvulling op de mockups leverde ik schetsmatige wireframes met notities, zodat op detail niveau duidelijk was voor het development team wat er gebouwd moest worden.

UI Design

Om tot een logische ordening te komen en consistentie te behouden in de werking van alle aspecten van de applicatie heb ik een navigatie structuur uitgedacht en een basis layout opgesteld.

De layout bestaat uit de volgende hoofdsecties:

Topbar met hoofdmenu items en user menu
Sidebar met primaire functies per hoofdmenu item
Context title bar
Content header
Content blok verdeeld in tabs per process stap

Stap 3:
Testen en verbeteren

User Testing

Elke functionaliteit werd uitvoerig door key-users getest. Vaak meerdere keren per week en zelfs met tussenversies tijdens het ontwikkelen.

Zo haalden we continue feedback op over wat we aan het maken waren.

Sprint Demo presentaties

Na afloop van iedere sprint van 2 weken gaven we een demo van hetgeen we opgeleverd hadden. Na de demo werd het door een selecte groep gebruikers getest.

60

Sprints

50

Releases

15%

Tijdswinst

∞

cups of coffee