Roles:

  • UI/UX Design Lead
  • Sr UX Designer
  • (Lead) UX Architect

Duties:

  • Research of design patterns
  • Visual design of components
  • Interaction design of components
  • Information architecture of library
  • Documentation of guidelines
  • CSS architecture

Companies:

  • National Seminars Training
  • Cox Automotive (various business units)

Duration:

Aug 2012—Present

Platforms:

Web, Native Mobile, Hybrid

This is a collection of work showcasing my involvement in design systems at various capacities for various products and organizations. It is not an in-depth analysis, but a brief overview of my experience and contributions since 2012.

Practical Work

Over the years, I've worked on a multiple design systems at various companies with multiple teams. This includes the visual design of components, the development of components in HTML and modular CSS, and the distribution of components to other teams via Sketch, and more recently, Figma.


CSS-Based Design System

Duration:

  • 2012–2015

Organization:

  • National Seminars

This was an in-house effort to wrangle in our CSS and UI using modular design princples. Based heavily on OOCSS and SMACSS, this my first real exposure to design systems, albeit from a front-end development angle. The main problem we were trying to solve was not only consistency of UI components, but to expedite development in a legacy system.


Screenshot of CSS repo for National Seminars broken up into modules


Tracksuit Design System

Duration:

  • 2017–2018

Organization:

  • Dealer.com

Tracksuit was a design system created to support dealer-facing products. I was one of many contributors during its lifespan, but with the specific focus of applying a mobile lens to the included components and design patterns. The effort was intended to provide guidance to both (responsive) web and native mobile.


Tracksuite components sticker sheet


nSemble Design System

Duration:

  • 2018–2020

Organization:

  • Dealer.com, Cox Automotive Data Services (CADS)

nSemble, like Tracksuit before it, was a design system created to support dealer-facing products. I was one of its primary contributors, tasked again with the specific focus of applying mobile recommendations to components and design patterns. This effort was intentionally scoped to responsive web, but still pulling cues and best practices from native mobile.


Screenshot of nSemble documentation site


Common Experience - Mobile Kit

Common Experience, or “CX,” was the next evolution of its predecessor Tracksuit. Like other before it, it was created to support dealer-facing products, but with a wider reach across the organization.

My role was more of that of an adoptor, but with the task of refining and enhancing the components to fit native mobile, tablet apps in particular. Here, our team created an internal UI kit to act as an extension to the main design system project.


Duration:

  • 2020–2023

Organization:

  • Xtime (Fixed Ops)
Screenshot of Common Experience documentation site

Written Work

Modular CSS

Just a sampling of some of my previous writing from the perspective of CSS — what I believe has been the cornerstone of my journey into design systems.

I've also given internal presentations on using Modular CSS for more effecient front-end design (see slide deck).




Design Pattern Research

For design systems I was involved with as a contributor, beyond designing components, I also performed research on design patterns and provided written analysis on my findings.

Advisory Work

Interstate Design System - Mobile Guidelines

Most recently, I was tapped for the governance team for the internal design system for Cox Automotive called Interstate. I was asked to assist the team by providing a mobile point of view as guidance for designers working in native mobile.

Interstate Design System, Mobile Guidlines

Here is a copy of the guidelines as they were published on the internal site.



Modular Design Principles

Beyond working and advising on design systems, I have a deep understanding of the core principles behind building components and larger patterns. I have given presentations to teams and can mentor other designers on the same foundation concepts.

Key concepts like separating content from container and the single responsibility principle can be borrowed from Modular CSS along with the notions of portability and scalablity and applied to the work we do in design systems.

Lessons Learned

Buy-In

Like any other UX project, design systems, especially those to have far reaching impact on other products and teams, need a thorough analysis and identification of key stakeholders and users. Without leadership buy-in and user adoption, the design system will not see the success it needs.

Scope

It is important to define the boundaries and authority of a design system. In most cases, especially for far reaching products, the scope should be limited and focus on the main building blocks of an application. It cannot be everbody's everything. Similarly, it needs to be determined what is a strict mandate, what is a recommended best practice, and what is a firm opinion loosely held.

Evolution

The design system should be treated much like any other product — a living organism that develops and evolves. Systems are more difficult to update due to the higher likelyhood of unintended consequences. As such, they have a tendency to become visually stale as time passes even though the design patterns themselves may have matured.


Ultimately, it’s the people who get the work done. Open communication with stakeholders and receptiveness to community input can go a long way.

Get In Touch

If you would like to learn more about the projects in this collection or hear about what I can do for your organization, please get in touch!

  • Email