We had just finished creating the new Moz brand and now needed to take those standards and apply them to the marketing site. We had a problem with redundant CSS and HTML on the site and we wanted the pattern library to help alleviate it. Our main goal was to create a library that allowed a team of designers and a team of developers to rapidly update the website and create constancy for our users. We had another pattern library for the Pro application and this one dovetailed with it.
I was lead designer on the project and created all of the artifacts for this pattern library. We needed to build better consistency into our patterns and produce less redundancy in our front end code so I was constantly working with the front end development team to refine the CSS and HTML. I worked with the PM team and our users to determine which patterns were going to make the cut. I also worked on applying our newly created MOZ brand standards in the pattern library to create a fresh look and feel.
We had new brand standards and we needed to create a pattern library that incorporated the essence of the new brand. The library was also a new tool and I had the challenge of lobbying the leadership team of its value to justify the design and dev cycles that would go into it. Pattern libraries were new concepts at the time and the lobbying for the creation of ours was challenging. We also had a pattern library for the application and I needed to have a full understanding of how they would dovetail into each other.
It was hard for the leadership to initially see the benefit of spending time on a pattern library. However, people were on board once I gathered all of the facts and presented the benefits of such a project. I learned how the use of a pattern library could speed up both design and development. I also learned that a pattern library was a big help with teams that were growing rapidly. It allowed designers to onboard faster and allowed front end developers to get quickly acquainted with the code as well.
