Initiating BLUE Android & iOS: Blibli’s Design System for Mobile App
From Web to Mobile: The Rebirth of BLUE
So, let’s talk about Blibli Unifying Elements (a.k.a BLUE), Blibli’s secret sauce for design. It’s like a one-stop-shop for everything design-related at Blibli — from the big picture stuff like philosophy and branding, down to the nitty-gritty details of UI kits and code.
We’ve had BLUE for web for a while now, and it’s been a total game-changer. A mid-2024 survey of BLUE for web developers (credit to Clara and Glenn) revealed that BLUE scored 8.48 for reducing redundancy and 8.42 for speeding up delivery, indicating a significant impact on Blibli’s development.
But here’s the thing: most people use Blibli on their phones (more than 85%!), not their computers. So, we realized we needed to bring BLUE to the mobile world. Thom Yorke said “Don’t get any big ideas, they’re not gonna happen” in a Radiohead’s song. I love the song. But, I’m sorry, Thom. I have to respectfully disagree in this case.
That’s where I came in, leading the charge to create BLUE for Android and iOS. I teamed up with our awesome UX Engineers — Vanessa Ardelia, Endras Amartya, and Muhamad Arsaludin — and we got to work.
Tackling the Challenges
The initial challenge we faced: the knowledge. Our UX Engineers primarily focused on web development, particularly on visual design and micro-interactions using Vue and CSS in daily work. To tackle mobile development, we brought in experienced Android and iOS developers (a.k.a our friends from the tech team) and organized a learning program. Our designers also had to familiarize themselves with the design best practices and limitations for each platform.
Despite our initial focus on web, we quickly adapted and learned the ropes of mobile development. We estimated six months for this learning phase before we started to touch the grass of mobile development, but our enthusiasm and determination (and also forced by the circumstances, actually) allowed us to accelerate the process.
Furthermore, we wanted to make the design system inclusive, allowing contributions from all teams. This project wasn’t just about building a design system; it was about building a team. We brought together folks from different teams (including both from Indonesia and India team), with varying priorities and approaches.
Nick Fury had to overcome countless challenges to assemble the Avengers. Similarly, we faced our own obstacles in uniting our team and creating a cohesive design system. And you know what? This might be the first time the Customer and Seller tribes have collaborated on a single project. Can you believe it? It wasn’t easy, but it was definitely worth it.
We took on the ambitious task of building BLUE Android with the cutting-edge Jetpack Compose framework, a first for Blibli. For BLUE iOS, we opted for the SwiftUI framework, despite our Customer tribe still being rooted in UIKit. A key decision point was whether to adopt BLUE into our products once development was complete.
Adopting these newer technologies meant migrating our projects (for iOS, we also needed to increase the minimum iOS version required to use the Blibli app), which required extra effort. However, we believed the long-term benefits outweighed the initial challenges.
Jessica gave us a boost by getting the stakeholders on board. Next, we laid out the plan, picked the best tools, and figured out how everyone would work together. To streamline the process, I worked with the team to establish a robust project management system, including a project charter, project tracker, code review guidelines, and such. These tools provided a solid foundation for our development efforts.
The Outcomes
In July 2024, we successfully launched the first major version of our BLUE design system for Android and iOS. This release followed six months of intensive development with eight minor releases for Android and five for iOS to support Blibli’s recent rebranding initiatives.
It provides a core library of over 30 components for both Android and iOS, significantly reducing development time and ensuring design consistency. We also introduced a robust design token system, generating tokens for Jetpack Compose and SwiftUI, enabling efficient theming and customization. Additionally, the centralized BLUE Icon library streamlines asset management, eliminating the need for manual exports from design tools.
Core Library
The core library has significantly reduced development efforts by providing components that adhere to our design guidelines. For instance, on the Android platform alone, five tribes would have required the creation of 150 components to implement the new design. With our design system, we only needed 30 components, which were collaboratively developed by multiple teams. Moreover, we ensured high fidelity between the components and the original designs, minimizing the risk of visual bugs in projects.
The core library is the main course of the project. With a huge respect for all contributors, I need to appreciate to Customer tribe team for Android and the Seller team for iOS that contributed most of the components in the library.
Design Tokens
Design tokens have provided us with the scalability needed for future theming. As a design system, we anticipated the need for flexibility and prepared accordingly. By configuring light and dark mode themes from the outset, we can efficiently modify design values when necessary.
Before diving into the BLUE Android & iOS project, I was involved in establishing our design system’s foundation, including developing the design token. This involved figuring out how to generate JSON files from Figma using Tokens Studio to a ready-to-use format and standardizing design tokens together with the designer. We’ll delve deeper into these processes in a future post.
BLUE Icon
Furthermore, the centralized BLUE Icon library has streamlined asset management. Previously, developers had to manually export assets from Figma and store them within individual projects, leading to potential duplication. With our new system, developers simply import the required icons and update them as needed.
Unexpectedly, the BLUE Icon, while not the primary focus, has become a standout item of the project. Its efficiency has delighted developers, perhaps as much as a Manchester City fan celebrating their historic treble winner back then.
So… how about the adoption puzzle?
Exciting news! We’re transitioning to Jetpack Compose for Android and SwiftUI for iOS, starting with new projects and pages that need a revamp. This means we can finally leverage our unified design system, BLUE, across all platforms. While BLUE is currently being adopted in new projects and pages undergoing updates, this marks a significant step towards unifying our app designs.
Lessons Learned and Gratitude
This project has been instrumental in my professional growth. It introduced me to iOS development and allowed me to create components for BLUE, a new experience for me, having previously focused on web development. On the managerial side, I learned to establish a system to ensure the project’s success, even when involving stakeholders from different departments. In terms of leadership, I was tasked with mentoring fellow rising UX Engineers, helping them grow and overcome challenges throughout the project.
By working on this project, I had the opportunity to collaborate with talented Android and iOS developers from the tech department. While numerous other Android and iOS developers who played a crucial role but whose names I cannot list individually contributed to the project’s success, I would like to express my sincere gratitude to some key people: Blasius, Anthony, Syntia, Ervin, Rakesh, and Prashant for their invaluable contributions to BLUE Android, and to Aldrian, Farhan, Pawan, and Welly for BLUE iOS.
Next, I need to say: I’m blown away by what the UX Engineers have pulled off! I thought we were just going to focus on the looks and feel of things, but we went above and beyond. We built some awesome components from scratch. It’s been a wild ride, but I’m so proud of the team!
Superman can be defeated by a human (It’s Batman and thanks to Kryptonite!). It’s a reminder that nothing is truly perfect. Similarly, BLUE, while excellent, has room for improvement. This 0-to-1 phase is just the beginning. There’s always potential for growth and refinement, as with any product.
Finally, the pride I feel for this project stems from its potential impact on Blibli’s development processes and the remarkable growth of Vanessa, Endras, and Arsal.
