Cadillac.com Pattern Library
ROLE
Research & Design
AGENCY
MRM//McCann
CLIENT
Cadillac
YEAR
2022 - 2024
01
Reseach & Audit
The first phase of our process was auditing Cadillac.com to identify existing patterns across all pages. We defined a pattern as any graphic composition that serves a unique purpose for communicating information to a user. Examples include mastheads, content blocks, section intros, and horizontal scrollers. This phase included scrubbing the site, collecting data (in the form of screenshots or potential patterns), and uploading everything to a team Miro Board to be organized in phase 2.
02
Organize & Categorize
Once the audit phase was complete, we began to look for meaning in our data by categorizing patterns by use case and function. We also used the process of categorization as a means of identifying repeated patterns and redundant layouts.
For example, the “3-4 Column Copy Block” is used across many pages, and its purpose is to efficiently communicate multiple ideas, or multiple aspects of a single idea. There are 3-4 columns of copy, each having a headline, body copy, and sometimes a CTA button. Once we collected all screenshots that had these attributes, we found that this pattern appeared across the site in inconsistent font sizes and paragraph alignment and various column widths and leading heights. Below are three examples of the original “3-4 Column Copy Block” screenshots:
From here, we examined the content in each layout, and found that while the layouts had design variations, the function of each was the same and there was no discernible reason to have multiple layouts with inconsistent styling. We repeated this process, simplifying nearly 300 pieces of data into 50 easily understood, well defined categories that became the foundation for our new pattern library.
03
Design
After organizing and categorizing existing patterns, as well as evaluating variations in design within each category, we then began the design process. As mentioned in the organization phase, for patterns that had multiple design variations (like the 3/4 column copy layout), we created one new pattern. Having just one pattern did not mean we couldn’t create another, but there had to be a functional reason to do so.
One pattern that required several variations was the masthead. Nearly every page on Cadillac.com has a masthead of some kind, so creating several types based on page content made the most sense. For example, Model Overview (MOV) pages each have a masthead that serves a different function than a masthead on a Discover Cadillac page. MOV pages serve to educate a user on the details of a single vehicle, so the mastheads require the vehicle name, model year, a positioning statement, and general availability. Discover Cadillac pages, like Cadillac Live or EV Life, each have different types of content and don’t require the same level of consistency as MOV pages. From this, we created an MOV masthead pattern, and two alternative masthead patterns that could be used as is, or adjusted as needed for non-product focused pages.
04
Cross-Department Collaboration & Alignment
Then came the collaborative phase: partnering with our teammates in UX and Content to bring our Figma library to life in the CMS, where patterns would be quickly accessible when building pages. Additionally, we thought creating a naming convention for each pattern that was understood by all team members, regardless of department, would increase future collaboration. This was important to us to ensure clear communication and efficiency when discussing and reviewing work across departments. During this specific project, having a naming convention that defined for each pattern allowed team members to provide feedback and attribute it correctly, minimizing confusion and redundancy in our review and alignment process.
Updated Patterns
Feature Introduction
Pattern updated to create one layout for feature or section introductions. Updates demonstrate consistent font size and weight, optimized image ratio and padding, and balanced copy placement.
After
Before
Content Promo Block
Pattern updated to create several layouts to choose from for content promo blocks that contain copy and an image. Pattern updates include uniform layout in two aspect ratios (1:1 and 3:2), a gradient background, consistent font size and weight, optimized image ratio and padding, balanced copy placement.
After
Before