Background
This project was driven by the momentum of Blibli rebranding on October 5, 2023, which brought many changes, as well as a comprehensive transformation of the company's visual identity and digital ecosystem. This change also encouraged the need for an update to the BLUE Web Design System to align with the rebranding and the spirit of Blibli's new identity.
At the same time, the Vue 2 framework announced that December 31, 2023, is its end of life (EOL) period, meaning it will no longer receive feature updates, security patches, or bug fixes. This condition serves as an important warning because the codebase of the old design system (BLUE 2.0) still relies on Vue 2, which potentially poses technical and maintainability risks in the long term if it is maintained.
Furthermore, in the previous version (BLUE 2.0), there were differences in the design language between the customer and seller ecosystems. This condition triggered a strategic need to unify both ecosystems into a single centralized source through BLUE 3.0, making component management more efficient while ensuring a more consistent user experience across all Blibli services.
Given these conditions, the BLUE UX Engineer team decided to make a major update to the BLUE Web Design System from version BLUE 2.0 to version BLUE 3.0. This strategic decision was made to build a more adaptive component architecture to support the massive transition to the new visual identity, while simultaneously migrating to Vue 3 to maintain security, stability, and optimal application performance at the production level without sacrificing the compatibility of the current running system.
Problem Identification
Based on this background, several main problems that were identified are as follows:
- Blibli's rebranding brings major changes to the company's visual identity and digital ecosystem, requiring a comprehensive update to the web design system elements to align with the direction and spirit of the new identity.
- The reliance of the BLUE 2.0 codebase on the Vue 2 framework poses technical and security risks after the framework officially reaches its end of life (EOL).
- Differences in the design language between the customer and seller ecosystems in the previous version (BLUE 2.0) resulted in less efficient design system management and hindered the consistency of user experience across Blibli services.
- The migration process to Vue 3 and the unification of the design system ecosystem potentially cause breaking changes if not balanced with a mature code compatibility management strategy.
Goals and Objectives
The main goal of this project is to develop the BLUE Web Design System (BLUE 3.0) based on Vue 3 to support the momentum of Blibli's rebranding while providing a more modern, consistent, and scalable design system foundation for the entire Blibli web ecosystem.
To achieve this goal, several main objectives were established as follows:
- Align the design system with Blibli's new visual identity post-rebranding.
- Migrate from Vue 2 to Vue 3 to improve system stability, security, and sustainability.
- Unify the customer and seller ecosystems into a single centralized design system.
- Provide a safe and gradual transition process for projects that have not yet migrated to Vue 3 so they can still adopt the visual direction of BLUE 3.0 without disrupting the stability of running systems.
Roles and Responsibilities
In this project, I acted as part of the UX Engineer team that collaborated directly with designers in the development process of the BLUE Web Design System (BLUE 3.0).
The responsibilities included:
- Developing BLUE Web Design System (BLUE 3.0) components based on Vue 3 with a more modern, scalable, and consistent architecture.
- Structuring and developing BLUE 3.0 Design Tokens, covering colors, typography, sizing, opacity, and elevation.
- Developing the BLUE 3.0 Icon Library by converting SVG files into Vue components.
- Adapting and updating the visual components of BLUE 2.5 to ensure alignment with the design direction of BLUE 3.0, keeping it compatible for use in Vue 2-based projects during the transition period.
- Ensuring the quality and consistency of the design system through technical documentation, code review, testing, and regular evaluations.
Process and Execution
The development of this project began with a discussion and alignment process attended by all stakeholders consisting of the UX Engineer and Designer teams to formulate the direction of the new design system development post-Blibli rebranding. At this stage, evaluations were carried out on the previous design system structure, identifying the need for migration to Vue 3, and formulating an implementation strategy so the migration process could run more safely and maintain compatibility with existing projects.
Once the development direction was agreed upon, the execution process was carried out in parallel, encompassing the development of design tokens, icon libraries, component libraries, up to adjustments to the previous design system as an effort to maintain backward compatibility.
The development and implementation processes carried out included the following:
- Developing design tokens in BLUE 3.0 by converting JSON files generated from the Figma plugin Token Studio into SCSS format using the Style Dictionary library.
Converting design tokens from JSON format to SCSS using Style Dictionary
- Developing the icon library by converting SVG files from the designer into Vue components, making them more flexible to use and easier to manage in terms of colors and styling.
Converting SVG files into Vue components in the BLUE icon library
- Developing the component library as the core part of the BLUE Web Design System (BLUE 3.0) based on Vue 3 to support UI implementation consistency across various projects and Blibli's digital ecosystem.
- Making adjustments to the old design system (BLUE 2.0) by aligning the visual components to match BLUE 3.0, then rebranding it as BLUE 2.5 to maintain backward compatibility with currently running projects.
- Conducting initial implementation through pilot projects in several projects as a validation and adoption testing phase before the design system is applied to the larger ecosystem.
The entire development process also went through regular code review and QA stages to ensure the quality, consistency, and stability of components before they were used widely.
Results
The development of the BLUE Web Design System (BLUE 3.0) successfully supported Blibli's rebranding process through a more modern, consistent, and scalable design system update for various projects in Blibli's digital ecosystem.
The results achieved from this development include the following:
- Successfully developed the core foundation of the BLUE Web Design System (BLUE 3.0) based on Vue 3 through the development of integrated design tokens, icon libraries, and component libraries to support UI implementation consistency across various projects.
- Successfully made adjustments and rebranded BLUE 2.0 into BLUE 2.5 as a migration bridge to help maintain compatibility for projects that have not yet migrated to Vue 3.
- Successfully validated the implementation through pilot projects as an initial adoption stage before the design system is applied more widely in Blibli's digital ecosystem.
Impact
Impact on the Company
- Helped support Blibli's rebranding process through the implementation of a more modern and consistent design system.
- Improved design system management and user experience consistency across all Blibli services through the use of a centralized design system that unifies the customer and seller ecosystems.
- Reduced redundancy and accelerated development delivery in projects, evidenced by the satisfaction survey results in mid-2024 with a score of 8.48 for redundancy reduction and 8.42 for delivery acceleration.
- Helped the migration process to Vue 3 run safer through a backward compatibility approach in BLUE 2.5.
Personal Impact
- Deepened experience in developing and managing large-scale design systems based on Vue 3.
- Improved skills in building integrated design tokens, icon libraries, and component libraries.
- Increased understanding in designing backward compatibility strategies to maintain migration stability and cross-system compatibility.