Building JALA.ai Design System — a Case Study
How to provide a shared reusable library component that can help speed up the design process and build bridges among teams.
Before I got this project, I only knew the Design System as a mythical creature, the savior, frequently mentioned in articles, books, videos, or even snippets on social media.
Finally, in this project, I got the chance to introduce myself to the Design System. But it is not an easy introduction, I have to teach myself about the Design System from scratch. And I’ve learned a lot from it.
My role in this project is as a UI/UX Designer. And I collaborated with other UI/UX Designer to manage and organize the design assets.
Context
JALA.ai is in a growing phase and scaling up. Meanwhile, they don’t have a system to organize all the design assets, yet.
Objective
- To have a clear standard and guidance for design assets.
- Maintain the consistency of the components.
- To provide a shared reusable library component that can help speed up the design process, close the gap and build bridges among teams.
Approach
My approach to create this Design System is start with research, interface audit, inventory, edit, and documentation.
- Research → since I never had the experience of creating a Design System yet, I started it with heavy research. I read articles, books, videos, and studied the other company’s Design System that can be accessed by the public (Shopify, Atlassian’s ADS, and some resources from Figma community).
- Interface audit → took screenshots of every page, menus, modals, and many more of the existing UI elements.
- Inventory → I categorize & group UI elements that have been collected from the interface audit step. Try to take a good look at them side by side to have a clear visual of the system; to see the consistency or inconsistency, and areas that I want to align.
- Iterate → define the style (typography, color, etc.), pattern, category, and naming. This step was where I spent my time the most during this project. For frequently used UI elements, I create them quite specifically so the team can save time from assembling them.
- Documentation → this is the most crucial step, in my opinion. Whether this is where you can achieve your objective or not, all those components’ consistency, style, and design pattern will mean nothing if you can’t create good documentation. Remember the objectives: to have guidance, and most importantly, to provide a system that can close the gap and build bridges among teams.
Challenges
- This is my first experience with the real Design System.
- Working with cross-functional team (developers & PM). Try to close the gap as small as possible.
You can check a glimpse of the design system documentation below ⤵️
*Shoot me an email to get more access of the document.
This initial Design System of JALA.ai is just the beginning, because Design System will grow. It evolves.
