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.