Design-dev collaboratie verbeteren met design tokens.
OPERDESIGN
DESIGN TOKENS
DESIGN SYSTEMS
Scale-up
10-50
🇧🇪 Antwerp, BE / 🇨🇭 Zürich, CH
opercredits.com
In de snelle wereld van startups en scaleups is een naadloze samenwerking tussen ontwerpers en ontwikkelaars essentieel voor een succesvolle productontwikkeling. Maar al te vaak wordt het handoff proces tussen deze twee kritische rollen een knelpunt, wat leidt tot vertragingen, miscommunicatie en inconsistenties in het eindproduct.
Bij Oper Credits hebben we deze uitdaging frontaal aangepakt door design systems te implementeren en design tokens te gebruiken, waardoor onze design-dev samenwerking een revolutie heeft ondergaan en de manier waarop we uitzonderlijke digitale ervaringen bouwen is veranderd.
Oper Credits had, net als veel andere bedrijven, te kampen met grote obstakels als het ging om het handoff-proces naar ontwikkelaars en een soepele samenwerking tussen designers en developers. De product designers spendeerden kostbare tijd aan het creëren van nauwgezette design specs en styleguides, maar de devs worstelden met de interpretatie en implementatie ervan. Dit resulteerde in onnodig veel heen-en-weer communicatie, wat leidde tot vertragingen en een verminderde ontwerpkwaliteit.
Het was duidelijk dat er een efficiëntere en gestroomlijnde aanpak nodig was om deze kloof effectief te overbruggen.
Het was duidelijk dat er een efficiëntere en gestroomlijnde aanpak nodig was om deze kloof effectief te overbruggen.
Om de uitdagingen rondom samenwerking op het gebied van ontwerp en ontwikkeling aan te pakken, heeft Lorenz (een van onze panda's) een uitgebreid proces doorlopen om design systems en design tokens te creëren en te integreren in de workflow van Oper.
Dit omvatte de volgende stappen:
1. Onderzoek en analyse: We voerden een diepgaande analyse uit van de bestaande design en development processen en identificeerden pijnpunten en verbeterpunten. We onderzochten ook best practices uit de industrie en bestudeerden succesvolle casestudy's van organisaties die design systems hadden geïmplementeerd.
2. Workshops: We brachten onze ontwerpers en ontwikkelaars samen in een gezamenlijke workshop om een beter begrip en open communicatie tussen de twee teams te bevorderen. We deelden inzichten uit ons onderzoek en moedigden deelnemers aan om hun ervaringen en uitdagingen te delen, waardoor een gedeeld gevoel van ownership ontstond bij het vinden van een oplossing.
3. Ontwikkeling van het design system: Op basis van de uitkomsten van de workshop en ons onderzoek begonnen we met de ontwikkeling van een uitgebreid design system dat zou dienen als een single source of truth voor design elementen, patronen en componenten. Dit omvatte het opstellen van gestandaardiseerde richtlijnen voor typografie, kleurenpaletten, spatiëring en lay-out, om consistentie tussen projecten te garanderen.
4. Implementatie van design tokens: Als integraal onderdeel van ons design system hebben we design tokens geïmplementeerd om een brug te slaan tussen design en development. Met design tokens konden we design specs zoals kleuren, typografie en spatiëring definiëren en organiseren op een manier die gemakkelijk kon worden gebruikt en geïmplementeerd door ontwikkelaars.
Dit omvatte de volgende stappen:
1. Onderzoek en analyse: We voerden een diepgaande analyse uit van de bestaande design en development processen en identificeerden pijnpunten en verbeterpunten. We onderzochten ook best practices uit de industrie en bestudeerden succesvolle casestudy's van organisaties die design systems hadden geïmplementeerd.
2. Workshops: We brachten onze ontwerpers en ontwikkelaars samen in een gezamenlijke workshop om een beter begrip en open communicatie tussen de twee teams te bevorderen. We deelden inzichten uit ons onderzoek en moedigden deelnemers aan om hun ervaringen en uitdagingen te delen, waardoor een gedeeld gevoel van ownership ontstond bij het vinden van een oplossing.
3. Ontwikkeling van het design system: Op basis van de uitkomsten van de workshop en ons onderzoek begonnen we met de ontwikkeling van een uitgebreid design system dat zou dienen als een single source of truth voor design elementen, patronen en componenten. Dit omvatte het opstellen van gestandaardiseerde richtlijnen voor typografie, kleurenpaletten, spatiëring en lay-out, om consistentie tussen projecten te garanderen.
4. Implementatie van design tokens: Als integraal onderdeel van ons design system hebben we design tokens geïmplementeerd om een brug te slaan tussen design en development. Met design tokens konden we design specs zoals kleuren, typografie en spatiëring definiëren en organiseren op een manier die gemakkelijk kon worden gebruikt en geïmplementeerd door ontwikkelaars.
De implementatie van design systems en design tokens bij Oper Credits had een transformerende invloed op ons handoff-proces naar ontwikkelaars en de samenwerking tussen designers en developers. Om een naadloze synchronisatie tussen onze ontwerptools en de codebase te garanderen, gebruikten we Figma, een collaboratief ontwerpplatform, samen met de populaire Tokens Studio plugin. Door deze tools te integreren in onze workflow en de tokens plugin te koppelen aan GitLab voor versiebeheer, hebben we een robuuste 1-op-1 link gelegd tussen ontwerp- en productiecode.
Onze nieuwe workflow leverde tal van voordelen op:
1. Gestroomlijnde samenwerking: Figma diende als een gecentraliseerde hub waar ontwerpers en ontwikkelaars in real-time konden samenwerken, waardoor consistente communicatie werd gegarandeerd en verkeerde interpretaties werden verminderd.
2. Consistentie en efficiëntie: Design systems en tokens zorgen voor een gestandaardiseerde set van richtlijnen, waardoor het team design consistenties tussen projecten kan behouden en minder tijd kwijt is aan het opnieuw creëren van design specs.
3. Duidelijke communicatie: Het gebruik van design tokens als een gedeelde taal tussen ontwerpers en ontwikkelaars vergemakkelijkte precieze implementatie en verminderde dubbelzinnigheid, wat resulteerde in een soepeler overdrachtsproces.
4. Schaalbaarheid en aanpasbaarheid: De implementatie van design systems en design tokens maakte het eenvoudiger om nieuwe teamleden in te werken, waardoor projecten sneller van start konden gaan en de onboarding korter werd.
5. Versiecontrole en synchronisatie: Door Figma en de Tokens plugin te integreren met GitLab, bereikten we een continue link tussen ontwerp en productie, zodat de nieuwste design changes altijd toegankelijk waren voor ontwikkelaars.
Onze nieuwe workflow leverde tal van voordelen op:
1. Gestroomlijnde samenwerking: Figma diende als een gecentraliseerde hub waar ontwerpers en ontwikkelaars in real-time konden samenwerken, waardoor consistente communicatie werd gegarandeerd en verkeerde interpretaties werden verminderd.
2. Consistentie en efficiëntie: Design systems en tokens zorgen voor een gestandaardiseerde set van richtlijnen, waardoor het team design consistenties tussen projecten kan behouden en minder tijd kwijt is aan het opnieuw creëren van design specs.
3. Duidelijke communicatie: Het gebruik van design tokens als een gedeelde taal tussen ontwerpers en ontwikkelaars vergemakkelijkte precieze implementatie en verminderde dubbelzinnigheid, wat resulteerde in een soepeler overdrachtsproces.
4. Schaalbaarheid en aanpasbaarheid: De implementatie van design systems en design tokens maakte het eenvoudiger om nieuwe teamleden in te werken, waardoor projecten sneller van start konden gaan en de onboarding korter werd.
5. Versiecontrole en synchronisatie: Door Figma en de Tokens plugin te integreren met GitLab, bereikten we een continue link tussen ontwerp en productie, zodat de nieuwste design changes altijd toegankelijk waren voor ontwikkelaars.
Door gebruik te maken van design systems en design tokens heeft Oper Credits met succes het handoff-proces naar ontwikkelaars en de samenwerking tussen designers en developers verbeterd.
De implementatie van deze tools stroomlijnde niet alleen hun workflow, maar bevorderde ook betere communicatie, verbeterde consistentie en verhoogde algehele efficiëntie.
Bij PandaPanda geloven we dat de adoptie van design systems en design tokens een cruciale stap is voor elk bedrijf dat software of digitale diensten levert en uitstekende digitale ervaringen wil leveren.
De implementatie van deze tools stroomlijnde niet alleen hun workflow, maar bevorderde ook betere communicatie, verbeterde consistentie en verhoogde algehele efficiëntie.
Bij PandaPanda geloven we dat de adoptie van design systems en design tokens een cruciale stap is voor elk bedrijf dat software of digitale diensten levert en uitstekende digitale ervaringen wil leveren.
De implementatie van design tokens en een uitgebreid design system heeft ons productontwikkelingsproces getransformeerd. Het heeft naadloze communicatie tussen ontwerpers en ontwikkelaars mogelijk gemaakt, wat heeft geleid tot snellere levertijden, ontwikkeling van hogere kwaliteit en meer tijd voor ontwerpers om kritieke gebruikersproblemen op te lossen. De integratie van design systems en tokens heeft onze workflow echt verbeterd en stelt ons in staat om uitzonderlijke ervaringen te leveren met efficiëntie en precisie.
Wouter Lachat, Co-Founder & CPO bij Oper
Andere beestige projecten
NODALVIEW
Nodalview, een in Brussel gevestigde Proptech scale-up, was in opkomst in een snel evoluerende industrie. Ondanks het enorme groeipotentieel vormde het ontbreken van een gestructureerde design practice een aanzienlijke uitdaging. Deze casestudie onderzoekt hoe we Nodalview hebben geholpen transformeren door een sterke basis te vestigen, waarmee de weg naar succes werd geplaveid.
DESIGN
DESIGN SYSTEMS
UX RESEARCH
DUALOOP
Het ontwerpen en ontwikkelen van een website rond een totaal nieuwe branding voor dualoop was niet de enige uitdaging tijdens dit project. Een sterke focus op SEO en marketing maakte dit project tot een waardevolle ervaring voor alle betrokkenen!
DESIGN
DEVELOPMENT
WEBFLOW
