E-commerce Design System

Context

As part of the User Experience Design team at Home Improvement Co. I was the lead interaction designer on the project of creating a design system. Design system is important for several reasons:

  • Design system provides a unified language and a cohesive experience, independent of the channel or platform
  • Visual language provides designers and engineers with a very efficient modular system, increasing productivity and greatly reducing miscommunication and repetitive work
  • Centralized library enables better documentation and eventually becomes a learning tool
  • Publishing becomes more efficient, customized and streamlined

Research & Analysis

After the first audit of the elements, we have an initial list of components, giving us a good basis to start grouping similar components together and figure out what the similarities are between them. We can then group the components based on common characteristics, which will make it easier to spot inconsistencies and areas of improvement. We want to find solutions that can solve multiple problems at the same time.

Division technique is very well documented and described in one of my favourite books: Inside the Box, by Drew Boyd and Jacob Goldenberg.

Division helps you find creative solutions by narrowing, or constraining, your possible options.

Components

Foundational elements were named tokens, a term borrowed from Salesforce Lightning Design System. We could also have named them quarks or atoms if we wanted to stay closer to Atomic Design terminology, but decided to opt-out of the metaphor, since there was a strong feeling that it would add another layer of complexity and potential confusion.

 

 

Naming things systematically and consistently reduces the confusion in communication and helps us define limitations and boundaries of our closed system. We decided to use BEM (Block Element Modifier) methodology.

Components can have varying degrees of complexity, but in essence they adhere to same design principles.

Symbols and Libraries in Sketcha proprietary vector graphics editor for Apple's macOS, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010. provide a very efficient way to create and organize all our design elements. Symbols are flexible enough to handle quick changes and provide a solid structure for our components, while a central library enables consistency. Components can be logically mapped to Sketcha proprietary vector graphics editor for Apple's macOS, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010. pages and artboards, and templates provide an easy-to-use frame for new designs. Symbols are meant to be reusable, just like components, meaning that the design process would be up to 80% faster. That is big.

Being able to store our previews, work files and libraries in the cloud and comment on various parts of the system, provided us with a way to include all the teams in the design process at any point in time.

I started planning the update process, since it is essential to share the work on design system as early as possible.

One of the early flow explorations describing design system update process