A Design System for Uniqlo
A CASE STUDY OF
Designing a library of components, from atoms to organisms
Shridhar Reddy
Role: UI architecture
Role: UI architecture
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.
The basic building blocks of any design system. We started with a 375 px grid for a smartphone, with 12 columns, based on a 15px cadence vertically and horizontally.
Typography was mostly decided for us. Uniqlo had their own custom typeface - UQ Pro. We paired this with a DIN to provide contrast for the more workmanlike portions of the site.
Similarly for colors, we picked various shades of grey to provide backgrounds.
Combining our typography and spacing choices, we started by creating CTAs with space padding built in. Similarly, all icons were crafted as symbols with spacing already built in. We turned off the visibility of the padding specs when using the symbols.
This is where the rubber meets the road. With an extensive library of smaller elements, we built individual modules - carousels, lists, etc. And stacking these smaller UI pieces into combinations gave us a refined understanding of how the pages would shape up.
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.