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 components, styles and templates into a cohesive system that could be reused and added to with ease. I started off as a pair 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 Graveflex started working with Plume, they showed us that they had a vast library of design components and UI elements. Since they were broadening their horizon into several products, it meant that they were wanting to create new websites and webpages. We wanted to make these easily implemented and cohesive, meaning we could reuse certain components while also making the new additions in line with the style guide established.
I started out working as one of two designers, then I became the leading designer on this project. I worked on this project throughout multiple design sprints.
Goals
As we took on Plume as a Graveflex client, they came to us with a library full of pieces of design work that was difficult to navigate. It also felt very dissonant. Our goal at Graveflex was to make these designs work together better, both for design cohesiveness and to make work easier for engineering and QA teams. Our design system would later come to include a design library, in which we started using “blocks” of a website or webpage to repurpose for multiple uses across Plume’s different products—HomePass, WorkPass, their corporate site, OpenSync and Plume B2B.
Design Process
Defining The Style Guide
In order to create a cohesive design system, we’d need to agree on a style guide. We first needed to do an audit on what fonts, font sizes (headings, paragraphs, eyebrow texts, CTAs), design components, icons, colors—to name a few—that were being used across all Plume’s websites. For each Heading 2 for the HomePass site, there was an equivalent of a different font style but same font size and line height for the other websites both for desktop and mobile sizes. The same for buttons: for each OpenSync style CTA button, there was an equal for the other websites that used the respective colors determined by branding.
We then determined we would need a sizing system specific to desktop, tablet and mobile sizing requirements since we would be using this design system to design websites and webpages. This included page margins, content widths, content margins and more. After analyzing best practices for viewport sizing, we met with developers to explain our findings.
Fitting It Together
Once we completed our audit, we took the designs that Plume came to us with and started implementing our design system to make more cohesive, reusable website blocks. For each desktop block, there was a responsive tablet and mobile equivalent.
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 the different Plume websites.
Results
The creation of this design system was an essential step in making our designs coherent, reusable and easy to implement for our engineers. As Plume began to scale as a company, we were able to make a library they could pull designs from so that their websites and webpages felt more cohesive. 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.
