About the Pattern Library

The MailChimp Pattern Library is a byproduct of our move to a more responsive, nimble, & intuitive app.

Over the course of two full redesigns and our recent navigation refresh, we've worked to distill most of the MailChimp interface into a set of atomic pieces, forming the pattern library you see here. By documenting and assembling a reference site of our patterns, we were able to speed up our process and solve some internal communication problems. A common lexicon of code and UI elements benefits us in a few ways:

  • We can build consistently, focusing our energy on workflows and logic, not web forms and list items.
  • We can reuse code instead of reinventing the wheel or roping in an engineer.
  • We can see all of our patterns in one place, quickly revealing maintenance issues.

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

Just to be clear, this 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 meet our own challenges. Modify and mangle at will, but know this is not a supported system—it’s a living, learning library.

Want to hear the story behind our Pattern Library? Listen to our own Federico Holgado talk about it on a recent episode of Brad Frost and Anna Debenham's Style Guide Podcast.

Constant change, careful growth

We believe iteration is a vital part of the design process. Being able to change fast requires both an efficient workflow and a well defined collection of reusable parts that can assemble new interfaces quickly, without accruing new technical or design debt.

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.

Bibliography

We lifted code and inspiration from the work of these brilliant people, to whom we're tremendously grateful.

More from the @MailChimpUX Team

The UX Newsletter

Our monthly newsletter where we learn from inspiring guest authors and share stories about working on an app that serves more than 7 million people.

Subscribe now

The UX Reader

A collection of the most popular articles from our newsletter, along with some exclusive content. This free ebook embodies our quest to reflect, refine, and grow. We hope it’ll help you do the same.

Download the ebook