Jabar Design System v.2

Overview

Jabar Design System (JDS) is a centralized design framework developed by Jabar Digital Service to ensure consistent visuals, smooth functionality, and accessible user experience across government-managed platforms in West Java.
The second version of JDS builds upon the learnings from its predecessor, offering modular, scalable components and clearer documentation for designers and developers to accelerate product development and maintain long-term consistency.

The Challenges

We Needed to Fix Inconsistency and Make our Workflow Smoother

In the early phase of digital transformation, multiple issues emerged:

• Inconsistent Design Across Platforms
  Products were built by different vendors without shared standards, resulting in fragmented user interfaces.

• Limited Scalability
  Without reusable components, expanding or replicating products required starting from scratch.

• Inefficient Collaboration
  The handoff between designers and developers lacked clarity, often leading to misaligned implementations.

• Lack of User Validation
  Some components didn’t reflect user needs due to limited testing and feedback loops.

Objectives

Our Goal Was to Make Designing and Building Easier for Everyone

The goals for JDS v.2 were:

• Provide a set of modular, reusable UI components that are easy to customize.

• Establish clear documentation and handoff standards to bridge design and development.

• Improve scalability through a sandbox environment and design tokens.

• Prioritize user-centered design by embedding usability testing in the development cycle.

My Role as a UI Designer

I Helped Design the Components and Made Sure Others Could Use Them Easily

🔍 Analysis & Evaluation

Analyzing required components and evaluating those from version 1, users and product needs. Simplifying complex elements to improve usability and effectiveness.

🧩 Component Design

Ensuring customizability for different application needs while maintaining design consistency. I designed core elements such as: (Action buttons, toggles, adaptive form inputs, sidebar navigation, multi-state dropdown menus, etc). Each component followed strict guidelines for consistency and flexibility.

📚 Documentation & Handoff

To support adoption, I created comprehensive documentation for each component, component anatomy, playground and providing clear usage guidelines that allow other UI designers to implement the components effectively in their projects.

🧪 Testing & Iteration

As UI designers, we often face uncertainty about which style to adopt or whether a component meets its intended function, so I incorporated A/B testing during usability testing to validate and refine the components we created.

Lessons Learned

Good Systems Need Teamwork, Testing, and Clear Docs

Cross-functional collaboration is critical. Clear handoff documentation bridges the gap between design and development.

• Iteration brings clarity. Testing early and often ensures we build what users truly need.

• Open access extends impact. We're preparing to publish JDS v.2 on Figma Community, following the success of JDS v.1 with 5,300+ users.

A Strong Design System Helps Teams Build Better, Faster, and Together

With JDS v.2, we moved closer to our mission of delivering inclusive, efficient, and user-friendly digital experiences for the people of West Java. By creating reusable foundations and empowering teams to build consistently, we laid the groundwork for long-term digital growth in the public sector.