CEMS Maintenance

Design system | Figma Library | file organization
Project Overview
CEMS, also known as Community Energy Management System, is an energy consultation service for large energy consumers that integrates devices such as smart meters, storage batteries, and solar panels to dispatch electricity in the community while allowing residents to track their electricity consumption. CEMS Maintenance is where NextDrive manages its clients' information and keeps track of every device's status.
What I did
I defined its design systems, such as layout specification, typography and iconography, and other components. I worked with a UX designer to establish a system that offered both consistency and flexibility.
Goal
Have an aesthetically pleasing design system that works with React MUI for future development.
My Role
Design system
BUILD figma library
Design Working flow
Duration
one month
Tool
Figma
SKETCH
Credits
Edward - UX Designer
Hailey - UX writer
Lynn - UI Designer
SF - Project manager
IMPACT
100%
components are connected and used.
161
published components.
Step 01 - Overview
What is this project about and why is this happening?
Since CEMS (Community Energy Management System) focuses on major electricity users, EPC, and green energy companies, CEMS Maintenance is created for company internal use to manage client's fields and devices, track device status and get device abnormal notifications.
Step 02 - Define & Design
Build design system from scratch
After the UX designer, Edward, finished creating wireframes based on project managers' needs, I created UI components that are being used in the wireframes and build a design system aligned with React MUI system in Figma.
2-1 Visual consistency
I organized all the variations so the UX designer can concentrate on the more foundational part of the design process, so he had more time to make sure the consistency of overall behavior. Moreover, most components in the design system are used as building blocks for more complex elements, which can also be used for further use.
(Due to privacy concerns, I only show a very simplified version of the components I created.)
2-2 Code consistency
The design system cannot stand alone if only designers are using it. It needs to be accompanied by an equally consistent code. After talking to our developers, we choose the React MUI system because not only does it grow out of Material Design, but it also provides more flexibility and customizability.
2-3 language consistency
Lastly, after managing all the necessary components in one place, I found that some elements were not as efficient as they needed to be. It turns out that even though both developers and designers had every component they needed, they would often not be able to find the item because the vocabulary is too different from one person to the other. I then make sure all the naming is the same throughout all design systems within the company. With the help of our UX writer, Hailey, the voice and tone throughout the product are consistent and empathetic.
(Due to privacy concerns, I only show one kind of component as an example.)
Step 03 - Reflect
Key Takeaways
Launching the minimum available components doesn’t mean the project or the product design process is over. On the contrary, iterating, testing, and designing should be an ongoing process. This collection of elements and components is not set in stone. It is simply an overview of available tools we consider necessary to start a product design process. I'm proud that my co-workers and I created a design system into something that is deeply integrated into the team's process and will continue to work rigorously to help it performs to the best of its abilities.