Hoe design systems app-ontwikkeling beter, sneller en goedkoper maken

Het design system van iO

Met tools als Zeplin en Figma bouwden we een design system voor al onze banking apps, wat we diep integreerden in ons ontwikkelframework BankingRight. BankingRight is een framework waarmee iO apps maakt en verbetert voor banken en vermogensbeheer. Met dit framework kan iO voor een fractie van de kosten en tijd native apps maken die vergelijkbaar zijn met de apps van de grootbanken. Op deze manier maakte iO bijvoorbeeld al de apps van Knab, Optimix en Aruba Bank. Door het design system te integreren in het BankingRight framework kunnen de klanten hun apps makkelijker aanpassen naar hun eigen huisstijl en wensen. Een ontwikkeling met grote voordelen, zowel voor iO als voor de klant.

De voordelen voor iO: betere en snellere samenwerking tussen ontwerper en ontwikkelaar

Ontwerpers en ontwikkelaars weten: soms is het oneindige canvas van Figma a blessing in disguise. Het onderhouden van ontwerpen en het documenteren van wijzigingen zijn tijdrovende klusjes voor ontwerpers, en voor ontwikkelaars kan het alsnog lastig zijn om de benodigde informatie te vinden.

In ons design system worden Figma-ontwerpen automatisch gesorteerd en georganiseerd. Componenten worden overgedragen met de juiste naamgeving en eventuele verschillen tussen ontwerp- en ontwikkelingsspecificaties zijn duidelijk aangegeven. Afgewerkte componenten worden automatisch verbonden met de styleguide dankzij Zeplin’s API met Prism om automatisch kleurwaarden, tekststijlen, iconen en meer op te halen en in te voeren in de code. Wanneer er iets is aangepast in Figma, kan het ontwikkelteam automatisch algemene wijzigingen doorvoeren met een enkele klik.

En misschien wel het allerbelangrijkst: met het design system spreken onze ontwerpers en ontwikkelaars dezelfde taal. Ontwerpers hebben ruimte nodig om creatief te zijn terwijl ontwikkelaars specifieke informatie nodig hebben, tot op de pixel. In het design system kunnen productteams verwijzen naar dezelfde componenten, elementen en mogelijkheden. Zo stroomlijnen we de overdracht van ontwerper naar ontwikkelaar en halen we meer uit Figma. En dan hebben we het nog niet eens over de uren die we besparen.

Over uren gesproken, het inschatten van een tijdlijn voor een project is essentieel voor een digitaal bureau als iO. Maar soms zijn er dagen nodig om een ‘kleine’ aanpassing te coderen. De grote vraag is altijd: moeten we iets nieuws bouwen of kunnen we onze bestaande componenten hergebruiken? We proberen onze producten tenslotte altijd zo algemeen en herbruikbaar mogelijk te maken, zodat we het zo snel mogelijk kunnen aanpassen naar de wensen van de klant. Met ons design system kunnen ontwikkelaars deze herbruikbare componenten en hun flexibiliteit makkelijk zien. Voortaan dus geen vage deadlines meer voor klantverzoeken. Is het haalbaar binnen de tijd? Ja!

De voordelen voor de klant: snel en makkelijk nieuwe en verbeterde apps

De ontwikkelteams van iO zijn dus minder tijd kwijt voor de productontwikkeling van een app, en krijgen daar meer duidelijkheid voor terug. Maar wat merken de klanten van iO van de nieuwe workflow?

Natuurlijk hebben ook zij profijt van de tijdsbesparing. Ontwikkeling en klant-iteraties zijn nu zo eenvoudig als een enkele klik op een knop dankzij het verbeterde proces van ontwerp tot code. Daarbij kan het iO-team nu op voorhand nauwkeurige tijdschattingen leveren en weet de klant dus precies wat hij wanneer kan verwachten.

Maar ook op kwalitatief vlak is het design system een uitkomst. Betere, efficiëntere teamsamenwerking heeft namelijk al geleid tot hoge kwaliteit, consistente ontwerpen en een betere gebruikservaring. Allemaal ingrediënten voor een nog betere klantrelatie.

Die klanttevredenheid begint al bij een eerste pitch. Met ons design system bouwde iO bijvoorbeeld binnen een uur een werkend prototype voor de klant in hun huisstijl. Zo weet je als klant meteen zeker dat je waar krijgt voor je geld.

En als klap op de vuurpijl: dankzij het design system maakt iO voortaan bank-apps tegen een fractie van de kosten.

Design systems worden onmisbaar

Het design system van BankingRight zorgt voor kwalitatief goede apps met kortere ontwikkeltijd en lagere ontwikkelkosten. Geen wonder dat design systems onmisbaar zijn voor app-ontwikkelingen in de toekomst. Een belangrijke schakel in de end-to-end service van iO.