Pattern Library | MailChimp

Pattern Library | MailChimp.

The MailChimp Pattern Library is a byproduct of our move to a responsive, nimble, and intuitive app. Constant iteration requires both an efficient workflow and a well defined collection of atomic elements that can assemble new UIs quickly without accruing new technical or design debt.

We’re also solving an internal communication problem by documenting and assembling a reference site of our patterns. A common lexicon of code and UI elements benefits us in a few ways:

  • We can build consistently and focus on workflows and logic, not web forms and list items
  • We can reuse code instead of roping in a developer
  • We can maintain our code by seeing our patterns in one place, define elements in our application, and keep redundancy to a minimum

We guard our pattern library jealously, and add new patterns only when the case for doing so is sound. New patterns come at a high cost—they require new design elements, additional code, maintenance, and they increase the cognitive load on users.

Our pattern library is both a learning tool and a compass that corrects our course as we build new things. We share our work here to help others on a similar path.

It Ain’t Bootstrap

Just to be clear, the MailChimp Pattern Library isn’t meant to be a UI framework like Bootstrap—it’s not a definitive guide on how a web application should be built. It’s tailored specifically to our needs, so if you attempt to use it as a foundation for a future project your mileage may vary. Many of the ideas in our library are a greatest hits collection of ideas others have pioneered that we’ve adapted to a new situation. Modify and mangle at will, but know this is not a supported system—it’s a learning library.

Want to hear the story behind our Pattern Library? Subscribe to our bi-weekly newsletter, where the MailChimp UX team discusses process, techniques, and insight that we learn from working on an application that serves more than 3 million people.