How iO superpowers their app development with Zeplin and Figma
User Stories
Karina Knudsen
Jun 2022
iO is an end-to-end agency with a growing team of experts from the Netherlands, Belgium, Sweden, and Bulgaria with one mission—to become the only partner their clients need. The iO team (iO representing infinite opportunities) is “thinking big, working local” to bring their clients’ apps to life. They infuse creativity at every step and focus on the end-user throughout the design and development process.
iO helps clients across industries and around the world achieve their business goals. Next to strategy, creation, content and marketing, they specialize in creating front-end solutions and experiences for clients in finance, leisure, and utilities.
With Zeplin, the iO team was able to save time, better align designers and developers, improve accuracy, and lay the groundwork to scale. Using Zeplin for Design Delivery, they created a mobile app framework, called BankingRight, that allows them to create banking apps, at a fraction of the cost while delivering the client’s preferred customizations using their new design systems and workflows.
We caught up with the BankingRight team at iO to learn more about how they use Zeplin to house their design system, get more out of Figma, and improve collaboration between designers and developers.
Overcoming common product development challenges
The iO team was growing and building quickly. This was creating less than efficient processes, slowing down timelines and preventing effective collaboration between teams. They knew that in order to continue successfully building custom app solutions for their clients, the iO team needed a place to house their design system, streamline collaboration between designers and developers. Here’s how iO overcomes common roadblocks in the product development process with Zeplin.
Challenge #1: Maintaining and navigating Figma’s infinite canvas
Like many digital agencies and product development teams, iO struggled with organizing and maintaining final designs in Figma. It was tedious and time consuming for UX Designer Tanja van der Heide to actively manage and continuously update the designs in Figma. Worse still, in spite of her best efforts, developers constantly struggled to find and understand the information they needed from the Figma files.
How Zeplin helped: Figma designs are automatically sorted and organized in Zeplin. Components carry over with the exact same naming conventions and variants, and it’s easy to flag any discrepancies between design and development specs.
In addition, any updates to the Figma file, like the addition of a new variant screen to reflect light/dark mode, are automatically reflected in Zeplin. This saves designers countless hours documenting changes between iterations.
Challenge #2: Difficulty estimating workload and deadlines
Accurately estimating the development timeline for a project is critical for any digital agency’s success. Unfortunately, all too often even seemingly small changes can require days of re-coding. iO wanted a better way to know whether a new build was feasible — could they quickly rerun scripts or did they need to build from scratch?
“We always try to make our system as general and reusable as possible. That way, our design system is the blueprint of the app, and we can easily tailor it to the client’s requirements and speed up the development process,” says Tanja van der Heide, UX Designer.
How Zeplin helped: With Zeplin, developers can easily see reusable components and variants in Zeplin. Rather than providing vague timelines for client requests, the iO team can now confidently provide estimates for client work and more easily make small updates that are reflected in all app screens.
“With Zeplin, I can tell a customer with 100% certainty that we can do something because I can see that it is connected to code. If it's in Zeplin, it’s possible.” — Rogier Saarloos, Solutions Architect, iO Campus Amsterdam
Challenge #3: Misunderstandings around design intention
Designers need freedom to be creative. Developers need specificity, down to the pixel. Before using Zeplin, the designer-developer handoff process was filled with friction. Since designers and developers didn’t speak each other’s language, both teams felt siloed. A designer adding an extra margin to a design or taking creative liberties with file naming seems inconsequential when you look at it from one team’s perspective. But in the context of the product development workflow, everything needs to be pixel perfect, placing the user experience first.
“Figma isn’t super structured for me. There’s some design playground going on, and some of the scenes aren’t ready for development. The distinction between the Figma design and the Zeplin file is great. If it’s in Zeplin, you can build it.” — Tanja van der Heide, UX Designer, iO Campus Amsterdam
How Zeplin helped: Zeplin creates healthy guardrails to help both designers and developers speak the same language. When product teams can refer to the same components, elements, capabilities, colors, and specs, they can work better together to design engaging apps. And even when team members move on to new projects, anyone with access to the file can pick up the conversation.
“You might say 'Does 1px really matter?' But when you’re working on big projects - the kind that can take up to a year - these small inaccuracies create disturbances. If you have enough of them in a year it can be very costly on your lead time. You want to avoid that as much as possible.” — Christian Würthner, Android Developer, iO Campus Amsterdam
Ways iO uses Zeplin for better product development workflows
Tanja helped build out comprehensive systems for the team to stay on track while developing the BankingRight mobile apps.
Here’s how Tanja and her team used Zeplin for Design Delivery:
1.They created a library of elements like colors, margins, and variants like light mode and dark mode, then tagged them in Figma
2.Finalized components are automatically connected to the styleguide through Zeplin
3.Zeplin has become the single source of truth for developers, improving project timelines and communication
4.The iO developer team uses Zeplin’s API with Prism to automatically fetch color values, text styles, icons, and more from Zeplin and input them (as platform-specific code) to the codebase
5.When anything is adjusted in Figma, the development team can automatically make updated global changes with a single click
“With Zeplin, we can ensure both designers and developers are always talking about the same colors, dimensions, and so on. So then we can have a productive conversation because we’ve already created this playing field where both sides understand each other and speak the same language.” — Christian Würthner, Android Developer, iO Campus Amsterdam
The impact of an effective design development workflow
With Zeplin, the iO app development team has more efficient internal workflows and better relationships with clients. Using more agile systems that are organized and built for teams, iO can better support client customization, timeline management, and design changes without losing a line of code.
Here’s how efficient design development workflows impacted the iO team:
With Zeplin, both developers and designers save significant time
Now, development and client iterations are as simple as a single click of a button, thanks to a connected pipeline from design to code
The iO team can deliver 100% accurate time estimates to clients
The design, development, and broader product teams have more productive, collaborative discussions
Better team collaboration has resulted in high quality, consistent designs and a better user experience
Constantly improving product team workflows
The iO team believes that design systems lead to better alignment between design and development, and they have found a solution with Zeplin that allows them to constantly iterate and improve. When Zeplin releases new features, they immediately begin to brainstorm how they can add it to their systems to improve collaboration and build innovative products for their clients.
“With Zeplin, we were able to build a prototype for the client in their branding (that worked!) within an hour for a sales call. This will change how we pitch and sell, and improve our client satisfaction,” says Rogier Saarloos, Solutions Architect, iO Campus Amsterdam.
Now, iO can build better apps and work more efficiently as a team. Learn how your team can use Zeplin to improve designer-developer handoffs.
Fin