Ecogenie+

Mobile app Design system | Figma library | file organization
Project Overview
When I first joined the team at NextDrive, they were changing design software from Sketch to Figma. I help transfer UI components and rebuild a design system for the app - Ecogenie+. During this project, I found out there should have improvements in the current workflow with other departments. Thus, I also collaborate with project managers to find a way that best uses this design system to achieve better efficiency with developers and QA.
What I did
I defined current UI components to fit in Figma's structure, including components with variants and auto-layout, page layout specification, color naming, and changing rules, and restore any missing components. I also took a step further to make our design system benefit not only the design team but other departments. After the design system has nearly completed, I then host a meeting to present how to use this design system for other departments.
My Role
Design system
BUILD figma library
Design Working flow
Duration
APRIL 2021 ~ PRESENT
Tool
Figma
SKETCH
credits
design lead - mei
UI designer - amy
project manager - scott
rd - kash, qoo, arrny, ming, ares
view the project
IMPACT
100%
colors are connected and used.
281
published components
6
other projects' design systems were built after this design system is created.
Step 01 - Clarify
Things that need to be defined
I first looked into how current designers are using components to create UI flow. Then, I identified the areas and missing definitions that could be improved:

1. Components were not named or grouped properly.
2. Some colors weren't being used.
3. Components and layout spec are missing.
4. UI flow and frames are created in different software.
Step 02 - Organize
Reorganize current components
After the problems of current components are clarified, I started building the design system on Figma. Inspired by Material Design, Carbon Design systems and other design systems in Figma community, I defined our own language and structure for our design system. I also listened to feedback from developers on how the current color palette could be renamed and removed unused.
2-1 - the foundation: typography, color palette & iconography
Typography and color are critical visual elements of branding to me. Surprisingly, there are lots of colors that are not being used and named properly because of redesign features. To clarify used colors, I worked with several app developers to define what colors weren't been used and find a naming rule that best worked for both iOS and Android systems.
2-2 - define states for each components
After the styles are defined, I dived into creating components with different states. Some components have different states and appearances on iOS and Android, such as opacity and shadow. Therefore, I documented each state for app developers and QA engineers to check it out if needed. (The examples below are different states for buttons)
2-3 - create Variants
Design systems are always growing and I've only created components that have been used up to this point. To make components even easier to use, I grouped them with variants and make sure properties are named clear enough. Having the same type of components grouped by variants allow future designers to expand based on it.
Step 03 - Execution
workflow iteration
Since the primary users for the design specs are the developers, I worked with the product manager, Scott, to observe how designers and developers translate the design system and their workflow. One of the biggest pain points for them was that developers view UI spec on Zeplin and view UI flows on pdf, which takes designers A LOT of time to upload art boards on Zeplin, and then create UI flows in Adobe illustrator. Another pain point was that developers were hard to know which page is the final design if there are only small iterations on UI flows.
Workflow in the past
👨🏽
qa engineers
1. View the UI flow on Drive and UI spec on Zeplin to write test case.
2. If there are any iterations, they will need new files send by designers to refine their test case.
🧑
app developers
1. Go to Zeplin to check for paddings, typography and color index numbers.
2. View the pdf to see how pages were connected.
3. If there are any iterations,  request new design and flows.
👩🏻
Designers
1. Design on artboards in Sketch.
2. Upload artboards to Zeplin.
3. Create UI flows in illustrator and export them in pdf to Google Drive.
4. If there are any iterations, repeat the steps above and inform developers and QA engineers and send the new files.
Step 04 - Communicating
Building new workflow
A design system is effective only if the people who are working on the product adopt it. So, we launched several meetings to share how this design system applies to the design team, how it might change the workflow with other departments, and received feedback to refine workflow.
Current Workflow
👩🏻
future Designers / other coworkers
1. View flows to see current features.
2. View guidelines and documents to learn how each frames were built.
3. Learn how the product works when onboarding.
👨🏽
qa engineers
1. View UI spec and flows on Figma to write test case.
2. If there are any iterations, they will be told by designers to refine their test case with the same link.
🧑
app developers
1. View paddings, typography, color index numbers and flows all in the same file.
2. If there are any iterations, view them in the same file with the same link.
👩🏻
Designers
1. Design frames, flows in Figma.
2. If there are any iterations, refine in the same file and inform developers and QA engineers during daily meetings.
Single software makes work life easier
After receiving feedbacks from the meetings, we all agreed that using one software allows people to look at same file without any delay or missing links.
reflect
Overall, I learned the value of a design system by needing one, not having one, or creating one because other companies do it too. I also discovered that what I initially thought this project would be was a UI Kit rather than a REAL design system. I'm glad that I can work with project managers and be supported by my manager to further refine the workflow to apply this design system. However, the work of expanding the design system was not over. The next stages called for close collaboration with designers to standardize and implement the company's branding, icons, and elements for the creation of new patterns. This project is still a work in progress as the product evolves, but that's how it's supposed to be.