CTA Design System and Guideline

Role: Lead UX Designer

Software: Figma,

Project Overview: JPMorganChase was using different software packages throughout different lines of business. This resulted in inconsistencies in styles, colors, and use cases throughout the firms design system. I introduced component variants to design teams in figma, and was able to create a single source of truth for thousands of designers across the firm. The guidelines were published on the Chase Brand Toolbox website.

General use guidelines

Because these new CTAs will be used by external agencies, it was important to clearly define each use case, and back them up with examples. I started with general use guidelines and created tabs to categorize more specific information.

CTA Information

Each tab contained a more detailed description about the type of CTA along with the use cases and style details for each.

Primary CTAs

Alternate CTAs for acquisitions only

Inverse CTAs

Do’s and Don’ts

Examples of use cases are provided to further solidify the descriptions listed in the detail tabs. This helps to ensure proper usage when art directors hand work off to external agencies.

Do’s

Don’ts