Capital One

Unifying the web experience WITH a cross-team design platform

As the design lead for the site design platform, I played a key role in creating the design system that powers Capital One's unified web experience today. I led the design and enhancement of components, templates, and guidelines that enable lines of business (LOBs) to build their own webpages. Partnering with stakeholders across LOBs, I guided them in adopting the design system to ensure consistency and scalability.

Role

Design system
Product design
User Research
Prototyping & testing
Creative direction
Stakeholder collaboration

IMPACT

Enabled the implementation of 2000+ webpages within 2 years.
34% increase in unique visits and 250% increase in applications in one product launch.
Highest experience score from Forrester.

Problem

A frankenstein website designed by different teams.

Capital One operates under a federated business model, and different LOBs have been designing their own sections of the website, leading to a disjointed web experience. Navigation was inconsistent, layouts were all over the place, and even fundamental elements like buttons, colors and typography are applied differently.

How might we bring content creators across LOBs together to create webpages that are consistent with the overall experience?

Approach

Start small, scale later.

We knew we need a WCM platform, and the platform needs a system of components for LOBs to use. To build out the design system, we began first by redesigning a few core pages from primary LOBs like Credit Cards and Bank Accounts. We took inspirations from websites that project a similar personality. We identified similar content across LOB pages and began designing sections of the page in a scalable manner.

Solution

Expand and elevate the design system with LOB collaborations.

Using a scalable approach, we came up with a system of components that serve various user goals and content needs. At the same time, we began to collaborate with LOB teams and advocate for the design system. Gathering their business and product requirements, we refined our component library while also conducted in-market and user testing.

Components and Variants

The components are categorized into 4 families. Each component has multiple variants, supporting a wide range of content needs from different LOBs. We also maintain guidelines for each component, documenting purpose, anatomy, interactive behavior, required vs optional elements, and character counts.

The Banner family

In the early days of the platform, we only had a handful of banner components. Some banners had very similar designs but were designated for different purposes, creating confusion among content creators. As more and more teams migrated to the platform, the wide range of use cases made us realize the need to re-categorize, refine, and add new layouts to our banners. I took charge of this project, redesigning the banner family and drafting guidelines for each component.

Research & testing

Honing in on Compare components.

The Compare pages are one of the most trafficked pages on our site. Potential customers use the filter at the top to find and narrow down products. Through multiple rounds of design and both moderated and unmoderated user research, we've come up with a few filters for our LOBs. These are continuously tested in market.

Here is the progressive filter in action, where it guides the user in narrowing down products step-by-step.

Here is the pill filter, where each pill acts as a switch. Users can turn on combinations of pills to find products that apply to them.

Compare on mobile

On mobile, we also tested different layouts of the product panels and different filter behaviors.

Larger product panels allow more information to be shown upfront, while more compact panels are less dense on information and make comparison between products easier.

Result

An aspirational and cohesive experience emerged through the widespread adoption of the design platform.

Next steps

From components to page templates

As the component designs were close to being finished, we started to think about page templates. For each page type, we define zones and the component variants that can reside in each zone. This would further drive consistency across the site and allow content creators to create pages even quicker.

Impact

The power of one platform.

In the two years since the first component was built, our self-serving platform has enabled the implementation of 2000+ webpages, supporting ~500 content deployments and over 100 million visitors monthly.

Forrester assigned the highest experience score to our new Homepage and universal navigation after their launch. The 360 Checking account page, which was the first LOB page that applied the design system, saw a 34% increase in unique visits, 250% increase in application starts and 117% increase in approved applications year-over-year.