Design Systems

The building blocks for code consistency, better UI, and workflow.

A Design System is a library of core front-end components for a website: the HTML, CSS and Javascript behind content structures, layouts and typography. Design Systems create consistency with the user interface and experience, while also speeding up the design and development process. It begins with the basic building blocks of any web page (headings, paragraphs, form fields or buttons), also known as “atoms”. Those atoms are organized into larger components (“molecules”), such as shelf headers, complete forms, carousels, galleries and more. Then the molecules are assembled into page layouts – allowing for flexibility in the content structure while maintaining the consistency of all the components on the page.

Our Design Systems take our clients to the next level, by making site and prototype development part of a seamless, intuitive workflow.

Our team starts with a full inventory of the existing site templates. Each “atom” is collected and organized by type, then the “molecules” are collected and grouped by type as well. We use the inventory to discover how best to streamline processes that create an easier design experience for our client, and ultimately a better user experience for their customers and potential customers.

Next we create a code library of atoms, molecules, and pages. We then train the client’s teams how to use, maintain and build upon all of its parts and pieces. The result is a creatively vital, yet consistent, final product. At this point the client is ready to take over with their new library established and efficient workflow in place.

Our Design System solutions include:

  • Discovery: current process analysis, client site review
  • Inventory (gathering): establish the atoms and molecules used across multiple site engagements.
  • Inventory (scope): a list of the atoms and molecules needed, coding requirements for backend development
  • Framework development: create the markup library of atoms, molecules and pages used across multiple site engagements – to include Github, Sass (if applicable), markup and library hosting
  • Training and support

View our case study on building a universal Design System for Chico’s FAS.

Want to find out what a Design System can do for your organization?

Let’s Talk