design Ops

Snorkel Design System

My company transitioned from a scrappy startup model with hybrid front-end designers and back-end developers to one with two scrum teams composed of product designers and full-stack developers.
Goal: Reduce bottlenecks and increase efficiency by allowing developers to easily reference a single source of front-end code for common UI components.
Problem:

Developers

  • Were creating multiple versions of the same component
  • Turned to product designers, formerly front-end designers, for front-end guidance and ticket implementation
  • Had to navigate a complex set of SASS┬ápartials and front-end code styleguides

Product Designers

  • Spent a significant amount of time pair-coding or completing front-end development tasks
  • Were not thinking globally and component-first when creating mockups
Approach: Work with developers to create a design system that allows developers to easily translate mockups to production code.
Final Product: Snorkel Design System
Time: 4 mos. (May 2019)
Role: Planning and facilitating workshops
Process:
1. Audit predefined list of components for V1 of the design system
  • Technical implementation: Refactor relevant code on the live publication sites. As part of the refactoring, we modified our SASS partials to represent the new component structures and modifiers using the BEM naming convention. I also implemented a scalable approach to our typography, one of the initial utilities we included in the system.
  • Sketch library: Create a Sketch UI component library for designers to share across the team. The new library ensured design consistency and negated the need to recreate the same components for each mockup.
  • Design system site: Implement a design system site for developers to reference. We initially spun up an MVP with Jekyll and Github pages, which we were already using for the design team site. After developers beta tested the system, we ran a third-party comparison and chose to host V1 on Zeroheight.
2. Implement the system
  • For each component, locate all website page templates that contain the component.
  • Group the component variations based on their usage.
  • Define language and usage guidelines for each component and its variations.
Impact: The design system made styles more global in scope, eliminating a lot of code from our codebase. It also created a cohesive, reusable set of design patterns to facilitate quicker product development.
Challenges: Our team members had never created a design system before. Creating Snorkel required many research hours and we learned and took inspiration from Shopify's Polaris, Salesforce's Lightning and IBM's Carbon to name a few. The coding and implementation in our codebase also proved time consuming and required strict QAs to ensure the widespread deletion of code was not negatively affecting the design of the site.