I was one of two designers who contributed to this project in Q4-Q2 2021-2022. My focus was to manage and flesh out a design system that housed all of Plume's components, styles and templates across their products into a library we could pull from to create larger design elements for their website and app.
I started off working on this project with another designer; later on, I took on the project by myself. I reported to the creative director at Graveflex, as well as Graveflex Engineering, QA and Product Management teams and Plume’s Product Ops team.
Project Overview
When we began working with Plume on this project, they showed us they had a vast library of UI elements. This library lacked cohesion to their three products—HomePass, WorkPass, Plume Corporate, OpenSync and Plume's B2B website. Because we were soon going to be managing the design of their website and app, we wanted to make the UI elements easily implemented and cohesive, so we could reuse components while also making new additions in line with the style guide along the way.
Goals
Our design goal was to make Plume's UI elements fit into a style guide we could pull from whenever creating design deliverables, both for cohesiveness and to improve ease of implementation for engineering and QA.
Design Process
Defining The Style Guide
In order to refine Plume's design system, we’d need to agree on a style guide. First we audited the font styling, icons and colors—to name a few—that were being used across all Plume’s products.
For instance, for each Heading style for the HomePass site, there was an equivalent of different styling for the other product websites. The same for buttons: For each OpenSync style CTA button, there was an equal for the other product websites—and so on for every UI component.
We then determined we would need a sizing system specific to desktop, tablet and mobile size requirements. This included page margins, content widths, content margins and more. After analyzing best practices for viewport sizing, we met with developers to share our findings.
Fitting It Together
Once we completed our audit, we took the Figma designs Plume originally presented to us and began implementing our design system.
For each section of the webpage and for each product website, we made new Figma designs that only used components from our style guide and component library. This improved cohesion when it came to font styling, content spacing, UI elements and more.
Below is an example of the webpage sections—or "blocks" as we called them—that we used and reused across Plume's products. On the lefthand side is an example of one of the products (HomePass, for instance), and on the righthand side is the same block but restyled to suite the appropriate product styling (Plume's B2B site).
Putting It To The Test
Once we had our initial library established, we could start creating new designs and add them to the existing library. All new designs for desktop and mobile were added to our design library so they could be repurposed for all of Plume's digital products.
Results
The creation of this design system was an essential step in making our designs coherent, reusable and easy to implement for our engineers and test for QA. As Plume began to scale as a company and introduced new digital products, we were able to make a library they could pull designs from so their websites and webpages felt more orderly. Our engineers were pleased to work with a design system that made sense, and we as designers felt less frenzied when we were asked to make a new design for Plume.
