Building a Design System

Diagnosis of the challenges across Adaptive Insights web properties and the creation of a new scalable design system.

Adaptive Planning


Project Lead / UX Design / Front-End Development

Project Duration:

4 Months


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


  • 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


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

Get Your FREE Website Audit Today!

We'd love to learn more about your business goals, and challenges.

Contact us for free website audit and consultation.