Building BNI Wholesale Design System
There were no design documentation, no guideline but vendor works. Joined as a first product designer in the team, I initiate the design system ceration.
Why we built this?
Before creating the Design System, I was actively trying to understand our digital product’s condition and the problems we had.
The team relied on third-party vendor work, so we didn’t have our own design documentation and guidelines. It made it very hard to maintain our product improvements and create new features.
There were inconsistencies here and there — different products used different vendors. So my objective was to take over the vendor’s work and bring it in-house to the design team.
Building a system isn’t easy when there’s already an existing system.
Understanding the product ecosystem
I started by mapping out all 6 products—who uses them, what business goals they support, and how they visually and functionally differ from one another. This helped me identify overlapping use cases and potential areas for shared components.
I also talked to PMs and engineers to understand pain points in maintaining current UI and workflows.
Collecting vendor works
Each product was built by different vendors, using different design languages with no central documentation. I collected all available design files to identify reusable patterns.
I categorized components and evaluated which parts were scalable and which needed to be rebuilt from scratch.
We will not going anywhere if we don't have a plan
Start to create the plan on what will we do & what will we prioritize. here are the plan
Foundations Creation
Audit existing foundation (Brand color), List foundation needed, Create the foundation, Create documentation
Component Creation
Audit existing component in all platform (list existing component), List component needed, Create component, Create documentation
|
Benchmark some DLS Documentation, Create Component Anatomy, Create how to use the component & the guideline
Foundations Creation
Creating the foundations: Colors, typography, shadow, spacing, radius.
Foundations Documentation
We documenting all of the works to help evolving and maintain the Design System in the future
Foundations Implementation
Make it as a style in the design tools with functional naming so it will be easier for designer & developer works when using it
Components Creation
Creating the Components: Buttons, Input fields, Dropdown, Checkbox, etc.
Components Documentation
Creating dedicated file for the components that can be published so that we can use all of the components in every product and projects.
Components Implementation
When creating the component, we make sure the component spec that can be selected based on project needs like size, component state, hierarchy and type (with icon or without icon).
Documentation & Tracker
The things that I really care beside the project impact is documentation and tracking, because by creating the documentation we can maintain the project and know where the project are.
So I create simple sheets that can track how much component we have, what component we need to build, where is the component file & location.
Project Impact
Stared from nothing, no documentation and just vendor works. This design system help my team to maintan 6 products consistency, the company not relied to vendor and we can save a lot of cost also speedup the design and development time because using the component is easy and we have the same language with the developer.
Also, it easier for new designer to learn and use the design system.
Maintain 6 products consistency
Save 15+ Billion Rupiah
Speedup design & development time