Huntington Card Lock

Huntington Card Lock

2017–2018

Losing your debit or credit card is a pain. As you retrace steps, you worry that someone may find your card and drain your account. If you call and cancel, you'll have to change your accounts. With Huntington Card Lock, relax and simply lock it while you look for it.

Losing your debit or credit card is a pain. As you retrace steps, you worry that someone may find your card and drain your account. If you call and cancel, you'll have to change your accounts. With Huntington Card Lock, relax and simply lock it while you look for it.

dual-card-lock-image
role

ux lead
interaction designer

ux lead
interaction designer

objective
objective

Give customers peace of mind while they're looking for a card by delivering a fast, easy way  to lock a card from the Huntington Mobile app. Reduce the number of cards reported as lost by 5%.

Give customers peace of mind while they're looking for a card by delivering a fast, easy way  to lock a card from the Huntington Mobile app. Reduce the number of cards reported as lost by 5%.

Background

Losing a debit or credit card can be a frustrating process.
A search mission ensues and that dreaded call to the bank must be made if the card doesn't turn up right away. After waiting for the card to arrive by snail mail, those nice little auto-fill card numbers and any associated bills need to be changed. Not only is replacing a missing card a painful experience for customers, but initiating replacement cards is costly for the bank as well. 

Nine times out of ten, that pesky plastic ends up finding its way back in a few days. 
At Huntington, looking out for customers and the bottom line meant that allowing customer to simply lock their card while they look for it was a no brainer for business.

Losing a debit or credit card can be a frustrating process.
A search mission ensues and that dreaded call to the bank must be made if the card doesn't turn up right away. After waiting for the card to arrive by snail mail, those nice little auto-fill card numbers and any associated bills need to be changed. Not only is replacing a missing card a painful experience for customers, but initiating replacement cards is costly for the bank as well. 

Nine times out of ten, that pesky plastic ends up finding its way back in a few days. At Huntington, looking out for customers and the bottom line meant that allowing customer to simply lock their card while they look for it was a no brainer for business.

Losing a debit or credit card can be a frustrating process.
A search mission ensues and that dreaded call to the bank must be made if the card doesn't turn up right away. After waiting for the card to arrive by snail mail, those nice little auto-fill card numbers and any associated bills need to be changed. Not only is replacing a missing card a painful experience for customers, but initiating replacement cards is costly for the bank as well. 

Nine times out of ten, that pesky plastic ends up finding its way back in a few days. 
At Huntington, looking out for customers and the bottom line meant that allowing customer to simply lock their card while they look for it was a no brainer for business.

Losing a debit or credit card can be a frustrating process.
A search mission ensues and that dreaded call to the bank must be made if the card doesn't turn up right away. After waiting for the card to arrive by snail mail, those nice little auto-fill card numbers and any associated bills need to be changed. Not only is replacing a missing card a painful experience for customers, but initiating replacement cards is costly for the bank as well. 

Nine times out of ten, that pesky plastic ends up finding its way back in a few days. 
At Huntington, looking out for customers and the bottom line meant that allowing customer to simply lock their card while they look for it was a no brainer for business.

Losing a debit or credit card can be a frustrating process. A search mission ensues and that dreaded call to the bank must be made if the card doesn't turn up right away. After waiting for the card to arrive by snail mail, those nice little auto-fill card numbers and any associated bills need to be changed. Not only is replacing a missing card a painful experience for customers, but initiating replacement cards is costly for the bank as well. 

Nine times out of ten, that pesky plastic ends up finding its way back in a few days. At Huntington, looking out for customers and the bottom line meant that allowing customer to simply lock their card while they look for it was a no brainer for business.

Competitive Audit

After assessing the user needs and the goal of the project, I conducted a competitive analysis to understand how other banks had implemented similar card control features to see what was working well and what wasn't. 

After assessing the user needs and the goal of the project, I conducted a competitive analysis to understand how other banks had implemented similar card control features to see what was working well and what wasn't. 

After assessing the user needs and the goal of the project, I conducted a competitive analysis to understand how other banks had implemented similar card control features to see what was working well and what wasn't. 

Screen Shot 2019-06-22 at 2.59.20 PM

CITI QUICK LOCK

• clear instructions provided — "tap to lock"
• accessible indication of status (red/green & active/locked)
• option to report card lost or stolen in close proximity

Screen Shot 2019-06-22 at 2.58.50 PM

DISCOVER FREEZE IT

• heavy use of notification banners
• primary CTA in modal, "freeze account," is clear and highlighted
• too many cluttered screens without a clear hierarchy

Screen Shot 2019-06-22 at 2.58.36 PM

CAPITAL ONE LOCK CARD

• not obvious that "card in on" is tappable to access locking feature
• no permanent location within the menu structure

• not obvious that "card in on" is tappable
• no permanent location within the menu structure

Screen Shot 2019-06-22 at 2.58.25 PM

SIMPLE BANK CARD BLOCK

• combined view of card activities such as block card and pin reset
• clean visual language, particularly use of active/blocked banner

Current State Analysis

Finding a home for card lock within the Huntington Mobile app was the next step. The current card features such as 'activate card' and 'change pin' utilized different top navigation and the menu tab was poorly organized and visually outdated. 

Finding a home for card lock within the Huntington Mobile app was the next step. The menu tab of the app was poorly organized and visually outdated. Additionally, the current card features such as 'activate card' and 'change pin' utilized different top navigation. The change pin page was wrapped into the app from the online banking site.

Finding a home for card lock within the Huntington Mobile app was the next step. The menu tab of the app was poorly organized and visually outdated. Additionally, the current card features such as 'activate card' and 'change pin' utilized different top navigation. The change pin page was wrapped into the app from the online banking site.

dArtboard 2
dArtboard 4
dArtboard 5
dArtboard 3

App Navigation Research

App Navigation Research

I advocated that we study the app's navigation in order to organize the existing features, accomodate a new one, and give the navigation a face lift. As part of the exploration, a UX research colleague and I conducted an audit of 30+ mobile apps. We documented the nav structure employed by each app to see which layouts were most common.

For iOS, combining bottom navigation with top tabs was the most common approach whereas Android apps frequently used a hamburger menu with optional top tabs. We learned, however, that Material Design would soon be moving away from the hamburger menu in favor of bottom navigation as well. We decided to stick with our current bottom navigation approach.

I advocated that we study the app's navigation in order to organize the existing features, accomodate a new one, and give the navigation a face lift. As part of the exploration, a UX research colleague and I conducted an audit of 30+ mobile apps. We documented the nav structure employed by each app to see which layouts were most common.

For iOS, combining bottom navigation with top tabs was the most common approach whereas Android apps frequently used a hamburger menu with optional top tabs. We learned, however, that Material Design would soon be moving away from the hamburger menu in favor of bottom navigation as well. We decided to stick with our current bottom navigation approach.

I advocated that we study the app's navigation in order to organize the existing features, accomodate a new one, and give the navigation a face lift. As part of the exploration, a UX research colleague and I conducted an audit of 30+ mobile apps. We documented the nav structure employed by each app to see which layouts were most common.

For iOS, combining bottom navigation with top tabs was the most common approach whereas Android apps frequently used a hamburger menu with optional top tabs. We learned, however, that Material Design would soon be moving away from the hamburger menu in favor of bottom navigation as well. We decided to stick with our current bottom navigation approach.

NavigationResearch-01

In our research, we also found that many apps used the last tab in the bottom navigation as a place to house additional menu options as Huntington's app did. Sticking with our current IA, I went about organizing the app menu and finding a home for the card lock feature. I explored the information architecture of the menu based on the usage of each of the menu pages, stakeholder input, and tree test findings. I combined similar features without burying high-usage pages below multiple landing pages.

In our research, we also found that many apps used the last tab in the bottom navigation as a place to house additional menu options. With this decision in place, I went about organizing the app menu and finding a home for the card lock feature. I explored the information architecture of the menu based on the usage of each of the menu pages, stakeholder input, and tree test findings. I tried to combine similar features without burying high-usage pages below multiple landing pages.

In our research, we also found that many apps used the last tab in the bottom navigation as a place to house additional menu options. With this decision in place, I went about organizing the app menu and finding a home for the card lock feature. I explored the information architecture of the menu based on the usage of each of the menu pages, stakeholder input, and tree test findings. I tried to combine similar features without burying high-usage pages below multiple landing pages.

1
3
2
Mobile Menu May2018

Wireframing & User Testing

Wireframing & User Testing

After exploring three different flows for card lock, we chose an approach that combined card control functions like activate, change pin, report lost stolen, and, of course, lock card. With this approach, the activate card page would not display in the menu when there were no cards to activate. Additionally, combining all functions into a manage cards page allowed for a clean view of all of a user's cards in one place.

When we tested this flow, it passed user validation research with flying colors. All 12 participants were able to complete the lock and unlock tasks and offered favorable remarks regarding the hierarchy of information and layout of the tested pages.

After exploring three different flows for card lock, we chose an approach that combined card control functions like activate, change pin, report lost stolen, and, of course, lock card. With this approach, the activate card page would not display in the menu when there were no cards to activate. Additionally, combining all functions into a manage cards page allowed for a clean view of all of a user's cards in one place.

When we tested this flow, it passed user validation research with flying colors. All 12 participants were able to complete the lock and unlock tasks and offered favorable remarks regarding the hierarchy of information and layout of the tested pages.

After exploring three different flows for card lock, we chose an approach that combined card control functions like activate, change pin, report lost stolen, and, of course, lock card. With this approach, the activate card page would not display in the menu when there were no cards to activate. Additionally, combining all functions into a manage cards page allowed for a clean view of all of a user's cards in one place.

When we tested this flow, it passed user validation research with flying colors. All 12 participants were able to complete the lock and unlock tasks and offered favorable remarks regarding the hierarchy of information and layout of the tested pages.

After exploring three different flows for the card lock function, we chose an approach that combined card lock functions like activate, change pin, report lost stolen, and, of course, lock card. With this approach, the activate card page would not display in the menu when there were no cards to activate. Additionally, combining all functions into a manage cards page allowed for a clean view of all of a user's cards in one place.

When we tested this flow, it passed user validation research with flying colors. All 12 participants were able to complete the lock and unlock tasks and offered favorable remarks regarding the hierarchy of information and layout of the tested pages.

After exploring three different flows for the card lock function, we chose an approach that combined card lock functions like activate, change pin, report lost stolen, and, of course, lock card. With this approach, the activate card page would not display in the menu when there were no cards to activate. Additionally, combining all functions into a manage cards page allowed for a clean view of all of a user's cards in one place.

When we tested this flow, it passed user validation research with flying colors. All 12 participants were able to complete the lock and unlock tasks and offered favorable remarks regarding the hierarchy of information and layout of the tested pages.

cardlockflow-02
manage_cards-01

MANAGE CARDS MENU

• displays card status both visually and written out for accessibility
• card numbers displayed for user recognition

• displays card status both visually and written out for accessibility
• card numbers displayed for user recognition

active-01

ACTIVE DEBIT CARD

ACTIVE DEBIT CARD

• displays card image and associated accounts for user recognition
• colocated card control functions for easy access

• displays card image and associated accounts for user recognition
• colocated card control functions for easy access

locked_1

LOCKED CREDIT CARD

• when card is locked, the unlock card action becomes primary with report card lost or stolen immediately following

not_activated_3

CARD NOT ACTIVATED

• when a card is not active, this becomes the main action on the manage cards page

Delivered Designs

After wireframing and testing, I worked with the product lead, content author, visual designer, and IT teams to develop remaining UX deliverables, guide requirement sessions, and support delivery. The feature has been highly successful with Huntington customers and is a well-utilized feature within the mobile app and retail online banking site.

After wireframing and testing, I worked with the product lead, content author, visual designer, and IT teams to develop remaining UX deliverables, guide requirement sessions, and support delivery. The feature has been highly successful with Huntington customers and is a well-utilized feature within the mobile app and retail online banking site.

After wireframing and testing, I worked with the product lead, content author, visual designer, and IT teams to develop remaining UX deliverables, guide requirement sessions, and support delivery. The feature has been highly successful with Huntington customers and is a well-utilized feature within the mobile app and retail online banking site.

Mobile App

Screen Shot 2019-06-24 at 1.19.37 PM
Screen Shot 2019-06-24 at 1.19.55 PM
Screen Shot 2019-06-24 at 1.20.21 PM
Screen Shot 2019-06-24 at 1.20.49 PM

Retail Online Banking Site

Screen Shot 2019-06-24 at 1.21.15 PM
Modals-01

Keep on exploring...

IxDA ColumbusCommunity Leadership

Design Science SynthesisExhibit & Environmental Design