June. 2023 - Feb. 2024
Rebuilding the Dcard Color System: Unifying Colors Across Three Platforms
Over the past period, I used the variables feature introduced by Figma in 2023 to rebuild Dcard's new color system. This article mainly discusses how I promoted the integration and reconstruction of the Dcard new color system within the team.
Role
Project Owner
responsibility
Design Ops
Product
Design system
Background
Dcard is a well-known social media platform in Taiwan with a large user base. Although it is a mature product, there are some issues within Dcard's design system, one of which is the lack of a unified color system.
Previously, each of the three platforms (web, iOS, Android) had its own color system, leading to many inconsistencies. For example, certain colors were different across platforms, or the same color code had different names on each platform.
This resulted in some color differences in Dcard's interfaces across different platforms.
Goal
My goal is to integrate the colors across the three platforms to create a unified Dcard color system.
Reduce production costs and improve development efficiency
Minimize repetitive color changes for designers
Lower communication costs between designers, engineers, and QA
Establish comprehensive Light mode & Dark mode mapping rules, reducing design production time through automatic switching
Increase consistency, enhancing the user experience through cohesive design and branding
How to promote? What Did I Do?
Unifying the colors across three platforms involved extensive cross-team communication and coordination. Therefore, I decided to prepare privately and seek allies to push for integration.
Coincidentally, Figma introduced the variables feature in 2023, which provided an excellent opportunity. I created a preliminary version and showcased it to some colleagues, demonstrating the benefits of unified colors and the one-click switching between Light mode & Dark mode. I found some partners, L and H, and thus began the promotion of the New Color System.
The entire promotion process can be divided into the following stages:
01 Research Phase
I initially established a viable direction for the future, studied various design systems, and created a pilot version using Figma's Variant feature.
02 Preparation Phase
During this phase, I collaborated with two design partners to inventory the colors across the three platforms and try to unify them.
We applied these unified colors to the main pages to see if the new colors could fit well. After that, we produced the first version and prepared to seek support from higher-ups and promote it to other partners.
03 Planning Phase
We started involving development partners in this phase. Together, we discussed and made adjustments for the second version, setting the collaboration methods for the future. After L's departure, I took over part of L's responsibilities to ensure that the timeline and direction were on track.
Meanwhile, I created relevant presentations and maintained communication with team members.
04 Development Phase
During this phase, we created a comparison table of the old and new versions for the developers to use. Before formal implementation, H and I applied the new color system to components in the design guidelines for all three platforms. This served as a template for our partners and reduced inconvenience for them.
05 Formal implementation Phase
During this period, we invited the entire design team to check the UI correctness of the applied versions. H and I continued to address various issues that arose with the new color application.
And finally, the New Color System was officially launched in mid-February 2024! 🎉
Difficulties and Challenges
Aside from the complex task of integrating three inconsistent color systems into one unified system, the optimization effort also spanned multiple departments, making communication and coordination a significant challenge.
During the development and application phase, we discovered that the previous use of colors had not been rigorous enough. Additionally, there were often discrepancies between the actual products and the design drafts. Therefore, during the application phase, the Color System still required many additional adjustments.
Furthermore, both H and I had existing responsibilities within our respective development teams. This meant that while promoting the New Color System, we had to balance our ongoing tasks. Consequently, the promotion process frequently needed to be paused.
Final Results
Despite encountering many difficulties during the process, we now have a unified Dcard color system.
We no longer need to change colors across three different color systems, and we can switch between Light and Dark modes with one click.
The design team saw major improvements after the implementation.
About two months after the new colors were launched, I conducted a satisfaction survey to assess the impact of this optimization. The results were as follows:
Greatly accelerated the production of design drafts, with a satisfaction rate of 100%
Automated switching between Dark and Light modes, with a satisfaction rate of 96.7%
Unified the colors across all three platforms, improving product consistency, with a success rate of 100%
→ The launch of the new color system had a significant impact on the entire design team, with an overall satisfaction rate of 100%.
Learning
This project was primarily driven from the bottom up, which often required competing for resources with other projects during the preparation process. Therefore, managing the timeline and coordinating resources were crucial.
In the future, for similar large-scale optimization projects, obtaining early recognition or support from higher management would likely make the promotion process smoother and more efficient.
Related