Visa: Consumer Card Controls

Interaction Design, Mockups, Product Design, Prototypes, User Experience, Wireframes

Value Statement

Visa’s Consumer Card Controls empowers consumers to control how, when, and where their cards are used

Project Summary

Problem:
Consumers asked for additional controls over their cards and spending habits. After an intensive round of user research, we conducted a design sprint and discovered a candidate for a valuable product, deserving of exploration.

Solution:
We devised “Token Controls,” an experimental banking product that would allow consumers to connect their banking / credit cards to specific merchants, and define spending controls right within their favorite banking applications.

My Role:
Lead design role on a small, focused product team building a new set of features and APIs to offer our banking partners.

Outcome:
A solid proposal, and a convincing prototype on both Android and iOS, which the Product Management team was able to showcase in client meetings, conferences, and investor showcases.

Approach: Research, Engage, and Explore

Empathy: Client Interviews & Explorative Discussions

We sat down for several explorative discussions with our internal clients, two product management stakeholders interested in building a new feature for Visa and other banking customers. Our key discovery was that there would be value in provisioning and managing multiple merchant tokens from a single credit card.

Through a combination of sketching ideas, and leveraging user research into different personas, we began to uncover potential solutions to explore.

Explore + Discover: Ask Questions and Explore Early Insights.

In this stage we took everything we knew about our banking partners, and held it up against everything we learned about the banking customers we researched. Where did their needs overlap? Where might they be at odds?

We began by exploring potential solutions on white board and on paper, building out rough ideas and sketches that allowed the product team to follow our train of thought and bring their own knowledge, familiarity with their business, and expertise to bear.

Architect + Define: Structure and Flow

We set up some scaffolding around our strongest ideas, and organized the essential content into categories to define the information architecture. We produced diagrammatic flow documents to demonstrate how the content areas would relate to one another and documents to show how a user will ‘flow’ through the various components of the website or application.

I also used this phase to nail down individual page structure and identify the overall page structure, navigation and interaction mechanisms, and primary content areas.

Approach: Present, Iterate, and Build

Building the Story

Leveraging Persona Development work from the user research team, and from an illustrator on our team (Note: I did not produce these cute hand illustrations) we developed a story that showcased critical user flows for provisioning and managing multiple merchant tokens from a single credit card. We used this story to present a white-label banking app from which users can provision new tokens, and then set numerous controls over each token.

 

In the story, we presented Danielle Campbell, a successful business woman, through several scenarios. We also presented how she can utilize Token Controls with her family members, and through numerous touch points in her life.

Further Wireframe Explorations

Defining Aesthetics

Once the architecture is in place, defining the aesthetic elements becomes critical. How will the brand be expressed through the digital property being built?

Look, Tone, and Feel

Product owners asked that we tackle the final design from a fun, blue-sky explorative approach, grounded in elements of navigation and interaction that would likely be critical to the success of a banking app. I deep-dived into some of the best banking apps on the market, and synthesized my favorite aspects of those apps with the key features from our Card Controls discoveries.

 

The prototype I put together was intended to showcase the new feature concept, in the context of a fictional banking brand — in which the Visa brand is secondary at most. The feature, which is something new and experimental, should nonetheless feel like an extension of, and an improvement on, the existing, expected banking app experience.

View Clickable Prototype

Alternate Design Exploration for Android

View Clickable Android Prototype