How design systems make app development cheaper, faster and better

Date
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.

header

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!

design

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.

Related articles
Relevant topics

FrontendDesign