Overstappen op nieuwe software terwijl je werkt
Primaire ondersteuning voor het gehele proces van aardappel veredeling
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 high-performance 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.
In beide systemen moest synchroon gewerkt kunnen worden, waarbij we stukje bij beetje oude onderdelen vervingen voor nieuwe.
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.
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.
Het ontwerpen van de oplossing
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.
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.
Layout & 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
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.