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

App Store↗
google play↗
2022 iF Design award↗

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.

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.

👨🏽

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.

👩🏻

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.

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.