Eén Design System voor 15 producten.

Hoe we Sdu hebben geholpen hun ‘one platform’ visie waar te maken.

Algemeen

Klant: Sdu
Sector: Juridisch/Fiscaal
Looptijd: 12 maanden

Diensten

Design Systems
User Experience & Interface Design
Front-end Development

Sdu biedt vakinformatie en tools aan voor juristen, fiscalisten en andere professionals die met wet- en regelgeving werken. Dat doet Sdu met meer dan 15 digitale producten. ‘Legacy’  zorgt ervoor dat onderhoud en doorontwikkeling van deze producten veel tijd kost en weinig ruimte biedt voor flexibiliteit en snelheid. Sdu wilde terug naar de basis en klaar zijn voor de toekomst. Eén platform voor alle digitale producten.

Als Angi Studio zijn we gevraagd om te helpen met het opzetten en ontwikkelen van het centrale Sdu Design System. We maakten deel uit van het nieuwe ontwikkelteam ‘Titan’, waarin we interne designers en front-end developers hebben begeleid en ondersteund in de ontwikkeling van het Design System. 

De belangrijkste doelen voor dit project:

  • Klanten betere producten bieden door een snellere en meer consistente user experience en hierdoor bijdragen aan de omzetverhoging van Sdu;
  • Een helder ontwerp- en ontwikkelproces voor designers en developers;
  • Snel kunnen inspelen op nieuwe vragen en kansen uit de markt;
  • De inspanning en kosten van legacy producten tot een minimum reduceren.

“Teams zien nu dat ze heel gemakkelijk componenten van elkaar kunnen gebruiken. Dat is precies wat we voor ogen hadden: niet opgelegd door management, maar het komt vanuit de mensen zélf.”

Portret Yvonne Niesten

Yvonne Niesten

Business manager online platforms

Resultaten

Nieuwe consistente digitale stijl

Het Design System bood een mooie kans om een nieuwe en consistente visuele stijl neer te zetten. Een stijl die vanaf het begin breed toepasbaar zou zijn over alle producten heen. Door gestructureerd te testen met werknemers van Sdu zetten we in 3 iteraties de nieuwe stijlrichting neer. Modulair in de basis en makkelijk uitbreidbaar.

Eén centrale plek voor design en development

Een Design System is waardevol doordat design en development maar één keer gebeurd en vervolgens wordt hergebruikt in meerdere producten. We ontwikkelden samen met het interne team één platform waarin alle stijl en UX richtlijnen, design componenten uit Figma en React front-end componenten samen komen. Toegankelijk voor voor designers, developers en stakeholders uit de gehele organisatie. 

Eerste product in bèta

Het Design System werd tegelijkertijd geïmplementeerd met de herontwikkeling van één van de belangrijkste proposities van Sdu: NDFR. Door gebruik te maken van de herbruikbare componenten uit het Design System werd de ontwikkeling aanzienlijk versneld. Een eerste bèta-versie van het product kon daardoor in minder dan een paar maanden live. 

Toekomstbestendig

Sdu heeft volledige controle over hun Design System. Ze beschikken over de tools, technieken en processen om het Design System verder te onderhouden. Samen hebben we drempels weggenomen om het verder uit te bouwen en toe te passen op de bestaande producten.

Lees het hele verhaal 👇

Wat is een Design System?

Een Design System is een verzameling van herbruikbare componenten met duidelijke standaarden die opzichzelfstaand geïmplementeerd kunnen worden. Eén digitale taal waarmee designers, developers en andere stakeholders gemakkelijk en snel websites, content en applicaties kunnen maken. Allemaal herkenbaar als één geheel.

Door historie en acquisitie waren er veel producten en functionaliteiten die op elkaar lijken, maar geen overlap hadden. Dat is zonde in business optiek. We wilden één platform neerzetten: een kwaliteitsslag én efficiënter werken.”

Portret Yvonne Niesten

Yvonne Niesten

Business Manager Online Platforms

Huidige situatie verkennen: de audit

Een design audit draait om inzicht. In 3 dagen tijd zijn 4 producten van Sdu onderzocht op visuele en functionele inconsistenties. Hiervoor verzamelden we alle componenten van de verschillende producten. We kregen inzicht in inconsistenties door dezelfde type componenten te groeperen (denk aan: knoppen bij knoppen, lijsten bij lijsten). De conclusie na 3 dagen was dat er veel overlap was tussen de producten, maar dat functionaliteiten allemaal visueel van elkaar verschilden of dat ze anders geïmplementeerd zijn. 

De 3-daagse audit was de basis voor een C-level presentatie en vormde tevens het begin van de product-backlog voor het ontwikkelteam dat met het nieuwe Design System aan de slag zou gaan.

3 producten van Sdu naast elkaar

Een Design System is 80% mensen

Het succes van een Design System valt of staat met het in balans brengen van tools, processen en mensen. Wanneer je alleen investeert in tools en technieken, zoals bijvoorbeeld een component library, dan zullen de impact en het succes vele malen lager zijn dan wanneer je ook nadenkt over het werkproces en samenwerking. We startten dit project dan ook met de focus op proces en samenwerken.

In een 4-daagse Design System workshop hebben we samen met designers, developers, de product owner, product manager en andere stakeholders de fundering voor het Design System neergelegd. Zo keken we onder andere naar de huidige situatie. Wat gaat goed? En wat zijn potentiële risico’s voor het Design System? Maar ook: wat voor een stijlgidsen of richtlijnen gebruiken we al? Welke acceptatie criteria hanteren we nu voor development? 

Van de huidige situatie gingen we naar de wenselijke situatie. Hoe past het Design System straks in het werkproces en hoe zorgen we dat deze up-to-date blijft? Elk proces is uniek. De door Angi Studio ontwikkelde proces puzzel helpt teams met verschillende disciplines eenvoudig een proces vorm te geven. 

Als stip op de horizon formuleerde het team het volgende doel:
“Met een time2market van twee weken weten we met één platform, validated learning & value driven te ontwikkelen en zorgen we ervoor dat Sdu de best gewaarde en snelst groeiende uitgever van Nederland is.”

Het eerste product met het nieuwe Design System

Zomaar starten met componenten ontwikkelen zonder toepassing is niet aan te raden. Je wilt starten met componenten die ook daadwerkelijke een toepassing krijgen. Anders loop je het straks het risico op een Design System vol met ongebruikte componenten. Daarom was het herontwerp van NDFR, het kennisplatform voor fiscaal experts, een mooie kans om samen met het Design System te ontwikkelen. 

Met elk component wat opnieuw werd ontwikkeld voor NDFR bouwden we verder aan de fundering voor het Design System.  Door nu alvast rekening te houden met de context en toepassing van een component in de andere producten van Sdu, maken we hergebruik in de toekomst eenvoudig. Denk bijvoorbeeld aan een generieke inhoudsopgave in plaats van een specifieke inhoudsopgave per product. Zo kunnen alle componenten straks snel toegepast worden in de de andere producten. Zo ontstaat er een steeds sneller ontwikkelproces.

Nieuw ontwerp van NDFR, opgebouwd met componenten uit het Design System.

Het huidige NDFR platform is een essentieel onderdeel van de werkproces van de fiscalist, met het herontwerp was het dus belangrijk om hun proces centraal te zetten. Daarom ontwikkelden we meerdere prototypes. Deze zijn met fiscalisten getest en na een aantal iteraties kon het team aan de slag met de verdere ontwikkeling. 

Onderzoek als integraal onderdeel van het ontwikkelproces

Ontwikkelen waarbij de gebruiker centraal staat is belangrijk voor Sdu. Elke drie weken worden onderzoeksvragen verzameld, onderzoeksmethoden uitgekozen en onderzoek uitgevoerd. De uitkomsten van deze onderzoeken hebben impact op de roadmap, ontwikkeling van nieuwe functionaliteiten en leiden tot verbeteringen in het Design System.

Case study

Hoe we Sdu hielpen onderzoek een integraal onderdeel te maken van het ontwikkelproces.

Klaar voor de toekomst

Na een intensieve samenwerking is het team klaar om het Design System zelf verder uit te bouwen. Designers kunnen door slimme design libraries in Figma snel nieuwe prototypes maken en testen. Voor developers is er een React component library gebouwd in Storybook waarmee zij snel alle visuele varianten van de componenten kunnen inzien. Doordat alle componenten zijn voorzien van een technische documentatie, is elk component eenvoudig te implementeren. Parallel aan de standaard component library is een extra Storybook omgeving, waarin componenten automatisch gekoppeld worden aan de GraphQL API. Dit maakt het mogelijk om snel pagina’s te ontwikkelen met volledig functionele componenten (die data op te halen vanuit de backend), zonder dat dit veel extra moeite kost voor de developer.

Snel alle varianten van de componenten kunnen inzien in Storybook.

Alles komt samen in één omgeving. Het nieuwe documentatie platform dat gemaakt is in Zeroheight. Door deze tools aan elkaar te koppelen is het een fluitje van een cent om als designer in Figma een kleur of lettertype aan te passen en vervolgens met één regel code dit door te voeren in de gehele React component library. Hierdoor is de effort vanuit development om aanpassingen door te voeren minimaal en is de kans op inconsistenties hiermee ook.

De samenwerking met Angi Studio was inspirerend. Ze hebben ons goed op weg geholpen: het was vanaf het begin een team-effort. Maurice stelde door zijn ervaring en kennis precies de juiste vragen en hielp ons met keuzes maken.”

Portret Yvonne Niesten

Yvonne Niesten

Business Manager Online Platforms

Heb je een geweldig idee of brandende vraag?

Wij denken graag met je mee.
Neem gerust contact op met Anna.

Wij gebruiken cookies voor de beste ervaring van deze website. Meer weten? Bekijk onze privacyverklaring.