Fair Trade Design Systems

Designing, managing, & evolving design systems.

 

Overview

Fair Trade is a 20-year-old organization with a 5-year-old tech team that builds and manages custom web applications. In order to support an ambitious roadmap, a foundational design system had been created to launch the tech team’s initiatives.

My Role

Upon joining the tech team, I began product managing, designing, and eventually coding the design system. I helped evolve the component library online and in Sketch, created the email templates, help center style and content, and a writing guide. My goal was to create systems that were centralized, scalable, and easy to use by folks inside and outside the tech team.

Solution

 

Website

In order to support design and engineering efforts, I worked to centralize all design materials into one place. The design system website became the source of truth for both the marketing assets as well as product development assets.

Design System Landing Alt 1.png

Sketch

Shortly after joining the team, I realized there was no single file that contained all our design elements. I quickly created a style guide library in Sketch that the tech team could use as a standard for its most common components.

Design System 12x.png

Emails & Help Center

In addition to the website and Sketch library, I created the template for all email communications sent to users and designed and populated content for the Help Center to support the launch of the first Fair Trade application to business partners.

Transactional Email Alt2x.png

Research

 

I drew a lot of inspiration from existing and well establish design systems to help understand best practices and ways to evolve the Fair Trade design system.

Atlassian-Design-System.png

Atlassian Design System

For a mix of product and brand

Bootstrap-·-The-most-popular-HTML-CSS-and-JS-library-in-the-world-.png

Bootstrap

Our foundational design system

Carbon-Design-System.png

Carbon Design System

For amazing documentation

Homepage-Material-Design.png

Material Design

For being mobile-focused

Lightning-Design-System.png

Lightning Design System

For data-heavy applications

Shopify-Polaris.png

Polaris

For strong UX writing

USWDS-The-United-States-Web-Design-System.png

U.S. Web Design System

For leadership in accessibility

Exploration

 

New Components

New components and patterns were created only when the products I was working on had use cases that couldn’t be solved with existing ones. When this happened during the course of product development, I would usually follow these steps to arrive at the best solution:

  1. Research existing UI patterns

  2. Create several iterations and options using Fair Trade styles and gather feedback from the product team

  3. Check-in with engineering on feasibility and adapt if needed

  4. Create the final component and add it to the Sketch library as a symbol and add to the team backlog to bring the component code into the design system website after it was built

Component Iteration.png
 

Sketch Library

Through a lot of painstaking trial and error, I taught myself how to create and work with symbols within a Sketch library to allow the design team to work quickly and efficiently.

Sketch Symbols.png

Outcome

 

Next Steps

The Fair Trade USA design system is constantly evolving. From a high level, the roadmap I had laid out was to continue to increase its utility to the tech team and organization at large. This included:

  • Incorporating the UX writing guide I had made into each component page

  • Consolidate and streamline symbols in Sketch library to reduce redundency

  • Creating a regular release cadence and process for updating apps that used the design system