Enhancing Design Review Efficiency with a Color Checker Plugin
Product
Binance
Role
Sole Product Designer, Developer
Timeline
Nov 2024
What I did
Product Design, Ideation, Product Thinking, Vibe Coding
Context
During my time at Binance, I realised design system (DS) designers were very packed on a day-to-day basis to design components for different product lines and update colour variables
Problem 😐
DS designers had to ship components and review each product's screens, but outdated color variables often blocked efficient workflows
So... what did I do?
Ideated and built a colour plugin for internal designers to quickly review across all product teams to improve review efficency
Product designer goals
A way to navigate to the wrong component seamlessly
Suggestions on what would fit the DS guidelines
DS designer goals
To save time on product reviews to focus on other tasks
Solution
Designed a plugin that checks whether all components in a frame, within a section fulfils the DS colour guidelines
Light/Dark modes
Users can check for light/dark modes as both modes are used in Binance products
Suggest colours that adhere to guidelines
Based on the closest RGB colour from the hex code, the plugin suggests colours from the DS
Navigating to the wrong component
Users can click "View" and they will be redirected to the wrong component for fuss-free changes
Impact
Reduced review time for 15 frames from 30 minutes to 20 minutes
Received feedback that the plugin was helpful in improving design reviews