How design systems make app development cheaper, faster and better
13 January 2023
iO specialises in creating apps and front-end solutions for clients in the financial sector. To do this at scale, it was necessary to create spaces to improve the collaboration between designers and developers: we call them design systems. In this article, we will explain the advantages and benefits of using design systems.
The iO design system
We built a design system for all our banking apps using tools like Zeplin and Figma, which was then integrated into our BankingRight development framework. BankingRight is a framework that iO uses to create and improve apps for banks and asset management. iO uses this framework to create native apps that are similar to major banks’ apps for a fraction of the cost and time. This is how iO built apps for Knab, Optimix and Aruba Bank. By integrating the design system into the BankingRight framework, customers can more easily adapt their apps to their own corporate identity and wishes. A great development with benefits, both for iO and for the customer.
The benefits for iO: better and faster collaboration between designer and developer
Designers and developers know: Figma's infinite canvas can be a blessing in disguise. Maintaining designs and documenting changes are time-consuming tasks for designers, and it can be difficult for developers to find the information they need.
In our design system, Figma designs are automatically sorted and organised. Components are transferred with appropriate of iO naming and any differences between design and development specifications are clearly indicated. Finished components are automatically connected to the style guide thanks to Zeplin's API with Prism which automatically retrieves and enters colour values, text styles, icons and more into the code. When something is modified in Figma, the development team can make general changes automatically with a single click.
And perhaps most importantly: with the design system, our designers and developers are speaking the same language. Designers need space to be creative while developers need specific information, down to the last pixel. In the design system, product teams can refer to the same components, elements and possibilities which means we can streamline the transfer from designer to developer and get more out of Figma. And we're not even talking about the time we’re saving yet.
Speaking of time, being able to estimate a timeline for a project is essential for a digital agency like iO. But sometimes it takes days to encode what looks like a 'small' adjustment. The big question is always: should we build something new, or can we reuse our existing components? After all, we always try to make our products as general and reusable as possible, so that we can adapt them to the customer’s wishes as quickly as possible. With our design system, developers can access these reusable components and their flexibility easily. Now there’s no more vague deadlines when answering customer requests. Is it feasible within a certain amount of time? Yes!
The benefits for the customer: new and improved apps quickly and easily
The iO development teams spend less time on the product development aspects of an app and get more clarity in return. But what do iO's customers notice about the new workflow?
Of course, they also benefit from the time savings. Development and customer iterations are now as simple as a single click of a button thanks to the improved process from design to code. In addition, the iO team can now provide accurate time estimates in advance and the customer knows exactly what to expect and when.
But the design system is also a solution on a qualitative level. Better, more efficient team collaboration has already led to high quality, consistent designs, and better user experiences. All essential ingredients for an even better customer relationship.
Customer satisfaction starts with the first pitch. Using our design system, iO can build a working prototype for the customer in their own corporate branding within an hour. This immediately reassures customers that they are getting value for money.
And to top it all off: thanks to the design system, iO is now making banking apps at a fraction of the cost.
Design systems quickly become indispensable
The BankingRight design system makes the delivery of high-quality apps with shorter development times and lower development costs possible. It’s little wonder that design systems are indispensable for future app developments. An important link in iO’s end-to-end service chain.
- Read more
How does innovative technology make for smoother navigation in real life?Updating and implementing interactive navigation on HD touchscreens for visitors and shoppers at Wijnegem - Shop Eat Enjoy.Look at this client story
How do you introduce flexible, efficient mobility in an organised way?Hoppin is a new platform for the Flemish Government with a focus on flexible mobility. Discover how we helped launch the platform.Look at this client story
How to combine rebranding and site redesign for a better user experience?Creating a Cohesive Platform: Assuralia's Rebranding and Site Redesign for Enhanced User Experience Read the story here.Look at this client story
YER. Experts in secondment and recruitment re-introducing themselves to the Netherlands together with iOYER is already big but aspired to double their presence in the world of recruitment and selection and secondment. iO helped them with creating a new brand, internal branding, external activation online and offline and bringing 3 websites into 1 site for all target groups.Look at this client story
Micro Frontends: the future of frontendsGood frontend development isn’t easy. Making frontend development scalable so that multiple teams can work on complex projects simultaneously, is even harder. This blog explains what Micro Frontend development is, how it works, and the benefits of using it to develop websites and applications.Read more
Everyone experiences the taste with Looye KwekersiO developed a new brand experience website for Looye Kwekers with attractive content and a comprehensive content strategy.Look at this client story
How do you make financial information more accessible to parents?We redesigned the child benefit fund KidsLife’s website to make information easier to access and digest. Discover the case.Look at this client story