Kom op tegen Kanker
Eén design system als basis voor een consistente digitale ervaring
Kom op tegen Kanker bouwt aan toegankelijke en consistente digitale ervaringen die mensen verbinden en maatschappelijke impact creëren. Met een groeiend ecosysteem van websites, platformen en digitale toepassingen werd het steeds belangrijker om over alle digitale touchpoints heen een herkenbare en consistente gebruikerservaring te bieden.
Tegelijk werkte de organisatie aan een nieuwe merkidentiteit en een bredere digitale transformatie. De uitdaging: de nieuwe identiteit niet alleen visueel doorvertalen, maar ze ook op een schaalbare en consistente manier toepasbaar maken over verschillende digitale toepassingen heen.
Vanuit een Team as a Service-opdracht versterkte Lemon het digitale team van Kom op tegen Kanker. We werkten nauw samen met designers, service designers en collega’s uit tech en data om vanaf de basis een design system op te bouwen.
We startten vanuit een digitale omgeving waarin componenten en patronen over verschillende toepassingen heen niet altijd dezelfde structuur, stijl of logica hadden. De nieuwe branding bood de kans om niet alleen visueel te vernieuwen, maar ook meer structuur, samenhang en consistentie te brengen vanuit één gedeelde basis.
We brachten bestaande componenten en patronen in kaart, bepaalden wat herbruikbaar was en identificeerden welke bouwstenen nog ontbraken. Tegelijk vertaalden we de nieuwe merkidentiteit stap voor stap naar concrete foundations, componenten en patronen. Zo groeide het design system mee met de nieuwe branding.
We werkten volgens het Atomic Design-principe: van foundations zoals kleuren, typografie, iconen en spacing, over herbruikbare core components zoals buttons, inputs en formulieren, tot grotere web components voor onder andere navigatie, footers, call-to-actions en contentsecties. Zo ontstond een samenhangend systeem waarin componenten logisch op elkaar voortbouwen en de nieuwe merkidentiteit structureel wordt doorvertaald naar verschillende digitale toepassingen.
Ook design en development werkten vanuit dezelfde basis. In Figma bouwden en beheerden we het design system, terwijl componenten via Storybook werden gedocumenteerd, getest en afgestemd op de technische implementatie. Zo bleven componenten in beide omgevingen consistent en konden ze verder worden verfijnd.
Het systeem werd opgebouwd om mee te groeien met toekomstige noden. Bestaande componenten konden worden uitgebreid en nieuwe bouwstenen toegevoegd, waardoor het design system een flexibel vertrekpunt vormt voor nieuwe flows en digitale behoeften.
.jpg)
Foundations
Een centrale basis voor kleuren, typografie, iconen, spacing en andere visuele bouwstenen van de nieuwe merkidentiteit.
Core design system
Herbruikbare UI-componenten zoals buttons, inputs, formulieren en andere patronen die op verschillende digitale toepassingen terugkomen.
Web components
Specifieke componenten voor websites en digitale platformen, zoals navigatie, footers, contentsecties, call-to-action-blokken, ….
Branding als gedeelde basis
De nieuwe merkidentiteit werd structureel vertaald naar het design system en vormt zo een consistente visuele en functionele basis voor verschillende digitale touchpoints, waaronder de website, gebruikerszone, Alles over Kanker, het Kankerfonds en toepassingen voor acties en fondsenwerving.
Uitbreidbaar systeem
Het design system werd verder uitgebreid naargelang nieuwe digitale noden ontstonden. Bestaande componenten werden aangepast en nieuwe componenten toegevoegd voor onder andere de In Memoriam-flow, flows voor fondsenwerving, de vernieuwde geefervaring en de vernieuwde website.
Governance
Duidelijke documentatie, versiebeheer en gedeelde afspraken zorgen ervoor dat het design system beheersbaar en bruikbaar blijft voor zowel interne teams als externe developmentpartners.
Kom op tegen Kanker beschikt over één gedeeld design system dat de nieuwe merkidentiteit structureel doorvertaalt naar de volledige digitale omgeving.
Foundations, core components en web components vormen samen een schaalbare basis voor de verschillende websites, platformen en digitale toepassingen van de organisatie. Het design system brengt meer structuur en consistentie in de digitale omgeving en geeft teams een gedeelde basis om nieuwe toepassingen sneller te ontwerpen en ontwikkelen.
Zo vormt het design system de basis voor een consistente digitale ervaring vandaag én voor de verdere digitale transformatie van Kom op tegen Kanker.
.webp)
