Van Lego naar code: hoe Achmea werkt aan een Design System

Bij Centraal Beheer, onderdeel van Achmea, zijn verschillende development teams bezig met webdesign. Zij creëren een eenduidige merkbeleving en zorgen ervoor dat bezoekers makkelijk kunnen navigeren door websites. Eén van die teams is het Team Stratus dat nu werkt aan een Design System van veelgebruikte codes. Of zoals teamleden Laura en Mark het noemen: een grote doos technisch Lego. 

Laura Carlier: van Hogere Hotelschool naar Achmea IT

“Ik heb aan de Hogere Hotelschool in Maastricht gestudeerd,” vertelt Laura Carlier.” Op een banenbeurs kwam ik CALCO tegen, dat is een IT-detacheerder. Daar heb ik twee maanden een brede opleiding in IT gehad. Mijn eerste IT-functie was bij Achmea waar ik me in de online wereld en webontwikkeling verdiepte. Ik werk er nu al tien jaar: er zijn hier volop mogelijkheden en je krijg hier alle kansen!”

Mark Bodenstaff: van Mediatechnologie naar Centraal Beheer

Eén van Laura’s collega’s is Mark Bodenstaff. Hij heeft Mediatechnologie gestudeerd: “Tijdens die opleiding krijg je les in design, video, audio en programmeren. Mijn eerste baan was bij een klein internetbedrijf waar ik aan websites werkte. Vervolgens ben ik via een detacheringsbureau bij Centraal Beheer terechtgekomen. Inmiddels werk ik hier al meer dan vier jaar. Bij Centraal Beheer ben ik veel meer de diepte in gegaan. Ik was gewend om elke maand een nieuwe website op te leveren. Bij Centraal Beheer werk ik nu al vier jaar aan dezelfde website. Elke week voegen we er iets nieuws aan toe of brengen we verbeteringen aan.”

On the job

Laura: “Bij Achmea ben ik on the job opgeleid. Tijdens het werk aan verschillende projecten voor Centraal Beheer, Syntrus, Achmea Hypotheekbank en Avero Achmea heb ik een solide basis ontwikkeld in programmeertalen: HTML, CSS, JavaScript en Angular. Als Front-end developer ben ik verantwoordelijk voor de intakefase en het bouwen van de website. Ik zorg ervoor dat deze voldoet aan alle eisen van het label. Daarbij heb ik nauw samengewerkt met de verschillende marketingafdelingen van alle merken die Achmea heeft.”

Bibliotheek met gereedschappen

“Als Design System Manager ben ik verantwoordelijk voor het ontwerpen, ontwikkelen en implementeren van een Design System,” vertelt Mark over zijn werk. “Een Design System is een verzameling van richtlijnen, principes en gereedschappen die bedoeld zijn om een consistente en efficiënte gebruikerservaring te creëren over verschillende digitale producten en diensten van een organisatie. Op dit moment ben ik met het Team Stratus bezig met het ontwikkelen van een bibliotheek van hergebruikbare componenten en patronen voor front-end developers om in hun werk te gebruiken. Als team verzorgen we ook het beheer van het Design System. We werken het continu bij zodat het up-to-date is met de laatste ontwikkelingen en eisen. Daarbij werken we samen met ontwerpers, developers, producteigenaren en andere stakeholders.”

Eén Centraal Beheer met Design System

“Binnen Centraal Beheer hebben we twintig development teams die aan de website werken. Dat zijn onze stakeholders. Ze hebben allemaal hun eigen doelen,” vervolgt Laura. “In de loop van de jaren zijn er allerlei verschillende oplossingen, stijlen en componenten ontstaan. Om de gebruikersbeleving te verbeteren, zijn we dit gaan omzetten naar een zo consistent mogelijke oplossing. Team Stratus is bezig om een Design System op te zetten: één centrale omgeving waarin de bouwstenen van digitale diensten en producten staan voor de verschillende bouwteams van Centraal Beheer. Inclusief webredactie, communicatieafdeling en marketingafdeling. Doordat iedereen dezelfde bouwstenen gebruikt, ontstaat er meer consistentie in websites. En dus ook in de gebruikerservaring.”

Een auto en een vliegtuig

“Veel HTML-code wordt ontzettend vaak herhaald. We zijn nu bezig om design van UX te vertalen naar bouwblokken in Angular. Dat is een JavaScript framework voor het bouwen van cliënttoepassingen als apps waar onze klanten hun producten kunnen afsluiten of inzien” legt Mark uit. “Met het framework bouwen we een componenten bibliotheek. Je slaat er al die standaard bouwblokken in op, rubriceert ze en voorziet ze van een toelichting en/of handleiding om inzichtelijk te maken hoe je elke component gebruikt. Dat is ontzettend handig voor ontwikkelaars. Ze hoeven niet meer alle code from scratch te schrijven. Je kunt het vergelijken met een grote doos technisch Lego die wij beheren. Je kunt er een auto mee maken maar ook een vliegtuig. De bouwtekeningen in de doos zijn de handleidingen waarin onder andere precies staat beschreven welke kleuren en typografie je gebruikt. Ons team, Stratus, beheert de bouwdoos. Negentien andere teams maken er gebruik van om websites te vernieuwen en bestaande functionaliteiten om te bouwen.”

Eenduidige merkbeleving

“Een goed voorbeeld van hoe we dit toepassen bij Centraal Beheer zijn de formulieren op websites,” vult Laura aan. “Veel formulieren bevatten dezelfde vragen maar de verschillende teams werken ze net iets anders uit. We wilden daar meer consistentie in brengen. Nu zijn deze allemaal opgebouwd volgens dezelfde indeling. Eerst stellen we vragen over de situatie van de aanvrager, bijvoorbeeld wat zijn postcode is. Vervolgens wordt de premie berekend. Als iemand besluit om de verzekering af te sluiten, vraagt het formulier om meer persoonlijke gegevens. Als laatste volgen er enkele aanvullende vragen. Tot slot krijgt de aanvrager een samenvatting op het scherm te zien van wat hij zojuist heeft afgesloten. Doordat er zo veel hetzelfde is, kunnen we deze stappen heel goed standaardiseren. Om tot het beste resultaat te komen met de Componenten Library is samenwerking heel belangrijk. We willen het werk van onze collega’s tenslotte makkelijker maken en zorgen voor een eenduidige merkbeleving van Centraal Beheer.”

Sprintjes van drie weken

“Ontwikkelen doen we volgens de Scrum-methode,” licht Laura toe. “We werken in drie tot vier sprints van drie weken. In de laatste sprint kunnen we lekker losgaan. Die hoeft niets concreets op te leveren maar is bedoeld om te experimenteren. Om nieuwe technieken uit te proberen en jezelf te ontwikkelen. We werken volgens DevOps Scaled Agile. Dit zorgt voor een goede communicatie, integratie, automatisering en nauwe samenwerking tussen alle mensen. Zowel voor het plannen maar ook voor het ontwikkelen, testen, uitrollen, vrijgeven en onderhouden van wat er is opgeleverd.”

Revolutie in design tools

“Als interface designsoftware gebruiken we Figma,” vervolgt Mark. “Dit is een platform dat ontwerpfuncties combineert met een efficiëntere workflow. Het is speciaal gebouwd voor webontwerp en bevat heel veel geavanceerde functies. Met Figma werk je volledig in de cloud. Je kunt er vanaf elke werkplek mee samenwerken in hetzelfde bestand. Het is een revolutie in de wereld designtools. Daar gaat mijn hart echt sneller van kloppen!”

Luister onze podcast over "niemand online buitensluiten"

Anke gaat aan de wandel met Lead Front-end Developer Laura Carlier. Met werk aan het design-system van de Achmea website zorgt zij ervoor dat online klantervaring steeds beter en consistenter wordt. Maar haar echte passie ligt bij het toegankelijker maken van de website, voor mensen met een beperking. Ze vertelt hoe haar werk als Front-end Developer ervoor zorgt dat niemand online wordt buitengesloten bij Achmea.

Jouw droombaan
in je inbox

Stel een job alert in met jouw persoonlijke instellingen. Zodra er een nieuwe relevante vacature is, dan sturen we je een e-mail!