Building a Design System

Role:

Project Lead / UX Design / Front-End Development

Project Duration:

4 Months

Goals:

Create and define a scalable design across all platforms, to unify the visual web presence.

  • Scalable and modular architecture for CSS
  • Mobile-first responsive front-end framework
  • Well structured semantic HTML that is meaningful and easy to read
  • Custom utility class library that eliminates distraction for designer, developer, and content publishers

My Responsibilities:

  • Audited existing UI and code base
  • Defined critical user journeys (the designer, the developer, the marketer, and the customer)
  • Validated user journeys through Google analytics insights
  • Created custom UI kit with Sketch based on Bootstrap’s CSS framework
  • Divided stylesheets into modular and reusable Sass partials
  • Automated and enhanced workflows with Gulp.js
  • Standardized naming conventions for common interface language

Impact:

  • Enabled designers and developers within marketing to create, modify and iterate in a quick and cost efficient manner
  • Created cohesive theme extending across our digital ecosystems
  • Aligned on taxonomy
  • Increased design and development efficiencies and operational rigor
  • Well designed and performant user experiences
  • Extended branding and identity to all web platforms

Background

Adaptive Insights was up against a challenge that many design organizations face; the ability to scale in the face of rapid growth. In this case, Adaptive’s web experiences were getting pressure tested under marketing’s needs to serve growing demands of the business. Pain points were apparent across UX inconsistencies, increasing time spent on simple design updates, and a high dependency on external resources. The team was reactive versus proactive and didn’t know how to get out of this vicious cycle of chasing ongoing bug fixes.

Colors
Typography
Elements

Example of Design System Elements In Use

Landing page example using the design system

Code Examples


Code Example of Styles

Example of the Sass being structured to follow the Atomic Design Methodology


Code Example of Gulp.js

Example of some the Gulp tasks to handle error validation and asset optimization.