TrackFive Design System

TrackFive 2018-19

Role

UI Designer & Researcher

Tools Used

Sketch, Zeplin, Invision, Figma

Problem

Developing designs is inefficient and there are many inconsistencies across TrackFive's brands.

Summary

TrackFive has built 4 brands of job boards. With no existing guidelines for branding, the creation of a design system was necessary to increase efficiencies from a design and development perspective across the brands. In addition the guidelines improved the aesthetics and improved UI experiences throughout the sites as a whole.

Validation

There were 72 larger scale changes I made to create consistency between the brand's layout and structure. All of the basic elements, like color, iconography, and typography, need to be consolidated.

Visual Design

Atomic Design

I based TrackFive's design system on the atomic design methodology which creates an effective interface based with a series of stages that work together to create larger components.

Brand Colors

Each of the brands was given a color palette which was derived from the original colors used on the site. This ensured a more seamless transition.

In addition, the marketing team and I have started to slowly experimenting with implementing a more contrasting accent color.

Components

More complex components can be altered to fit the particular brand with color or certain styling changes.

The creation of a design system has increased efficiencies with front-end development and design among the product and marketing teams. In addition, all feedback from TrackFive's users has been positive and there was little friction with the launch of the UI changes.

The design system is an iterative system, and is constantly being updated or improved.