AdRoll Pattern Library
AdRoll’s pattern library site for reusable UI components built using React.
View Live Site
Byproduct of AdRoll’s move to a more consistent, nimble and flexible application.
Over the course of the campaign creation app redesign and UI framework creation, our team worked to distill most of AdRoll’s interface into a set of atomic pieces, forming the pattern library. By documenting and assembling a reference site of our patterns, we were able to speed up our process and solve some internal communication problems.
Helping communication between designers and engineers.
Our engineers and designers were able to share a common language by making it easy to see all of our living patterns in one place. It helped different teams to build apps more consistently and let each team focus more of their energy on solving problems instead of writing stylesheets to implement UI following the designers’ mock.
Sell to different teams.
Up until now, each team has had to write their own code to implement interfaces. Thus, adopting a new pattern library meant they needed to refactor the style of their applications - something they were hesitant to do. However, as the pattern library becomes more and more robust, it has been used to showcase to product and engineering managers the benefits of adopting shared library which are: