Color System Reverse - With Figma variables

Highlight

• Collaborated with two Product Designer (Peggy & Lian) to drive a revamp of the Color System, addressing issues such as "inconsistent color codes across three platforms," "insufficient color gradients and unclear color token definitions," and "mixed usage of color tokens."
• Integrated three separate Color Systems into one.
• Aligned color tokens with the latest Figma variables features.
• Responsible for restructuring of Dcard Color, inventorying the color palette, formulating token naming conventions, and applying it to Light and Dark mode UI testing.
• Applied the defined color palette to existing product pages and proactively assisted other BU teams with testing.

Project Member

• Developer x4, Product Designer x3

Project Background

• Lack of unified color codes across platforms: Inconsistencies among the three platforms lead to inability for shared use, prolonged design production timelines, inability to share between engineering and design sides, and elongated QA periods.
• Inconsistencies between some live products and design drafts regarding colors: Significant QA time is required to rectify this.
• Similarity among some color codes: Some color codes are too similar and can be consolidated, while certain library color codes remain unused.
• Insufficient color gradients and undefined definitions: This may result in design constraints or exceptional cases, such as inconsistencies in app platform visual experiences due to differences in iOS/Android colors.

My Job

• Assisting Lian and Peggy in restructuring the Dcard Color, including inventorying the Web color palette and drafting the initial Token naming conventions.
• Defining the Dcard Color palette, encompassing Branding, State, Gender, etc., and applying it to Light mode and Dark mode UI testing.
• Applying the defined color palette to existing product pages and proactively assisting EC partners in testing the interface of the Good Stuff Lab.
• Continuously optimizing Design Tokens and serving as a reviewer within the team.

Project Process

1. Create project proposals and present to supervisors and cross-team stakeholders.

2. Take inventory of legacy color palettes across all platforms, including iOS, Android, and Web.
3. Conduct cross-team discussions on color naming conventions and reach consensus.
4. Integrate existing team requirements with design team research resources.
5. Create foundational color palettes (Palette) and initial version Tokens.


6. Begin applying existing screen tests and continuously optimize Tokens in sync.

7. Finalize the first version of Tokens and discuss with cross-team engineers.
8. Discuss timelines with engineering team owners to align cross-platform release dates.

9. Creating a comparison table of old and new colors, providing separate versions for iOS, Android, and Web engineers.

10. Continuously gather and address development issues encountered.
11. Invite the design team to conduct UI QA testing together.

12. Complete testing and deploy updates to production.

Impact of the Project

• Integration of the previous three Color Systems into one, eliminating the need for designers to switch colors three times when drafting.

• Coordination with the latest Figma feature updates color palettes, making it easier to switch to Dark mode by simply dragging the canvas without manually changing individual components' color.

• Inventorying numerous undefined color palettes in the code and collaborating with engineers to replace them with new ones.
• Clearing up the previously ambiguous color palette specifications to provide a more structured approach to component color schemes.

🙇🏻‍♀️ Thanks For Watching！

Back to All Projects