Let's TalkLet's Talk
image

Chico's FAS

Role

Design System Engineer

Platforms

Deskotp and Mobile Web

Date

May 2019–February 2020

Technology

Sketch, React, Tailwind CSS, Oracle Commerce Cloud

image

Atomic design principles with inherited simplicity

I designed a simple but multi-layered design system using Sketch, React, and Tailwind CSS that allowed Chico's FAS to support three brands with a shared base for typography, colors, and components. Each brand had a unique set of colors and typeface choices, but inherited spacing, grids, and component styles from the shared base.

Chico's FAS Design System was built initially to support their White House Black Market brand, and I concepted a version of the system customized for Soma Intimates. After three months of development, this design system was used to create more than 700 website mockups outlining a complete e-commerce journey for White House Black Market customers. The mockups were used to develop a custom front-end on Oracle Commerce Cloud using Next.js and React.

  • Atomic Design Components
  • Sketch Component Library
  • Next.js, React, Tailwind CSS
  • Stakeholder Collaboration
  • Mockup Design Support and Engineering
WHBM (White House Black Market) Buttons and Cards
WHBM (White House Black Market) Buttons and Cards
WHBM Homepage Concept
WHBM Homepage Concept
WHBM Mobile Homepage
WHBM Mobile Homepage
WHBM Shopping Bag Concept
WHBM Shopping Bag Concept
WHBM Mobile Shopping Bag
WHBM Mobile Shopping Bag
WHBM Category Landing Page
WHBM Category Landing Page
WHBM Mobile Category Landing Page
WHBM Mobile Category Landing Page
WHBM Product Detail Page
WHBM Product Detail Page
WHBM Mobile Product Detail Page
WHBM Mobile Product Detail Page
WHBM Login Experience
WHBM Login Experience

Anima and Version Control

During this engagement at Object Edge, I began experimenting with new plugins for Sketch like Anima, which allowed designers to quickly assemble mockups and prototypes on a drag-and-drop stacked artboard. Anima allowed for precise alignment and spacing of components, making it easier to create consistent designs that could be adapted for Desktop and Mobile viewports. I also strictly versioned my Sketch files in Git and Zeplin, which enabled easy sharing of my output with engineers.

Brad Frost's Atomic Design

I built the Chico's Design System on Brad Frost's Atomic Design principles, which allowed for the creation of reusable components that could be easily adapted to different design contexts. This also allowed the swapping of typefaces, icon sets, and color palette, making it easier to create consistent designs across a variety of brands.