Work Info

Connex Pattern Library

Connex is a centralized digital marketing platform. Our goal was to design and develop a pattern library, a collection of repeatable user interface elements, that would enable the application to grow rapidly by simplifying the discussion and development of UI.

Connex Pattern Library
Connex Pattern Library

We audited and organized the existing UI into content types and reusable patterns. Following the Atomic Design system, we defined the smallest atoms that would combine to form larger molecules, templates and pages. This was completed using Pattern Lab, a static site generator powered by Node.js that stitches together UI components using mustache templates, SASS, JavaScript and JSON.

Connex Pattern Library

By consolidating and organizing front-end code as an accessible resource, we created a single source of truth for developers. Clear markup snippets are now available to use while building out new features in our application.

Connex Pattern Library

The pattern library is integrated with our application’s codebase, unifying the front-end architecture with our design system. Since markup and style are consistent and organized, we can make style changes in a few places and have them propagate everywhere. This makes it easier to roll out design adjustments or a complete redesign.

Connex Pattern Library
Connex Pattern Library
Connex Pattern Library
My Role
Interaction Design
UI/UX Design
Visual Design
Front-end Development
Prev
Connex Pattern Library
Next