Chico’s FAS: Universal Design System

Chico’s FAS, Inc. owns three brands geared toward fashion-savvy women 30 years and older: Chico’s, White House Black Market and Soma, each with a distinct online presence. It operates 1,518 boutiques and outlets in the United States and Canada for the brands – all specialty retailers of private-label women’s apparel, accessories and related products.

The Challenge

Create a universal library to be used for each of Chico's FAS brand websites, to create consistency not only in the markup, but also the user experience.

The Solution

Audit Chico's FAS brand websites for all common elements, and develop a new, universal markup library while also focusing on responsive layouts and workflow.

The Outcome

An atomic library that is used by all team members for each brand (design and development) to create rapid prototypes and faster implementation with improved workflow.

Chico’s FAS sells style, which it demonstrates throughout its sales channels. As Chico’s embarked on updating its brands’ websites, the company contracted us to help architect the process.

Chico’s web design process involved a traditional workflow: wireframes were created, then designers created new comps in Photoshop from scratch. Those comps were delivered to front-end developers to create the markup, then front-end code was delivered to developers to implement. They wanted to streamline this process and bring more consistency to the layouts they created.

Chico’s also wanted responsive web pages. Each brand had three different versions of their site – desktop, tablet and mobile – all with unique markup. Some content was not optimized for mobile or tablet, so it wasn’t delivered on those devices.

After our initial audit of each brands’ website templates and interviews with key team members, we pitched a universal design system that provided all members of the Chico’s FAS design and development teams with an atomic library and a new built-in workflow.

Our first step was to take a full inventory for each brand site. We collected each “atom” from each template (headings, paragraphs, buttons, form elements, and so on) and organized them by type.

Next, we collected the “molecules” – combinations of atoms for the most common components across the site. Those, too, were organized by type. We then organized similar components into concise groups to eliminate any deviation.

We designed a low-fidelity, multi-level architecture allowing for brand-specific styling to be applied.

Once our inventory was finalized, we wrote the production-ready markup, CSS and Javascript to create the atoms, molecules and pages.

This library was designed to be extensible. First, it offers the ability to construct pages with any mix of molecules into a unique layout via rapid prototyping and production. Next, we outlined a path for creating new molecules as needed (from the existing atoms, to maintain style guide consistency).

We collaborated with the dev, design and business teams at Chico's to provide guidance on best practices related to front-end development during the design process.

Our Design System reduced the cumbersome web design workflow. As a result, designers can quickly create fully responsive prototypes and share with decision makers and ultimately their development partners. This has enabled a much more collaborative environment for designers and development to work together to gain efficiencies and increased speed to market.

Results of the new and improved workflow

What once took hours can now be completed in minutes, and with the new workflow, designers are actually passing off production-ready code to the dev team.

Chico’s created a video to correspond with their site launch using the new framework and to show existing customers what the new site was all about. Check it out here:

Praise for Chico’s Design System

By moving to a flexible and responsive framework we have become more mobile optimized as all of our content now flows across all devices. The atomic library allows the teams to create consistent and unique layouts while reducing rounds of revisions and gaining speed to market.