BLUE 3.0
Revamping Blibli’s Design System for Scalability and Growth
Design System
Product Design
overview
BLUE (Blibli Unifying Elements) is the foundation of Blibli’s design philosophy, creative vision, and guidelines. This case study highlights BLUE 3.0, the latest version launched alongside Blibli’s rebranding. As of 2024, BLUE is implemented across web, Android, and iOS platforms and is actively used by over 15 tribes.
Company
Blibli (E-commerce), 2024
My Role
As the Design Lead, I led and managed the team by defining the strategy, blueprint, and roadmap phases. I provided design direction and implementation strategy, while also earned stakeholder trust and facilitated collaboration across functions to ensure the product’s adoption and ongoing support.
Background
Challenges
& OPPORTUNITY
Design system development is fragmented & inconsistent
There is no Single Source of Truth (SSOT) as reference
Upcoming major company-wide rebrand initiative
This challenges presented an opportunity to rebuild and strengthen Blibli’s Design System with the following objectives:
Revamp UI & Visual Language
To promote and communicate brand trust and value, supporting the rebranding initiative.
Build Consistent & Scalable Tech Structure
To achieve efficiency, consistency, and enable scale across platform (e.g. design tokens, and tech architecture).
Establish an SSOT documentation
To provide alignment, clarity, and agreed guidelines for both designers and developers, reduced silo collaborations.
Increase Adoption Across Platform
To maintain consistent implementation and ensure a coherent user experience.
BLUE Old Version
The previous version of BLUE consisted of two separate design systems that needed to be maintained in parallel and featured outdated UI visuals. Without a token-based structure, it accumulated significant design debt, leading to inconsistencies, inefficiencies, and greater maintenance complexity across platforms.
Components for Customer Facing Products
Components for Internal Facing Products
Homepage
Product Detail Page
Seller Order Dashboard
Analytic Dashboard
Approach
& Process
System Architecture
To create a scalable design system, we revisited BLUE’s architecture and reviewed its product portfolio to ensure a maintainable framework for the long term.
The BLUE design system is thoughtfully crafted to serve both designers and developers, fostering consistency across design execution and code implementation. It comprises four integrated pillars, each addressing a specific need within the product and brand ecosystem:
Design System Library
A centralized collection of foundational elements—design tokens, reusable UI components, and interaction patterns—built for scalability and cross-platform alignment.
Asset Library
A shared repository of visual assets, including icons, illustrations, animations, and marketing banners, enabling cohesive storytelling across product and marketing touchpoints.
Content Library
A unified framework for language and communication, covering voice and tone, a shared word list/glossary, and technical writing standards—ensuring clarity and consistency across UX writing and brand messaging.
DocSite Guideline
The single source of truth for BLUE’s documentation. It consolidates usage guidelines, references for implementation, and access to all system assets—empowering teams with self-service resources and best practices.
7 Tokens
33 Components
16 Patterns
Establishing the right foundation early, along with standardized processes and shared knowledge, has been essential for enabling smoother collaboration and alignment across multiple tribes and platforms. The BLUE Design System Library currently includes 7 tokens, 33 components, and 16 patterns, and will continue to evolve in response to the growing needs of Blibli’s product ecosystem.
Overview of characteristics and implementation ownership of each product type within the library
Visual System
Language
The rebrand aimed to convey a more professional tone and build trust with customers. We refined the visual elements—colors, fonts, and shapes—to reflect this new direction, choosing clean and modern fonts, elevated colors, and less rounded forms to ensure the design works seamlessly across both customer-facing and internal products.
Shared Ownership
We set a clear vision and built shared resources to enable seamless collaboration and delivery across teams. Through collective ownership and open communication, the design system evolved consistently while aligning everyone toward common goals.
Web ownership is fully centralized under the BLUE Team
App ownership is centralized, with shared responsibility for maintaining and improving components.
Centralized code framework for better collaboration
The Revamp
Overview of characteristics and implementation ownership of each product type within the library
Semantic-based color system
Assigns meaning and purpose to color, guiding designers in making intentional choices that enhance visual consistency, strengthen brand coherence, and improve accessibility across experiences.
Applications
Documentation
Guideline
Serves as a SSOT
(single-source-of-truth)
BLUE DocSite provides comprehensive guidelines, code, and resources for designers, copywriters, and developers.
We reviewed its information architecture to ensure content was properly organized and easy to find and navigate. It includes everything from component usage and code examples, design tokens and accessibility standards, content writing guidelines, assets, interaction patterns, and best practices for implementation across platforms.
BLUE DocSite Information Architecture
App Catalog
Preview
Impact
& Metrics
NPS score of 4.39/5
Reflecting strong engagement and satisfaction.
Improved communication & productivity
91% reported that BLUE improved communication with stakeholders.
DocSite rating score of 4.3/5
Satisfaction score for ease of use, efficiency & satisfaction.
88% adoption across tribes (15/17)
Up from 12 tribes previously, limited by legacy systems and low development priority.
