J/BE Design System
J/BE or read as "JIBE" is a design and development agency specializing in e-commerce. In this project, I have a role as a designer hired by Polyform Studio to create a full set of the design system for JIBE so for the upcoming client that JIBE have, the company already have set of design kit that ready to use for a multi-eCommerce related purpose.
Process and method
In this specific project, we use the Atomic Design System approach to solve the issue that "JIBE had for the huge project they need to re-edit and re-adjust almost all design they already have, and obviously need a better solution to get more efficiency of their design.
The process of this design system development divided into 5 stage from research up to design deliverable
👈🏼 see image
This research will contains early exploration about what and how this design system will finish and can be use and need to be confirmed by JIBE themself especially their design and developer team
So we come up with this research breakdown to cover any possible case that might have in the future development
The design stage for this design system are everything that we already did in research in "research" stage including component list and deliverables.
The design stage for this design system cover up all atomic design system needs:
All the 6K items come up with high detailed component concerns:
- ABEM naming system
- Paddings, margins, spacing, and grid styles
- Auto-layout, variants
- Inline integration with all colors and font styles
All of those need to apply to make sure all possible case and variants fully functional
here's some component sample 👇🏼
After all these designs work finished and went through reviews. All items are ready to publish and use as it supposed to be use as design components.
- Figma Components
- Zeplin Styleguides