Jitjatjo’s UI design system
An overview of creating and maintaining our in-house design style and component library
Overview
The company underwent a significant rebrand early in its inception. The design team took that opportunity to roll out the new brand across its entire product suite. This transition presented an opening to establish a unified visual identity that could transcend all products, ensuring a harmonious style. The key approach involved developing a structured design framework aligned with the updated brand ethos and guidelines.
We originally established the library within Sketch and utilised third party products such as Abstract and Zeplin to publish the design library for front-end devs to work with. As we saw Figma emerging as the dominate platform to design on, and the benefit of it being an all inclusive software solution, we transitioned the design system over to it. A difficult task as (at least at the time) there were no simple tools available that allowed for the importing of .sketch file to .fig. So we pretty much had to re-create all those elements from scratch.
The basics
The main colour components were established by the branding agency. They were focused heavily on the marketing side of things and not necessarily on the products themselves, so the design team worked on fleshing out those main core colours and to establish secondary, supportive colours as well as their appropriate hues for things like rollover/hover states/on press interactions
Primary Colours
Secondary Colours
The main purple colour for the branding was deemed to be quite strong and so the decision was made early on to use it sparingly and only utilise it for the main call to actions.
Primary call to action
Secondary call to action
Supplementary text link
Layout guide
All of Jitjatjo’s products feature heavy amounts of data for its administrators, managers, and workers to digest. The use of images is limited, as the main objective is to maintain a clear and organised display of information. Our key challenge revolved around effectively showcasing this data in a visually appealing and easy-to-read format. To address this, we dedicated effort towards decluttering the interface, emphasising clean layouts with ample white space, and eliminating any superfluous effects such as shadows on elements.
Old vs new design look and feel
Iconography was used only when we deemed it worthy to support the accompanying data as well as graphic treatments like progression bars as other options to highlight particular data points than just default to, say, showing a number on screen.
The rollout
Atomic design system
We utilised the atomic design system principal. With this approach we took to the actual component making – combining our smaller pieces into bigger "organisms". This means we can break entire interfaces down into fundamental building blocks and work up from there. After that it was just a matter of rolling out each individual element and then component variations.
We rolled out a design system for both Web and Mobile Apps
Teamwork
When it came to adding and maintaining the design system, that responsibility was spread across the entire design team. We would have dedicated weekly catch-up session to discuss when any new elements had been created, or if any tweaks needed to be made to existing pieces. This insured that when folks were updating their designs, that nothing broke along the way.
Components were deemed design system appropriate depending on the various project tickets we received. If we deemed it necessary to create a new component to fit a specific task, and we could see relevance for it in future use cases, it would then be added into the design system.
Notable highlights
One unique opportunity that arose after our design library was established was when we brought on a new client based in the Israeli market. With that, a new challenge for the team was rolling out the entire Jitjatjo product suite to work with a right to left website/app design. That meant updating every component to also work, and read, from right to left.
End result
Within a time-frame of less than a month, all of our core products and website were updated to the new brand design. Following from that, our front-end development teams efficiently tackled the task of implementing the rebranding work in a mere two weeks. The seamless coordination and dedication displayed by the team members resulted in a successful and timely execution of the project.
The Jitjatjo platform has been licensed to several major enterprise organisations. In early 2024, Jitjatjo secured a Series B funding round of US$30M.