Color System & Storybook

Companies at different stages need different levels of design system. My goal is to build a system that is minimal but flexible enough for a growing startup like Giloo.
Challenges
How to progress design system steadily and orderly under the condition of having serious legacy issues is the challenge
Role
• Product Designer
• Partner with one other designer, Tuna
Objective
Unify different sets of system using at each end into a same language to help reducing gaps
Overview
Outcomes
• A resilient version of design system that increases efficiency & quality
• Clear migrate plan to help Dev break down their work
BriefProcessGather InfoTry and ErrorAccessibilityMigrate PlanStorybookLearning
Brief
As company went through many designers and revisions, each end uses its own system with many differences, causing a lot of communication costs. How to start unifying into a same language? Take color system for example:
Design Process
1
Gather Info
Understand how the front-end team use color system
→
2
Try and Error
Compare with the system used by design and try to apply it to products
→
3
Consider Accessibility
Pay attention to color contrast for platform mainly based on dark theme like us
→
4
Plan for migration
Plan the process and clearly define use cases in Design Guideline
Gather Info
Understand how the frontend team use color system
Try and Error
Compare with the system used by design and try to apply it to products
Consider Accessibility : Color Contrast
Pay attention to color contrast especially for platform mainly based on dark theme
We as a designer have the obligation to make sure the product is as inclusive as possible. We distinguish between words for reading and words for decoration, and we made the rule that words for reading must meets WCAG standard.
Migrate Plan & Guideline
Plan the process and clearly define use cases in Design Guideline
The goal for guideline is for future maintenance, but besides that, I do a migrate plan to tell Dev what are changed and how can they apply the new one.
Brand Storybook : We(PM/UX/Dev) are all connected together!
Learning
Different from building a design system from scratch, this is an existing product. Creativity is not the key, and it is more important to find the balance between rules and flexibility. As a designer, we need to find the vocabulary that belong to this product.
Home
UporNext
copyright©2022 Jun-Yi, Lin.
All rights reserved
EmailLinkedinInstagram