We present to you Oniru, the design system created in-house at SpazioDati which we use to build sales-intelligence products in the Atoka suite.
Why a design system?
After a lengthy rework of core features and screens, the Atoka platform, whose design had started to feel outdated, now has a polished and modern look. However, a significant issue quickly emerged.
When it came to expanding the interface further, the team now had several design items and code specs, but no clear guide on how to use it correctly. For example, when it comes to buttons, which ones should be used and when? What about colours and font sizes? Slack discussions were just not cutting it.
How we did it
The first step towards a design system was building and collecting all UI components with the open-source tool Storybook: all components were divided into helpful sections and were completed with technical documentation.
On the other hand, there was sometimes a discrepancy between the design files and what had been actually implemented after iterating on the various pages in Atoka. As a result, the code components in the previous library would sometimes differ from the design specs.
Therefore, the first step of the design team was to start creating a new Figma library of reusable components that were up to date with the current interface. The advantage of this library is that it can be updated easily and quickly, and can be added to any design file, thus speeding up the prototyping process.
In parallel with creating the Figma components, the team started writing and discussing design guidelines for each element. By collaborating with the frontend developers, the guidelines were added to Storybook, together with additional resources for the dev team.
While working on the content, we created an internal poll within SpazioDati to bring forward name ideas and choose one. We decided on Oniru, which in Yoruba means “design” - but why a Yoruba word you might ask? The word Atoka actually comes from the same language as well! After the name of the design system was chosen, we then brought Atoka’s branding to the Storybook interface.
Why is it useful?
Oniru helps support design and development in many ways. First of all, the design guidelines represent a solid starting point: when tackling a new project, the team can take advantage of Oniru to make sure that the UI of Atoka's interface always remains consistent. Secondly, the ready-to-use components come equipped with descriptions, tutorials and best practices that help make the design and development process even faster. In addition, new recruits can find helpful guidelines for starting out.
Final thoughts
Our first takeaway from this project is that cross-team collaboration is crucial: by working together on Oniru, we were able to build a design system that is useful for both designers and developers.
Moreover, it was helpful to frame the design system as a living document: rather than fixed, one-fits-all rules and components, Oniru is a flexible system which allows for improvements and additions as we continue working on Atoka. We learned that the system becomes effective once it’s tailored to what the company and the users need.
The current version of Oniru is only the beginning: we will continue to update it and add valuable documentation as we go - and we want to share that on this blog, so stay tuned for future articles!
PS: Want to join us in working on Oniru? Check out our open roles.