American Psychological Association Pattern Library

There are over a hundred web apps at the American Psychology Association (APA). The apps have different styles for buttons, colors, and forms. To help maintain consistency, a pattern library was created.
The American Psychological Association
Lead UX Designer
American Psychological Association Pattern Library


Many of the web apps have inconsistent styles, which impacts the overall user experience and brand. This would cause confusion for users going in between different systems.


Create a pattern library that helps to maintain styles, provide usability guidelines and accessibility guidance.

No items found.


Using Bootstrap 4 as the foundation for the pattern library allows the team to focus on usability, accessibility and styling. With a team of 2 working on many other projects, it was important to find a quick way to get started. Also, since the developers are familiar with bootstrap, it makes it easier to handoff and translate designs.

The pattern library has a dynamic stylesheet that uses SASS. When the styles are pushed to the production site, any app that references the same stylesheet will automatically update with the new/adjusted styles. This is very helpful for maintaining general styles such as color and border-radius. It helps to save time when updating branding elements.

Screenshots of the APA Pattern Library demo site

Button setup in Figma

Input variant setup

Developing a Process

As our team grew it was important to document a process with constant checks and reviews. The UX team would review the design and code before pushing changes live to the documentation site.

Constantly Learning

This is an ongoing project at APA that has been constantly evolving. When the UX team first launched the pattern library, we were focused on creating a list of components needed in most of the apps. The components are essential and have to be thoroughly tested and reviewed before publishing to the library. With pattern libraries, it’s important to not only focus on the styling, but the markup of the code. The quality of code can impact accessibility and usability. Since the UX team uses the library heavily for prototypes, we were able to find and resolve any issues that came up with the code.

Another important lesson our team learned is the importance of keeping the components simple. This meant we had to keep in mind that padding needed to be minimal since these components are meant to be versatile and exist amongst other elements on the page.

The pattern library for the web apps is consistently growing and improving. Testing and developer input helps to build a solid foundation for the apps as we continue to improve the user experience throughout the organization.


Within one year of the initial pattern library launch, the team has experienced smoother designer-development handoffs, faster prototyping and better aligned systems. Over time, we have consistently made steady contributions to the library, which helps us to focus more on the design problem.

Sarah King Logo

Additional Work

© 2023 by Sarah King