Nov 2019 - Feb 2020
SketchyMedical was planning on creating additional platforms for other curriculums, which needed a source of truth for style and brand. I took initiative and spearheaded the first company wide design system and pattern library to prepare for our growth.
No delay in planned content releases
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.
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.
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.
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.
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.
After suggesting 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.
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 embedded 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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, script annotation, and video production assets.