We needed to standardize our experience patterns in the application in order to take the app to V1. We had also just finished creating the new Moz brand standards and needed to take those standards and apply them to our app as well. We needed to build better consistency into our design patterns and produce less redundancy in our front end code. Our main goal was to create a library that allowed a team of designers and a team of developers to create constancy for our users and to bring the beta Moz Pro app to V1 as quickly as possible.
I was the ux designer on the project and created all of the artifacts for the pattern library. I worked with the PM team and our users to figure out which patterns were providing the most impact. We had looked at qualitative and quantitative usage within our beta application to guide our decisions and refine the existing patterns. I worked on applying our newly created MOZ brand standards to the pattern library. I provided our development team with redlines to further guide the creation of consistent CSS and HTML within the library. This was a completely new project at the time and required constant collaboration and jockeying with the leadership team.
We had the several challenges with this project. We had new brand standards and we needed to create a pattern library that incorporated the essence of the new brand. The concept of pattern libraries was fairly new at the time and I had the challenge of lobbying for the creation of a library for our app. I needed to work with the Product team and Leadership team to help them understand why we needed to do this project.
We had a fair amount of redundant CSS and HTML in the beta application at the time. We wanted to use the pattern library to act as a central location for both developers and designers to go to get their artifacts. Our intention was to both cut down the amount of redundancy and also speed up the design process as well.
We were ready to see the fruits of the library once we had our patterns finished and sketched out some of the new experience.
It was hard for the leadership to initially see the benefit of spending time on the 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 a pattern library could speed up both design and development by providing a centralized location for access to consistently used experiences. 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 application as well.
