American Express Pattern & Component Library
UX/UI
Role
UX/UI Designer
Duration
4 MO
Design Resources are really important to a big organization like American Express.
There was a need for a central resource for patterns and components used by designers working on the Intuitive Servicing Portal. Our Slack channel was rife with questions about how, when, and why we use patterns and components over and over again. A resource was critical for designers to update whenever new patterns and components were eventually added to the style guide.
Problem
There was no central resource on design patterns and components for the Intuitive Servicing Portal. Designers on different teams across Amex were consistently asking why, how, and when to use them.
I met with a Senior Designer who expressed need for this resource echoing our ever questioning Slack channel. He explained that there are several different resources for design throughout Amex, but this one is strictly for usage of patterns and components on ISP, and should not re-explain design elements like our company’s style guide.
Process
1.
July 2023:
The example templates for the libraries below show my first rounds of templates on Confluence. The first didn’t have enough information, the second was too dense and repeated information from the style guide, and the third had a good middle ground with enough information to answer usage questions.
2.
August 2023:
I hit a snag in this process when the Product Manager for another team told me his team had already created a resource on Confluence like the one I was creating. I planned 3 more meetings with multiple teams of designers to get consensus about why this library is different and necessary.
3.
September 2023:
Created templates for every component and pattern that needed a resource page. I researched Confluence macros and applied them to each page so that the UI works more like a webpage. The templates were placed within the main ISP UX Design Confluence page so anyone can access and update them.
4.
October 2023:
Another designer assisted me in inputing all the information per component and pattern based upon the templates I created. After all the copy, screenshots, and videos were added, I went through them all to assure the formatting was correct and links worked before publishing them to Confluence.
Solution
A Pattern & Component library for all Designers at American Express to view and/or update on Confluence.
The component and pattern libraries were nested under the ISP UX Design page on Confluence. Each of the libraries have guidelines about what constitutes a pattern or component, as well as, icons to differentiate those pages that were still in process of being updated, approved, or edited.
Outcome
A vetted Confluence design resource, with accompanying template, to use anytime components or patterns need to be added.
This resource is incredibly scalable. Whenever a new pattern or component is added, there is a template to assist in making the page consistent with the others in the library. The macros add design elements like jump link navigation that scrolls with the page, a table of tagged patterns or components that appear on the library page, and a variation section (optional based on the pattern or component) that has its own template that can be added onto the original.