Capital One 3.0 UI Icon Library
To ensure that all 340 unique icons are up to date with what’s in spec and improve the accessing experience of the Capital One 3.0 Design System library.
With an alphabetized and robust list of over 340 unique icons, consumers struggled in digesting the UI Icon Library and finding their desired icon. Below encompasses the narrating themes of the project:
The library’s long, alphabetized list makes it difficult for consumers to adequately browse through and find their desired icon.
Library doesn't meet expectation that sizes should be a property within one component set (ie people are asking why 16 and 24px icons are separated into different component sets).
MY CONTRIBUTION
Team
Designer | Xavier F. Vazquez
Manager | Jana Choi
I interviewed a list of federated and non-federated designers on their familiar browsing experience vs. the 3.0 Gravity Library.
Varying browsing experiences that accommodated to different preferred browsing experience by consumers.
Created a list of 13 categories that divided 340 unique icons with 2,300 permutations.
New size implementations and component rewrapping alongside restrictions.
.png)
Throughout my interviews, I learned three additional pain points form users:
(1) Nomenclature. It was difficult to find synonyms to identify and icon.
(2) Browsing strategies varied. Federated designers tended to use more advanced browsing tools such as instance swapping and asset browsing while others tended to scroll around the figma file.
(3) Resizing. Only federated designers knew not to resize 16px icons due to visual differences.
Capital One 3.0 UI Library
Kim can first consult the guideline list of (1) guidelines for icons and (2) tips on how to browse.
Elizabeth, if she is unsure of the icon, can quickly and efficiently browse through the Explore Board
Leo can use our 13 categories to browse through and find his desired icon.
Users can now efficiently interact with the UI Icon component through:
(1) Size implementation of 32px and 40px and merging of the 24px and 16px libraries.
(2) Rewrapped 340+ icons with 2,400 permutations w/ UI cards to unite variations.
(3) Constrained 16px to prevent resizes.
POST-RELEASE:
MEASURE OF
SUCCESS
Following the release of the library, there were different avenues I could take to measure the success of the 3.0 Gravity UI Icon Library that fit within scope.
(1) Post release interviews. Setting up interviews to note any areas where the library was successful.
(2) Library Analytics. Check # of uses and detachments.
.png){kind=icon}
.png)
.png)
.png)
