CINNOX: Design System Refresh

Context

This was a review and update of the design system. With the expanded scale of the team and the iteration of the product, the design elements will also need to be refreshed and maintained through systematic management.

My Role

Led and collaborated with 3 design team members on the project.

Review & Plan

The old design system was in Sketch, which was not convenient to maintain and collaborate within the team and with developers. Therefore, we migrated the system from Sketch to Figma and updated the management methods.

After reviewing the existing library and patterns, we defined 3 key points that were important in the design system.

1. Scalable

By establishing clear rules for creating, deleting, and updating components, we aimed to make it easy to incorporate new elements into the system as needed.

2. Modular

The atom components within the library can be combined to create composite components, enabling flexibility and customization to fulfill various scenarios and use cases.

3. Easy to Navigate

Clear and consistent naming conventions for layers and components make it easy to search and use them effectively within the library.

Operation & Management

Based on the key points above, the design system can be easily maintained over time, even during personnel transitions. It's essential to keep rules and processes simple to avoid unnecessary confusion or errors.

Library

It's convenient to edit components independently by dividing website and mobile files.

However, consensus naming rules are required to ensure frictionlessly execution.

General Page

General page was the document built for the UI, which included frequently used (mostly main) pages in design files.

For design efficiency and alignment, general pages were updated regularly after every version release for team members to use in the new sprint.

The end was the beginning

This was a major project that I was in CINNOX early. The project honed my skills in reviewing the entire picture at a high level, building a structure that fits from the present to the future, distributing work to teammates, and planning the schedule. By leading workshops and holding alignment meetings, I also learned how to effectively propose ideas to coworkers and drive the project forward. This project was significant in my personal growth and served as a essential infrastructure for the team.

Additionally, completion wasn't the end of the project. We continued iterating and updating the files constantly to optimize the design process and make it more efficient.

Due to confidential restriction, please contact for more details.

Website design and content
© 2024 Chad Liao