UX times

In gesprek over het design system voor Lely

Door Wendy, Contentspecialist @ Online Department

Een succesvol bedrijf runnen, ‘gewoon tussen 9 en 5’. En elk jaar op vakantie gaan. Bij Lely gunnen ze boeren dat. Maar eenvoudig is het niet. Melkveeboeren werken met veel verschillende systemen, tools en schermpjes, onder andere om melk-, voeder- en mestrobots mee aan te sturen. Die technologie is noodzakelijk geworden, de redding van de boerenbusiness. Maar een vervanger vinden om al deze technologie onder de knie te krijgen is lastig. Compleet onnodig ook, als UX zorgt voor een prettig gebruik en consistentie. Voor het streven naar meer vrije tijd voor de boer, moest dit dus anders.

In onze rubriek on-site vertellen collega’s bij Online Department over een project. Deze keer spraken we Lotte, die bij Lely een design system heeft opgezet om eenheid te creëren in de veelvoud aan schermen. Lely is wereldmarktleider in robots en innovatieve datasystemen voor melkveebedrijven, waarmee het dierenwelzijn, de flexibiliteit en de productie op een melkveebedrijf toeneemt. In de vele rollen die een melkveeboer te vervullen heeft om gezondheid van de koeren en een gezonde bedrijfsvoering na te streven, is die van IT’er er vaak eentje teveel. Daarom moet de software die de boeren gebruiken super gebruiksvriendelijk zijn. Pas wanneer een boer blind kan vertrouwen op de robots, wordt zijn leven makkelijker. 

Een UX team van Online Department bij Lely heeft geholpen met het centraal zetten van de melkveeboer en het ontwikkelen van oplossingen die boeren nodig hebben om hun werk sneller en beter te doen. Lotte is zelfs naar Turkije afgereisd, voor een kennisoverdracht aan het development-team daar. Genoeg te vertellen dus! 

Een verscheidenheid aan applicaties, dat klinkt als een uitdaging? 

“Ja. Bij Lely werken de boeren met een ‘farm management systeem’ om het welzijn van de koeien te volgen en de productiviteit te monitoren. Data vanuit robots en sensoren komen hierin samen. Een boer krijgt te maken met allerlei verschillende schermen, van desktop applicaties, mobile apps en de robots. Maar al die verschillende applicaties zijn zowel intern door developers van Lely, als ook extern door verschillende bureaus ontwikkeld. Met een UX team van Online Department hebben we bij Lely gewerkt aan het verbeteren van de farm management software. En het doorvoeren van UX en consistentie in al deze software producten.

Ik ben bij dit project betrokken om alle richtlijnen voor software developers en designers vast te leggen in een design system, waarmee consistentie in stijl te waarborgen is en waardoor efficiënter gewerkt kan worden. Maar waarmee ook de usability gewaarborgd wordt. Wij maken software menselijker. In een design system leggen we vast hoe we dat doen. Dit is altijd gebaseerd op research en best practices. Het onderdeel van een design system specifiek voor interfaces, noemen we de UI library.”

Wat is precies een design system? 

“Een design system bevat alle richtlijnen, tools en bestanden die je nodig hebt als organisatie om je merkbeleving goed door te voeren. De inhoud van een design system is bij elke organisatie weer anders, net waar behoefte aan is. Maar denk bij onderdelen bijvoorbeeld aan een brand guide met richtlijnen over de huisstijl en de toepassing ervan voor de marketing & communicatie afdeling. Maar ook aan templates voor presentaties, organisatie-specifieke richtlijnen (zoals bij Lely voor het maken van robots) en afspraken voor software development.

Vooral dit laatste ontbreekt nog weleens in de praktijk, merken we. Soms is het niet meer terug te vinden. Of is het, net als bij Lely het geval was, outdated. Er stonden bijvoorbeeld nog oude kleuren in. Maar er ontbraken ook belangrijke details, zoals de positionering en formaten van componenten. Daarbij was het vrij lastig implementeerbaar. Dat zorgt er dan voor dat software developers er veel leeswerk aan hebben, terwijl ze vooral bezig willen zijn met het opleveren van een goed product. Niet met het uiterlijk dus. Ook hield niet iedereen zich aan de richtlijnen. Met dus een veelvoud aan applicaties met een eigen uiterlijk en gebruik tot gevolg.”

Waarom is het zo belangrijk om alle design-richtlijnen vast te leggen in een design system? 

“Een consistentie in uitstraling is niet alleen goed voor je merkgevoel, meer eenheid en aandacht voor de gebruiksvriendelijkheid zorgt uiteraard ook voor handigheid qua gebruik en dat de leercurve enorm vermindert. In het geval van Lely willen we dus dat boeren ook succesvol draaien, als zij werken tussen 9 en 5. En dat ze elk jaar op vakantie kunnen. Geavanceerde technologie is essentieel geworden, dus het gebruik hiervan moet zo makkelijk mogelijk worden gemaakt. UX maakt hierbij het verschil. 

Daarnaast wordt de time-to-market door heldere richtlijnen behoorlijk ingekort. Omdat er door die duidelijkheid en makkelijk te implementeren elementen veel sneller gewerkt wordt door developers. Omdat zij niet meer met design bezig hoeven te zijn, en al hun tijd kunnen besteden aan programmeerwerk. Kortom; het maakt beide doelgroepen blij!” 

Hoe omvangrijk is het design system, of specifieker: de UI library, geworden? 

“Behoorlijk uitgebreid wel. We hebben een UI library aan het design system toegevoegd, als specifiek gedeelte voor de software developers. Het bevat onder andere code snippets, die te copy-pasten zijn in zowel Angular als React. Ook hebben we een Figma library toegevoegd, met componenten en templates die kunnen worden hergebruikt. Figma is een design tool waarmee je prototypes maakt. Alles is bovendien omschreven met documentatie en rationale, oftewel; toelichting over de toepassing. Alle stijl-elementen en de bestanden zijn nu voor developers heel eenvoudig te downloaden en te implementeren.

Daarnaast is er vanuit researchers ook documentatie toegevoegd voor user-tests en interviews met gebruikers. Want hoewel research nogal eens wordt overgeslagen, is het juist een essentieel onderdeel in het ontwikkelen van succesvolle software. Ook deze UX-taken, moeten ze bij Lely zelf uitvoeren uiteindelijk. Het design systeem bevat dus voor alle UX competenties relevante richtlijnen.” 

En je bent alle kennis persoonlijk gaan overdragen in Turkije? Vertel! 

“Dat klopt. Naast overdracht aan het team met zo’n 50 developers bij Lely in Nederland, ben ik ook naar Turkije gegaan om het team daar meer uitleg te geven. We hebben voor het farm management systeem in Nederland de basis gelegd voor de front-end. Maar back-end development lag bij Lely in Istanbul. Het was belangrijk om toe te lichten daar, op welke manier ze bij Lely de front-end van oplossingen gaan opleveren. En hoe ze deze app verder willen uitbouwen. 

Met name doordat alle componenten nu dynamisch zijn opgezet, is de schaalbaarheid enorm toegenomen. Ze moeten er zelf gemakkelijker mee uit de voeten kunnen. Heel tof om te merken dat dit gelukt is! Ik zie dat ze het heel goed oppakken en goed begrijpen hoe ze met deze basis verder doorontwikkelen. Bijvoorbeeld door zelf nieuwe pagina’s aan te maken. En doordat er nu weinig styling code geschreven hoeft te worden, bespaart het design system ze veel tijd.”

Kun je nog iets vertellen over het proces, hoe hebben jullie het aangepakt? 

“Bij Lely hebben we precies volgens het designproces gewerkt, zoals we dat bij Online Department het liefst doen. Dat betekent dat we zijn begonnen met research; het verzamelen van inzichten bij de boeren en software developers, marketing en business stakeholders. Wat is er al en waar is behoefte aan? Vervolgens zijn we de styling documenten gaan verzamelen die, doordat ze elkaar soms tegenspraken, gefilterd moesten worden. We hebben een visual designer betrokken om na te gaan wat hieruit geschikt was voor software. Hij heeft de basis gelegd, als startpunt voor verdere uitwerking in design en development. Daarna hebben we een enquête uitgestuurd onder gebruikers, om het eerste resultaat van de UI library te toetsen op bruikbaarheid. Ook hebben we user tests afgenomen om te achterhalen of de toepasbaarheid begrepen werd. De inzichten hieruit hebben we verwerkt in de uiteindelijk opgeleverde versie.”

Maar klaar is een design system nooit, toch? 

Nee, een design system is nooit af. Daarom hebben we een community opgezet. Een chat-omgeving voor iedereen die het design system gebruikt, om kennis te delen en vragen te stellen. Ook updates worden hier gedeeld. Elkaar blijven spreken, om een design system ‘levend’ houden is heel belangrijk. Een design system beheren is dus een belangrijke taak. 

Deze taak is vaak weggelegd voor een lead designer of lead developer (met affiniteit voor design), die als onderdeel van zijn functie bijhoudt of het design system goed gebruikt wordt. Maar ook wat er speelt onder gebruikers, of er specifieke wensen zijn en hoe het doorontwikkeld kan worden. Idealiter is ook een visual designer en een front-ender betrokken bij dit beheer. Net als bij alle UX processen, is ook hierbij samenwerking heel belangrijk.” 

Dus ook voor het opzetten van een design system geldt: het is teamwork. Beviel dat?  

“Ja, ik vind het heel tof dat ik heel vrij was in het opzetten van dit design system. Maar zonder collega’s kom je daar niet. Ik heb altijd de input nodig vanuit de researchers, visual designers en ook de interaction designer heeft een grote rol gespeeld door het gebruik van componenten te beschrijven. Wat dat betreft dus credits voor het hele UX team!”

Ook het luisteren naar de verschillende afdelingen en het werken voor developers binnen een organisatie, vond ik heel leuk. Om naar hun behoeftes te luisteren en bij hen gebruikerstesten af te nemen. Het design system wordt door veel verschillende partijen en mensen in gebruik genomen. Niet alleen door de eigen developers van Lely en bureaus in Nederland, maar dus ook door teams in het buitenland; in Istanbul en Tsjechië. Dat dit goed werkt nu, is wel gaaf natuurlijk.” 

En nu is het project voor jou klaar, is het makkelijk los te laten? 

“Nou, als ik weet dat het beheer van het design system goed opgepakt wordt wel. Want dan weet je dat het qua ‘return on investment’ goed zit. En dat het effect gewaarborgd blijft. Daar doen we het natuurlijk voor! We willen dat klanten het uiteindelijk zelf kunnen. Dat is altijd het streven bij Online Department. 

Ik blijf vaak ook nog een tijdje bij de implementatie betrokken en bij de klant werkzaam voor coaching. Bij Lely is dit 1 dag in week. Dan help ik de beheerder bij het implementeren en beheren van het design system binnen de organisatie.” 

Heb je een vraag over het Lely project of over design systems? Neem contact met ons op! 

Alles leren over UX? Ontvang de UX Times nieuwsbrief in je mailbox.

Jouw gegevens worden niet gedeeld met derden en alleen gebruikt voor onze mailinglist.

BEKIJK OOK

Contact

Haal meer uit je software en digitale business. Neem contact met ons op over:

Contact

Expert Tamara

Algemene informatie


info@onlinedepartment.nl

Worskhops & Masterclasses


events@onlinedepartment.nl
010 - 8911051

Maashaven Zuidzijde 2

3081 AE Rotterdam

Algemene informatie


info@onlinedepartment.nl

Worskhops & Masterclasses


events@onlinedepartment.nl
Plan Je Route