Cardinal Design
System
The Project
When I started at Transamerica at the beginning of 2019, the financial company consisted of 7 different product teams including pre- and post-login experiences. The UI, interaction patterns, accessibility and usability were fragmented across all products. The team was in desperate need for a consistent, organized, and scalable repository for all the necessary product components.
My role on the Digital Solutions team was a UX/UI designer for the Cardinal Design System pod. As a collective pod, we were tasked to lay the groundwork to build on-brand and consistent products that embody the companies digital standards. Our goal was to help designers and engineers spend less time creating the same things over-and-over, and more time focussing on user experience, problem solving, iteration and building successful products.
The design system was still in its infancy stage when I started, so there was a lot of opportunity to contribute from the ground up. I helped define and standardize styles, components, and patterns across all digital Transamerica products. I also took the lead on redesigning the Cardinal website experience for our internal design and development team members.
Project Skills
UX/UI Design
Collaboration
UX Research
Component Design
Responsive Design
Workflow Mapping
Technical Writing
Information Architecture
Usability Testing
Design Thinking
Accessibility
Project Tools
Sketch
Abstract
InVision
Sketch Libraries
Zeplin
Miro Board
Anima Plugin
Stark Accessiblity Plugin
WebAIM Contrast Checker
Cardinal Foundations & Process
We started creating the design system with the foundational elements of our products – Styles. This included Color, Typography, Iconography and Z-depth. My first contribution to Cardinal was the Typography portion.
The design process I followed is outlined below:
Requirements Gathering – Defining the contribution and expectations around documentation from both the engineering and design side.
Discover – Audit and synthesize results while doing additional contribution research based on product & business goals.
Explore – Create design iterations and present work to product leads through short ICRs before reaching a final design solution.
Catalog Design – Design and document contribution’s usage, style, responsiveness, accessibility and developer guidelines.
My biggest achievement working on Typography was creating a responsive type scale that includes a range of contrasting styles that support all Transamerica products, each with an intended application and meaning. Defining this scale helped designers understand how to use our typefaces correctly and create a much needed alignment across all pods.
Thorough Documentation
An important part of the Cardinal process that I enjoyed was the documentation aspect. I took advantage of my own strengths of problem solving and empathy to understand how we can help our product teams make a better product for our users while also improving efficiency for the business.
One component that I spent a lot of time on in the documentation phase was Dropdowns within the Form pattern. Our post-login teams had a huge need for this component and I was responsible for taking the lead on design from start to finish. I started the process by gathering all team needs and then going through iterations of work detailing how they would interact within a form pattern. I looked at everything from error states, inline validation and multi-select variables to different sizing options for various product needs.
My ability to interpret user needs visually and be very detail oriented proved beneficial in this regard as I made sure to cover all my bases before handing off to the engineering team. That meant not only making a solid design with all necessary functionality variables, but also documenting thoroughly about how to use this component and all the specifications around it so that both designers and developers could easily reference these guidelines without a ton of back and forth between teams. My goal was to always make sure the catalog design was clear enough so that no questions were lingering later down the road.
Component Library in Sketch
Breaking symbols or going rogue was a constant challenge. We needed symbols that were atomically built, flexible, and scalable that lived in a place where all files using these symbols would be automatically updated. I recognized this as a huge concern for the business, so I took initiative to find the right solution for our cross-functional teams.
The simple answer was to use Sketch Symbol Libraries because any sketch document can be made into a library across Abstract, the versioning software we used at Transamerica. Since we designed elements on a component basis and didn’t want to have one large working file, I came up with the idea to have multiple sketch symbol libraries based on the different features we were working on. Using an emoji symbol code next to the name allowed users to easily understand which libraries were available to use or under construction.
Organization was key in order to have multiple Sketch Symbol Libraries. This meant using nested symbols to provide quick and easy access to all necessary variables and states for each component. I made sure to include a reference guide within each symbol library that explained how to use the nested symbols for each component. I wanted to make sure designers also understood how to build patterns using each component.
Rethinking the Cardinal Catalog
As with any design, there came a point during my time on Cardinal that we decided to rethink the navigation and overall design of the online catalog to become more public facing and better serve our internal team members.
After hearing about some challenges other coworkers were experiencing with the catalog, I volunteered to speer head the updates starting with some usability testing to better understand how we could create a better user experience. We were able to use our research team to guide testing while my team observed off-site.
After 3 different rounds of testing and design iterations, we had some important takeaways:
New Releases – The current catalog design was missing a feature that allowed users to check on which components were new, had updates, or in the roadmap.
Naming Conventions – Streamlining naming conventions between designers and developers was important to mitigate confusion.
Abstract / Sketch Library Links – Designers wanted easy access to design files from the catalog.
Scroll Depth – The current catalog pages were too long causing zooming and navigation issues.
Component Consumption – We didn’t consume our own components which caused confusion.
How-to Section – Adding a how-to section to the catalog would have been helpful for understanding how to use and link symbol libraries
We synthesized these takeaways and I began to restructure the information architecture and adding new features, like an interactive component completion section, that would enhance the overall user experience.
