Background - Rebrand

To mark the milestone of JustFab’s 10 years, the company had the biggest brand revamps. From creating a new brand identity, new personas, new Logo, to changing the fonts, styling, and foundational enhancements on the site, multiple teams including marketing, creative, merchandise, product, engineering teams collaborated.
As a core designer on the team, I led the sitewide rebranding on this global project for approximately 6months.

-

Design System

With the rebrand, it was a perfect chance to clean up the styling on the site.
JustFab's website had 14 different font types and over 30 different colors on the site with the history of multiple designers with different personal styles handling it. The development team had been troubled from working on styling without a central guideline.

The purpose of the design systems is to make sure the design of the site becomes consistently designed by any designer as well as allowing developers to create component libraries with a guideline.

This Design System is also published on Figma as a library of shared styles, symbols, and components that can be used by designers from other teams (including UX designers, graphic designers, and digital designers.

Site Audit

I audited the site and defined the high level of elements we need in the Design System. Categories are laid out like the following.

-

Colors

Based on the color palettes the creative team defined for the new brand identity, I extended a set of colors that meat ADA compliant as well as meet the needs of different web functionalities.

-

Typography

In order to efficiently clean up the old fonts and apply the newly acquired fonts, the typography part on the design system along with the font update matching guide are a handful for QA, engineers, and all digital designers to refer to.

-

CTAs

Here is an example of each standard button used throughout the JustFab website.
The application for each button is outlined below.

-

Spacing & Layout

-

Full Design System