Challenge
Process
Components
Results
Takeaways

Graphite Design System

Lead Product Designer - Nov 2019 - Feb 2020

Role

Sole designer and product manager

Team

1 Engineer

Impact

Stronger design culture and transparency

To create synchronicity across products and develop a universal design language, I kickstarted Sketchy's first, company-wide design system.

  • Pitched project to leadership to receive buy-in and Engineering effort
  • Switched design tool to Figma for faster cross-collaboration
  • Created roadmap and feature requirements for project

Challenge

Sketchy doesn't have a unified system for design and code

There was little to no documentation on CSS architecture, voice and tone, and pattern libraries, which meant that we were repeatedly creating things from scratch across the company. We needed a source of truth that would encourage synchronicity across the company.

  • Inconsistencies in UI across product suite
  • Different code structures from different engineers
  • Spending more time fixing inconsistencies
  • Variance in the way writers wrote their scripts
  • Marketing designs varied from branding of product design

Process

Centralized team-model

One team would be responsible with implementation, aggregation, and adoption. We planned to start with mandatory components, then add to the system on an ad hoc basis.

Switching to Figma

I was splitting my time between Sketch, InVision, and Abstract for prototyping and versioning and found it time-consuming to monitor 3 different tools. I made the switch to Figma as an all-in-one tool to not only support my workflow, but the structure of the design system.

Audit and roadmap

I took screenshots of elements from SketchyMedical, SketchyNursing, SketchyLaw, and SketchyUndergrad and created folders to categorize them. The audit showed concrete examples of where our developers created different instances of the same component, and where design could've been more unified.

Alongside a brief, I outlined the needs, stakeholders, feature list, requirements, and estimated timeline for the design system. We prioritized the MVP and broke the feature list into manageable chunks for our product roadmap, aiming to release around 3 months.

Defining the abstract

I created a survey that would collect existing beliefs on what our company mission and values were. I then uploaded their responses to SurveyMonkey, analyzed and presented the results to our co-founders so that we could finalize our thoughts.

I chose to collect handwritten responses about our company mission and values because it felt more brainstorm-like and participatory.

Naming conventions

After suggested a few architectures to our front-end engineers, we decided to move forward with BEM, "Block Element Modifier". We were most familiar with its framework and agreed it was the best choice because it offered modularity, legibility, and massive scope.

Documentation

While the design system was being built, I used Notion as the project's reference and handoff tool for content. It served as an easily accessible source of truth that rendered snippets of code and showed interactive examples of components.

Components and mockups lived in Figma to help engineers visualize the end product and further inspect CSS. I also familiarized myself with project management and created tickets in Jira detailing functional requirements for development hand-off.

I considered GitBook and Pattern Lab in initial conversations about hosting. We didn't have the manpower to set up Storybook in the time desired, so we decided to copy a repo and internally host the system as a proof of concept before migrating to Storybook.

Components

Typography

Since Nunito is engrained in all of Sketchy's products, we decided to keep it as our display typeface. I looked at other sans-serif fonts like Open Sans and Roboto to pair with Nunito, but found out that Nunito was a superfamily! Lo and behold, Nunito Sans was the perfect fit.

Color

I followed the WCAG 2.1 and used WebAim's Contrast Checker to measure contrast ratio of text against background colors. For our primary and secondary colors, the minimum contrast ratio is at least 4.5:1, following AA compliance level.

Atomic design components

Establishing foundations (color, typography, values) made it easier to create molecules because atoms were defined. Changes made to typography or color could then aggregate across all instances, making adjustments to the design system holistic.

Accessibility

I made sure that the contrast ratio between foreground (text) and background (fill) in buttons met AA compliance levels. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1, whereas level AAA requires a contrast ratio of at least 7:1. These ratios apply to normal text, which is defined as 14pt or about 18.66px.

Essentials

I designed the most needed components and made plans to add more to the library as proposals for patterns come up. Priority components included buttons, input fields, badges, labels, switchers and toggles. Check out the first iteration of the design system here.

Results

Measuring success

The MVP of the design system included the foundational elements of creating a design language, buttons, and accordions. Although we hadn't made too much headway on building out components, we received positive feedback from Marketing, Content, and Production.

  • More transparency across departments
  • Boosted team morale and company identity
  • Efforts to standardize practices in other teams

They were happy to have more transparency into the Design and Engineering team, which encouraged them to standardize their own processes for teammates, new and old.

Iterate by modifying, adding, and deprecating

Design System Governance Plan

Thank you to Brad Frost, Smashing Magazine, Figma, and VanillaJS

To prepare for the future, I outlined the rules for how we would modify, add, or deprecate patterns. I also described who would be responsible for approving changes, updating documentation, making the changes, and how changes would be deployed. This helped me think about how we would maintain the project as an ecosystem when we add contributors, or if our model of implementation changes.

Takeaways

Keep going, change is (very) incremental

For a very small company with 3 engineers, I was grateful to have had some Engineering effort allocated for the design system project. Until the Engineering team and bandwidth grows, I'll have to wait before all of the components can be coded. In the mean time, I have continued to implement the new system across product lines and organize the library in Figma.

Having courage takes you far

I took the initiative to advocate for a design system because I truly believed it would be an investment in Sketchy's future. At first I was daunted by the task, but taking the first few steps in creating the foundation made me realize how exciting it was to navigate ambiguity.

The example you make matters

After we created the first iteration of the design system, Content and Production used it as inspiration to build their own versions of "design systems". They then took it upon themselves to create guides for internal processes like writing and script annotation.