Design System BSPACE 🧩
BSPACE Design System 2.5.0 The BSPACE Design System is the foundation for exceptional user experiences within the BUMA Super Apps. Built on four pillars Foundations, Components, Patterns, and Terms it ensures consistency, scalability, and efficiency in design processes.
Company
PT Bukit Makmur Mandiri Utama
Tools
Figma
Role
Coordinator Designer of Project Design System
Deliverables
Foundation, Component, Guideline Use, Design Token
⚠️ Disclaimer
This case study has been simplified and modified to comply with the company's confidentiality agreement (NDA) requirements.
Overview
As a key contributor to BSPACE, an ERP System for BUMA employees, I led the creation of the BSPACE Design System. Developed using the Double-Diamond Model, it addressed core user challenges through extensive research and collaboration with analysts, developers, and internal users. This approach provided deep insights into workflows and system requirements, leading to a structured execution plan and phased delivery.
The system was built incrementally, starting with foundational elements and expanding to atomic, molecule, organism and pattern-level components. Feedback loops ensured continuous improvement, fostering cross-functional collaboration and enhancing user experience and development efficiency.
Timeline
The journey of building the BSPACE Design System started with in-depth research to understand what a design system is, how it should function, and the best way to develop one. At first, our team was small just two designers and one lead designer but we were driven by the same goal: creating a system that ensures consistency and efficiency across all BSPACE projects.
🔎 Research Phase
We kicked things off by exploring existing design systems, analyzing how components were implemented, and reviewing the company's brand guidelines. We also gathered insights from our Lead UI/UX Designer and studied industry-leading design systems like Atlassian and Metronics to see what worked and what didn’t.
🔭 Research Findings
Through discussions and feedback, we documented key challenges, including:
Multiple libraries causing confusion among designers.
A lack of alignment between design and development.
An unorganized system that made it harder to use.
Brand guidelines that weren’t fully adapted for digital products.
📋 Defining the Problem
To make sure we were solving the right issues, we framed How Might We (HMW) questions, categorized all our findings, and set a clear direction for the design system.
☝️ Finding Solutions
With the foundation in place, we began structuring the design system, drafting components with all possible variants, and considering factors like laws, geography, different screen sizes, and product requirements.
🚀 Growth & Iteration
At first, we focused on building the foundation, sketching out ideas, and listing essential components that would be frequently used. Each component was well-documented to maintain clarity and consistency. However, as we progressed, we realized that maintenance and continuous improvements were necessary to meet evolving needs.
Over time, our team grew to five designers and one lead designer, making the development process faster and more structured. With a larger team, the BSPACE Design System became more refined, user-friendly, and scalable. Today, it continues to evolve with each version update, ensuring better usability, efficiency, and consistency across all projects.
It’s been an exciting journey, and we’re proud of how far we’ve come!
Key Features of the BSPACE Design System
🔧 Configurable
Designers can easily customize components in Figma using an intuitive variant panel, making workflows faster and more efficient.📏 Scalable
Built to adapt seamlessly across all screen sizes, from mobile devices to ultra-wide screens, ensuring consistency everywhere.🎭 Interactive
Includes fully defined states and micro-interactions, making prototypes feel more realistic and improving stakeholder understanding.🌍 Universal
Designed to support a wide range of product needs while maintaining a cohesive experience across the platform.♿ Accessible
Follows WCAG 2 standards with features like color contrast checks, screen reader compatibility, and keyboard navigation for inclusivity.🎨 High-Fidelity Prototypes
Enables detailed, realistic prototypes that enhance presentations and improve user testing insights.💻 Cross-Platform Compatibility
Optimized for both mobile and web, ensuring a seamless and consistent user experience.🤝 Collaborative Integration
Bridges the gap between designers and developers by aligning design components with development needs, reducing miscommunication.
This system was built to empower teams, improve efficiency, and create a smooth, user-centered experience across BSPACE products.
Platforms
🖥️ Website
The BSPACE Design System is fully responsive on web platforms, providing a consistent interface across different devices and screen sizes for a seamless experience.📱 Mobile
Optimized for smartphones and tablets, ensuring smooth interactions and a user-friendly experience on all mobile devices.
No matter where users access BSPACE, the design system guarantees a cohesive and intuitive experience across platforms.
BSPACE Design System Documentation
The BSPACE Design System was developed using atomic design principles, ensuring a well-structured and scalable system for designers and developers.
It includes 📖:
✅ Figma Library - Featuring 40+ components, 7+ foundations, 6+ patterns, and 9+ terms for consistent and efficient UI design.
✅ UX Wireframe Kit – Simplifies the early-stage design process before transitioning to high-fidelity prototypes.
✅ Component Framework – Standardized UI elements that streamline development and maintain design consistency.
To maintain a cohesive and scalable design system, we implemented Design Tokens as the foundation.
Design Tokens
Design tokens are visual variables that store values for colors, typography, spacing, radius, and effects. These tokens allow us to:
Ensure consistency across web and mobile platforms.
Enable large-scale updates by modifying a single value without disrupting the entire system.
Enhance collaboration between designers and developers by standardizing UI elements into code.
These design tokens are integrated into all components of the BSPACE Design System and are continuously refined based on evolving needs. To keep the design system adaptable and well-maintained, we follow a structured Flow Enhancement Design System process.
Flow Enhance Design System
This process outlines the systematic steps to enhance and maintain consistency within the BSPACE design system, ensuring seamless collaboration between the UI/UX team and UI engineers while delivering high-quality components for developers.
The Flow Enhancement Design System ensures that BSPACE's design system remains scalable, well-maintained, and continuously improved. When a new component or update is needed, the request is reviewed by the Lead UI/UX Designer to ensure alignment with system standards. Once approved, a UI/UX Designer creates a branch, refines the design, and submits it for review. After approval, the update is published along with a changelog for documentation. The task is then assigned to a UI Engineer for development, ensuring seamless integration into the system. Finally, the updated component is released for developers, maintaining consistency and usability across BSPACE applications.
Meet The Team
As designers, we worked closely with the engineering team to ensure the design was accurately translated into technical development. We followed atomic design principles and documented every design decision to ensure consistency across the team.
BSpace's designers and engineers deliver assets such as elements, components, patterns, and code alongside instructions to help teams design and build efficiently.
This streamlined system has become a crucial tool, driving efficiency, consistency, and innovation across BUMA’s digital products.
What's the Impact?
📌 Impact of the BSPACE Design System:
Consistent User Experience, Users experience a seamless and consistent interface across mobile and web platforms, making it easier to adapt.
Efficient Collaboration, Designers and engineers can work more efficiently thanks to clear documentation and design standards, speeding up development.
Time and Cost Savings, Reusable components reduce development time and minimize technical errors.
Scalability and Flexibility, The design system supports easy expansion and feature adjustments without compromising quality or consistency.
Improved User Satisfaction, Intuitive design enhances user comfort, increasing productivity and reducing frustration.
Strengthened Branding, Design consistency reinforces BSPACE's professional image, boosting credibility and user trust.
The BSPACE Design System was built with a strong commitment to consistency and scalability, featuring over 40+ components, 7+ foundations, 6+ patterns, and 9+ terms. This achievement was made possible through the collaboration of our UI/UX team, ensuring a unified and seamless user experience. Every component is continuously maintained and enhanced to meet evolving needs, reinforcing the system’s adaptability and long-term reliability.
Last but not least with this Design System, BSPACE delivers a more efficient, scalable product while enhancing the overall user experience. 🚀🚀🚀