The challenge
The solution
Figma design system
Re-designed platform
Why are we building this?
Researching design systems
Guiding decisions
How do we do this right?
Defining the principles
Understanding the users
Building the system
Creating lasting change
Ideation and feedback
System documentation
Results

The before and after

My challenge for this project was to create a design system to streamline Electriphi's design and development processes. I assumed that the biggest challenge would be redesigning their current products with the new design system but, I found that establishing better communication of new designs to the development team was the biggest problem to solve.

Company

Electriphi
May 2020 - September 2020

My hats

UX Design
Design documentation

Tools/Methods

Figma
Atomic design
ZeroHeight

Overview

The challenge

How can we improve the communication of design requirements for new features and design consistency across products?

The solution

Figma Design System

Re-designed Platform

Process

Why are we building this?

What's in a design system?

This being my first time creating a design system, I undertook significant research in order to understand...

01. Principles of good design systems

02. How to create a unique visual identity

03. How to build and document the system

04. How to create flexible and reusable components

05. How to effectively communicate design requirements to the dev team

I also conducted a design audit of the current products which revealed a myriad of design inconsistencies such as the use of color, spacing, and typography.

Creating my plan for the new system and designs

01. Build out the system in Figma because of its well designed collaboration tools

02. Create the system with heavy input from the development team to understand what they need

03. Use the principles of atomic design to define scalable component structures that are easy to use and modify

04. Create a centralized source of truth containing the most up to date documentation

05. Release the design system in a phased approach to ensure an effective transition

How do we do this right?

The design principles I defined

01. Consistency

All elements and interactions across Electriphi products should have a consistent and predictable look and feel. 

02. Inclusion

Electriphi products should accommodate and empower all potential users.

03. Purpose

All of the features and interactions within Electriphi products should be created with clearly defined purposes, intentionality, and precision in order to provide users with the best possible product.

04. The whole

The sum of all of the features, design principles, guidelines, components, and styling should be ultimately geared toward creating an unbeatable, innovative product that delivers the best possible user experience.  

What are the capabilities and constraints of the dev component libraries?

Understanding the needs of the development team

With one of the primary goals of the system being to improve the communication of new design features to the development team, I spent a lot of time understanding what tools the development team used to build out UI elements and widgets and the capabilities/constraints of the systems they were using.

I used atomic design principles to build the system

After gaining insights from the main stakeholders, I iteratively built out all of the theme elements (color guide and type standards) and design components from scratch while making improvements to the current UI component designs.

One of the most difficult parts of building out the system was understanding how to creatively combine auto layout, responsive capabilities, and different layers to create atomic components that could be easily manipulated, resized, and edited without requiring much effort. In addition to building the design system, another challenge was understanding how to redesign many of the current complex components (such as energy charts) to make them more understandable and usable.

Creating lasting change

How can we align the design and development teams earlier in the process?

I held structured ideation and feedback sessions

One of the biggest pain points with Electriphi's processes was that there was no streamlined way for new ideas to be communicated and heard early in the design/development process. This led to many great ideas being left unincorporated, extraneous design decisions being made during the development process, and miscommunications about implementation feasibility.

I began amending this process during the creation of the design system by holding idea sharing and feedback sessions where PM's, engineers, and other stakeholders could see the work in progress, share any feedback they had, and discuss any ideas to improve products or specific features.

The sessions I held increased the team's creative output and improved their delivery times

This process was incredibly successful as more team members felt heard and were able to share their ideas for new features in an appropriate way. People felt more excited about the new designs and were able to vet feasibility earlier in the process. This resulted in significant improvements being made to the redesigned products.

A single source of truth

To create an easy system for communicating design requirements to the development team, I created an online design documentation website using Zeroheight. By carefully structuring the component layers in Figma, adding sufficient detail to the component descriptions, and creating design tokens, I put together a well documented library that developers found easy to use to interpret the designs.

Establishing documentation processes resulted in implementations that more accurately represented the designs

This directly resulted in higher quality designs being deployed and a smaller divide between the design created and the product developed.

In addition, I added written documentation in the design system itself outlining how different components were created and are to be utilized. The result of this was that more people in the company felt comfortable using the design tools to externalize their thoughts into a presentable form and even create new screens or features themselves.

Results

Improved product designs

Using the design system has helped to increase the consistency within and between different products.

Better communication

With regularly scheduled ideation and feedback sessions, the full team is now more involved and and invested in the designs of new features and products. Issues surrounding feasibility are also addressed earlier in the process.

Faster design and development

With the design system being used as a single source of truth, less time is being spent on creating reused components and communicating the designs through long meetings.

Empowered employees

More individuals feel confident and compelled to participate in the design processes and even use the tools themselves to visualize their ideas.

Conclusion

Reflecting on the project

This project gave me valuable experience learning about how design systems are both structured and implemented with regards to the design of the actual components, the importance of well crafted documentation, and establishing organizational design processes. In addition, designing a system that was also usable for people in non-design roles made me more empathetic towards the needs of different internal stakeholders. It showed me that when given the proper tools and guidance, anyone can create valuable designs.

Back to projects