Capital One
Revamping America's #8 Bank

After thorough user research, I crafted a universal style guide and build book for Capital One Commercial. The guidelines now apply to all products that face companies, banking with Capital One.

What Did I Contribute?


  • User Research

    User Task Analysis, Empathy Interviews, Usability Lab Studies, and Customer Journey Mapping.

  • Low-Fidelity

    Whiteboarding, Stickynoting, Wireframing, and InVision Prototyping.

  • High-Fidelity

    Mockup delivery, InVision Prototpying, and Content Writing.

  • Agile Web Development

    Accessibility Testing and Beta Launch A/B Testing.

Highlights

  • Image

    Atomic Design

    Each element of the design was defined and bundled so that logic could be applied for proper usage and easy distribution within engineering releases.

  • Image

    Custom Font

    Optomist was a custom font made for Capital One to update the positive look and feel of products enabling customers to take charge of their financial obligations.

  • Image

    Bootstrap Grid Detailing

    Each componentized element had specific responsive designs applied using Twitter Bootstrap. I even produced redlines for easy communication of interactions, layout, and other implementations.

Commercial Web Style Guide

A small change at the beginning of the design process defines an entirely different product at the end.

The Goals

1. Drive cohesive user experience across devices and product ecosystem

2. Lay a foundation for design innovation and execution throughout the Commercial line of business and beyond

3. Support internal and external Capital One teams through a centralized design and development system of re-usable components

4. Apply the benefits of Atomic Design to our development teams, such as improvements to reusability, consistency, updatability, modularity, minimalism, and perceivability.

The Result

The commercial LOB needed a design execution system. The first iteration of this system is the creation of this document, the ICCE Web Style Guide, which will house global components for the ICCE Web product and T&E mobile apps. Global stylesheets can mimic the aesthetics and intended interactions of these designed components consistently. While accounting for every possible scenario is difficult at best, having many pre-built components, written in HTML and CSS, on hand helps keep a product consistent. Assuming that we’ve covered every aspect of a site's design is easy. Too easy. We've found that people familiar with a design can miss the obvious. This style guide will take precedence and override the individual design mockups, reducing the need for pixel-perfect prototypes and allow for wider use of mid-fidelity wireframes. Here is where you’ll find guidance, information, and resources for creating those delightful experiences.

"Style"

I'm very experienced at creating style guides and build books for organization, including in-house standards for visual design, language, and interaction.

View Document