Design System

A sustainable design standard and cohesion across teams and platforms

Date
Project Type
Skills

Dec. 2022 - Present
Team Work
Interviews, Usability testing, Prototyping

Overview

As the key designer responsible for the Design System project, I worked with 4 designers to create the components and guidence from 0-1. With limited source and weekly design requirements, we made reasonable plans and effective task allocation to ensure that every designer involved can complete a part of the design system in a period.

It is a project driven by the design team.  I actively reached out and collected voices from other teams, development teams, market teams, and end users.

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

Problem

01

EnergySage has three products, including Roof Solar Marketplace, Community Solar Marketplace and Heat Pump Marketplace. Although there are product connections between each platform, their design connections are fragmented.

02

As teams grow, if there is no systematic way to guide different teams to work in one direction, more people join will make this gap become the Mariana Trench.

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

What

This system aims to create a systemic approach and guardrails to help design teams and develop teams utilize components to improve efficiency and maintain continuity and consistency, so that developers can focus on logic and designers can focus on flows and user experience.

Guideline
Tool
Usage
Component
Sytemic
guardrails
For both designers and engineers
Appropriate tips and scenairos
Open and
scalable
Pattern
Layout
Data Form
Data Feedbak
Repeatable
UX Pattern
Elegent
Layout
Redesingned
Forms
Uniformed
Notifications

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

challenges

Designers

When I joined the team, there were only 3 designers. Later the team grew. Due to a lack of reasonable constraints, the output of each designer is different. Designers have been struggling with standardized UX and UI designs.

Engineers

There is no effective communication among different front-end engineer teams. Actually, the code of components can be reused and maintained to save time.

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

Process

Color Style

Typography

Spacing Rules

Icons

Grid

Components

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

Before & After

___________________________________________________________________________________________________________________________________________________________________________________________________________________________

Conclusion

_________

"Great things in business are never done by one person, they're done by a team of people."

Steve Jobs

_________

This is a monumental and challenging task, and we only have 4 UX designers. This is the first version of an entirely new system, but it has laid a sustainable design language. Design and code are shared.

The development team, especially the front-end engineer team, said they can't wait to use it. Designers can also focus more on product and user experience than adjusting colors and sizes on visual elements. .

___________________________________________________________________________________________________________________________________________________________________________________________________________________________