Capital One iPad 1.0

• • •

Capital One's first full-featured iPad App for credit card, bank and Capital One 360.

Not Just a Bigger Screen

Capital One customers had been eagerly awaiting the release of a banking app to use on their shiny, new iPads. As a fresh transfer from another department, it was my first responsibility when I joined the Mobile team to get it in their hands! I churned through ideas both low and high fidelity. Traveling around campus and coffee shops, I walked coworkers through sketches on my iPad. I’d go over feedback with fellow designers, developers and stakeholders. Finally, I’d plot a direction for tomorrow’s iteration and repeat. I really wanted to take advantage of the iPad’s screen and not just repurpose the iPhone design.

Designer… and Developer?

The design direction was set, but needed to be applied to the entire banking experience. For my sanity, I built a responsive site with a master CSS file, which allowed me to make small changes to the design without having to deal with Photoshop layers (this was before Sketch). And because it was responsive, I could see my design in Portrait and Landscape orientations (just by resizing the browser) and easily send it to the team to get their ideas.

At the time, all mobile development at Capital One was done in a hybrid environment. This meant that the iPhone, Android and iPad apps were HTML, CSS and Javascript running in a native shell. Without knowing, my responsive site was used as the framework for development. My original HTML and CSS ended up in the Production app!

Project Roles & Responsibilities

UX/UI Design

Information Architecture

Motion Design

Product Strategy

Product Management

User Testing

Research Facilitator

QA

iPad 2x Sign In Coffee Shop Cinemagraph

The iconic Capital One Cafe coffee shop cinemagraph!

A Big Personality

One of the final challenges of the project was actually the very first screen our customer’s viewed after launching the app… the Sign In screen. At the time, our customer’s had to sign in to 1 of 3 separate products (Credit Cards, Retail Bank and Capital One 360). Banks, right? The whole Sign In experience takes just a small portion of the iPad screen, leaving a lot of empty space. I’m a big fan of negative space in my designs, however this was a bit too much.

I used a cinemagraph as the background to the Sign In experience. It became a signature for the app and we refreshed it to stay current every few releases. In fact, after the redesign of 2x there was an outpouring or reviews wondering where the cinemagraph had gone and asking if we could bring it back!

A Venture Card Account View

Look at that screen! The balance bar helped customers know where they stood.

The Transactions View

A customer could see a ton of information about their transactions, including where the purchase was made. This was obviously a precursor to the iPad 2x Tile View.