2024
Preview the public documentation of BLUE 3.0 here
BLUE stands for Blibli Unifying Elements, home to Blibli Design philosophy, creative vision, and guideline.
PROJECT BRIEF
BLUE, part of a Design Ops initiative, is a design system created to streamline Blibli’s product design process, with the purpose and mission to:
① Establish a single source of truth repository & guideline for an effective collaboration.
② Build a comprehensive and stable design system at scale.
③ Create shared language and visual consistency across pages, products, and platforms.
④ Become Blibli's derivative brand identity in the product platform.
This case study features the latest version of the BLUE design system, BLUE 3.0, which was launched together with the Blibli rebranding initiative. As of 2024, BLUE has been used and implemented across web, Android, and iOS platforms, and is actively used by over 15+ tribes.
KEY ROLE:
As the Design Manager of Design System team, 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.
-
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.
Design System Library
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
DocSite Guideline
A central hub that serves as a single-source-of-truth for designers, copywriters, and developers, offering comprehensive component guidelines, code, and resources.
-> Preview BLUE DocSite
-
We received an impressive NPS score of 4.39/5, signaling strong engagement and satisfaction.
-
91% reported that BLUE improved communication with stakeholders and enhanced their productivity
-
The design system achieved a 90% adoption rate across products and tribes.
- DocSite library received rating score of 4/5 for ease of use, efficiency, and satisfaction.
These insights validated the value BLUE brings to day-to-day workflows. However, they also revealed areas for improvement:
- Maintaining changelogs, resolving bugs, and managing code updates at scale is a continuous challenge.
- Encouraging external developers to actively contribute feedback and report issues is another hurdle. These insights raised an important question: How might we build shared ownership and improve collaboration across teams?
As we move forward, strengthening workflows and community involvement will be key to scaling BLUE sustainably.