Concord's Director of Digital & User Experience, Ryan Decker, shares why pattern libraries are the answer to your UX troubles.
Your design team just spent a full year – and a healthy budget – on a website redesign. You finally launch. Fast forward just a couple months…aaaaand it's functioning well, but you’re already wondering if it looks outdated. Sound familiar? It’s a common challenge, but it’s not without remedy. Enter the pattern library – the design agility you desire.
What is a Pattern Library?
You’ve likely heard the term pattern library if you run in any UX circles. It's sometimes used to describe a static style guide, but a true pattern library takes that concept further and provides user interface styles and components in coded form. These components are used and reused as the building blocks of your design system by one or more applications. When implemented well, changes are made once in your library code base and the building blocks used on sites and applications throughout the company are updated as a result. If you find yourself faced with the challenge of keeping your website or application current, it’s worth the effort to put a pattern library in place, particularly if your organization leverages the same CMS or platform for multiple websites and applications.
Often by the time a design is in production, it’s already well on its way to going out of style, in large part because of the effort required to roll out visual updates across a large site or many sites. Putting a pattern library in place provides freedom in your design by enabling changes to be made across systems quickly and efficiently. A well-implemented pattern library reduces fragmentation of your design by increasing both quality and continuity across teams and applications.
The payoff from a well-executed pattern library is certainly worth the upfront investment in both time and money. You can significantly reduce cost and complexity related to updating a design element (or holistically redesigning) across multiple teams and projects. When you want to change the color of your buttons or get rid of the drop shadow that went out of style last year and you hear, “we can get that into testing in about six months” – it’s time to consider a pattern library.
Simplify Your Life
It’s hard to go from a static design element in Photoshop to a functioning user interface. Setting up a pattern library eliminates a lot of heavy lifting by reducing the level of effort to build and implement complex, responsive components multiple times across multiple projects and platforms. It saves time up front and over the long haul when components inevitably need updating. Plus, a pattern library makes testing much more manageable – instead of sweeping, manual regression tests, you can be confident about how changes will interact everywhere on your site or application, since the same consistent code is being applied.
Let’s Be Real
When considering a pattern library, start small and you'll quickly learn what it takes to see tangible results and begin implementation across the company. A full-spectrum pattern library takes time and healthy partnership between design and development teams, but the benefits are well worth it!