Documenting CFPB web design standards

While completing the overhaul of, I was tasked with documenting our new web design patterns and creating a visual guide including secifications for the usage, responsive behavior, content guidelines, and styling of each new pattern.

Then, the documentation was moved to our public facing Design Manual. There the guidelines can be accessed, discussed, and pushed forward by peripheral team members as well as the general public.

Roles included: visual design, UX design, and documentation.

First, developing of page types and the information architecture

Below is a diagram used to define the different pages types created for the new site.

Then, the development of new design patterns and modules, iterated on them and documented them along the way

Below is design spec documentation for the breadcrumbs pattern on

And, below is documentation for forms on a “Learn page” template.

Finally, I moved documentation to the CFPB’s public facing Design Manual

After refining design patterns and discussing with internal and peripheral team members it was time to move things to the CFPB’s public Design Manual. Below is a screenshot of a documented pattern directly from the Design Manual. Below is also a list of links to other design manual pages that I worked to publish on behalf of the Bureau.

Example Design Manual page

Contact AJ

Want to discuss your next project, take a look at my work experience, or just say hi? Send me an email or connect with me on social media.