A Living, Learning Library

As the Quicken Loans brand continues to evolve, the pattern library evolves with it. Existing design patterns change as products mature, and new patterns emerge as needs grow. This living collection captures shared learning from ongoing improvements and new additions while helping unify Quicken Loans products and its family of companies through a consistent design language.

My Role

This project began in 2014 and continues to evolve today. It was a collaborative effort between UX designers, interaction designers, and developers who worked closely to ensure the tool would be useful in daily practice. From the beginning, we understood that for the pattern library to be successful, it had to become part of both our culture and our design process. I led this project as the primary UX and visual designer, using the Rocket Mortgage style guide as the foundation. Alongside another interaction designer, I was responsible for the research, documentation, and definition of UI patterns and best practices.

The Challenge

Before the pattern library existed, Quicken Loans products, websites, and mobile apps were built by different teams over long periods of time and revised continuously. This led to fragmented user experiences and frequent reinvention of the same design solutions at a high cost. Ongoing product updates and maintenance were also more difficult without shared standards.

The Setback

We began by creating a complete interface inventory. Screen captures of every interface element were collected and reviewed so inconsistencies and redundancies could be easily identified. From that inventory, we defined components and documented patterns with functional specifications in a PDF format. Without live code, the documentation quickly became outdated. There was no single source of truth for developers to reference, and we could not accurately represent how patterns behaved or scaled across different screen sizes.

The Solution

The team shifted to a digital pattern library built through close collaboration across design and development. A central system allowed both functionality and visual elements to be reused, which reduced cost and improved efficiency. When a designer or developer created a new pattern to solve a specific need, it could now be shared across teams and preserved for future use. New team members were also able to onboard more quickly by learning from a single, consistent reference.

The Impact

As the library continues to grow, it has strengthened how the team applies design elements and improved the overall user experience. It makes inconsistencies easier to spot and clarifies how elements should look and behave. Most importantly, it has created a shared language and stronger alignment between UX designers and web developers across the organization.