Component Library

A CASE STUDY OF

Design system components

Shridhar Reddy

Role: UI architecture

Requirement

A Design library

In his seminal book Atomic Design, web guru Brad Frost urges a new thinking among web designers - the demise of the web page and the birth of a design system. The latter, Brad argues, is critical in a world of multiplying devices. He strongly advocates for modularized chunks of design that can be chunked into re-usable chunks. His metaphor for these modules were atoms, molecules, organisms and templates.
At UNIQLO, we were in the process of a creating a new e-commerce site from the ground up. We had the luxury of thinking carefully about our future design needs.
I created a design system that was a highly curated collection of components that were completely modular and re-usable for desktop and mobile. These components were pixel perfect in Sketch and were richly annotated with creative direction for both developers and business users.
Below is a collection of some of the high-priority components that I worked on. See the assembled home page at page bottom.

Home page hero component

Hero component has multiple variants based on the page - home, gender or category page.

Single Media component
- 1/2 size

Single Media components feature an image (media) accompanied by text. The content may be of two types:

1. Product based
2. Feature based

Additionally, Single Media components come in various sizes and arrangements.
1. Full wide 1/1 - 100% of browser width  
2. Half size1/2 - - 50% of browser width
3. One fourth 1/4 size - 25% of browser width

Single Media can also be arranged in combinations with each other. For example: the 1/2 size can be combined with 2x 1/4 size media in a single row. See page bottom for examples.

Ranking component

The carousel component showcases products
(identical to the product grid) in a bi-directional scroll.

Section header component

Act as page dividers by separating modules of components on a page.

# Social collage component

The #Social collage collects user generated photographs into an image-first collection that may be displayed at various sizes. Based on their width, collages may be of these sizes: 1) Full width (1320) 2) 3/4 width (990) 3) 1/2 width (660) 4) 1/4th width (330)

Product grid component

This component displays the product information. Two sizes:
1. Single unit
2. Double unit showcasing front and back of a product with additional information

Image list component

An image list is typically used to highlight a content list. The content is mostly feature/editorial comprising two units - an image, and content in various arrangements. The defining feature of an image list is that the Image and Content sizes are equal units. This makes an image list a very modular unit that can be used interchangeably. An image list is always accompanied by an Image List header (separate component)
Component Building

Components coming together

Crafting a component is painstaking balancing act between the business requirement, the user interaction, the exacting pixel perfection and the technical complexity. But once the component is built and the specs are set, it is magical to see an entire page come together in just a few minutes.

Here you can see the home page assembled from components.

Next case study
...