Design Systems at Capital One

Overview

In my first rotation, I helped build the first design system for EASE, Capital One’s consumer facing application. Some of my responsibilities included:

Building our cross platform components and patterns
Partnering with lines of business to co - create design components to be utilized by designers across bank, card, credit on EASE

A product owner on Card partnered with my team to ideate a solution to solve the problem below. This case study walks through my process of designing and contributing a hint component.

Problem Statment

Research of Usabilla feedback from users indicated that customers are having difficulties navigating EASE (the consumer facing app), finding tools and services, and consequently completing their tasks digitally.

Goals

Propose a solution:

with helpful content about specific areas of the experience in an unobtrusive and targeted manner

that can span cross platform and line of business
that can be applied to various use cases:
- First Time User Experience
- New feature on-boarding
- Feature adoption
- Digital engagement

Key Metrics

Component Usage
Usabilla feedback
Higher percentage of task completion

My Responsibilities:

UI/UX
User Testing
Documentation

The Team:

Me
Card Designer
Card Product Owner
Card & EASE Engineers

Customer

1000+ internal Developers
600+ internal Designers
Mobile App Bank and Card Customers

Competitive Analysis

We began ideation of a concept by determining methods used by others to successfully convey helpful tools and tips in a nonintrusive way. We learned valuable insights from this analysis and determined that a hint would be the best solution.

Slack, Google Analytics, and HubSpot delivered great hint experiences to help their users. We hoped to adopt similar practices in the solution. These practices include:

Hints that guide users through each click, build familiarity with the interface and make it easier for users to find their way back on future visits
Hints should grab users’ attention by using bold contrasting UI and clear, direct copy
UX copy should be succinct
Hints should trigger in context to better ensure users’ read the content

Slack triggers its tooltip in context and uses clear, direct copy

HubSpot uses bold contrasting UI to grab the user’s attention

Google Analytics’ tooltip guides the user through each click

Proof of Concept

Before dedicating both design and engineering resources to the time consuming work of contributing a component to our design system, we needed to gauge whether a hint was the right solution to accomplish users’ needs.

We gauged this by designing a proof of concept and conducting A/B testing. A designer on Card worked closely with engineers to put together a quick and dirty concept to point out key areas based off of top user friction points.

Results:

The concept observed an 8% increase in users opening More Account Services

This increase indicated that users were reading the hint and successfully completing tasks.

Guerrilla User Testing

Though the concept was a success, the experience wasn’t. The next step was to flesh out the true user experience and interface of the hint. I decided to guerrilla test it as it existed with other designers at the company. I asked them to complete a few tasks and I observed the pain points and opportunities.

Problems

❌ The design raised accessibility concerns and lacked contrast

❌ Users were often uncertain on how to exit the hint experience

❌ Users often asked how many hints were in the experience, becoming irritated by lack of clarity

❌ Users were often unengaged, retaining little to no information

Opportunities

💡 Explore bold UI and adhere to accessibility requirements

💡 Give clear indication on where and how to exit this experience

💡 Take advantage of pagination to prepare users for the hint experience and give them flexibility and control

💡Explore inviting titles and relevant photography to engage users.

Mid Fidelity Design Iterations

Using the opportunities from user testing, I designed a few solutions to share with stakeholders. I met with engineers, product partners, and other designers to see the successes and failures of my solutions.

✅The bold title draws users into engaging with the hint, giving them a sneak peek of what aid the experience provides. The elevation and color contrast is attention grabbing❌ It is not technically feasible to estimate how long the hint experience mi… — ✅The bold title draws users into engaging with the hint, giving them a sneak peek of what aid the experience provides. The elevation and color contrast is attention grabbing
❌ It is not technically feasible to estimate how long the hint experience might take. “Skip” is not a clear indication of exiting the experience.

✅The pagination component is clear in defining how many steps the user needs to go through❌ The size of the hint is disruptive and can distract the user rather than aid them. Photography would require extra intake from our designers. A relevant icon… — ✅The pagination component is clear in defining how many steps the user needs to go through
❌ The size of the hint is disruptive and can distract the user rather than aid them. Photography would require extra intake from our designers. A relevant icon is a better design addition

✅Having a previous button allows users to go back in the experience in case they want to revisit information. The “x” icon is a clear, nonintrusive way to exit the experience❌ The progress bar is relative and difficult to define in terms of time. It… — ✅Having a previous button allows users to go back in the experience in case they want to revisit information. The “x” icon is a clear, nonintrusive way to exit the experience
❌ The progress bar is relative and difficult to define in terms of time. It is not very accessible

Final Solution

I adopted the successes from my previous iterations into the final solution as well as the learnings from the competitive audit. Those included:

Pagination component to indicate clear transition through experience
Elevation and color to draw users’ attention
Bold title to keep relevant information succinct and useful
Feature related iconography to show hint in context
Triggering hint on users’ first time interaction to help build familiarity

Contributing the Component

The next step was to contribute the component for use by all designers on EASE. In order to do this, I collaborated with engineering partners and another designer to build documentation around the properties, do’s and don’ts, and usage of this design component across platforms. This documentation was vital in building a seamless hint usage across lines of business. Below include some screenshots from the EASE BuildBook (design system).

Component Design Specs

Cross Platform Usage

Best Practices for Usage

Hint Functionality Documentation

Possible Hint caret locations to maintain seamless usage

Design Tokens for Engineers

Worked closely with engineers to tokenize our design system so that parameters within the component matched arguments in code.

Final Thoughts

In order to test the success rate of this component, the EASE team is monitoring usage across lines of business as well as designer feedback on enhancements for future iterations. We are currently A/B testing the hint component within a specific experience in Card to see its ability to meet the goals above and better assist users towards task completion.