15 Best Practices for Designing Credit Card Sites

1
15 Best Practices for Designing Credit Card Sites
User Experience Best Practices

Unparalleled Insights. Exceptional Experiences.
AnswerLab delivers the insights and advice that shape exceptional digital experiences. Our proprietary
solutions and objective user experience experts enable the world’s leading brands to dramatically
improve marketing effectiveness and product performance. We help you envision new digital marketing
opportunities and products, optimize existing ones, and measure their impact.
2

Credit Card Consumers Expect Better Digital Experiences
3
More than 50% of banking consumers opened or
closed at least one financial account in the past
year and 40% plan to do so in the coming year.*
*Source: Ernst & Young Global Consumer Banking Survey, 2013
Banking consumers rely on digital channels to research and manage
their credit accounts. Banks can attract new consumers – and keep the
ones they have – by ensuring they are meeting consumers’ needs and
exceeding their expectations. But what are their needs? And what is the
ideal user experience to meet those needs?
AnswerLab’s user experience experts have conducted more than 200
interviews with banking consumers to understand how financial services
brands can optimize the customer experience. We’ve distilled our
insights into 15 Best Practices for Designing Credit Card Websites.

Designing for Credit Card Sites
4
STREAMLINE INFORMATION
1. Provide Credit Card Matching Tools
2. Design Easy-to-Read Comparison Charts
3. Deliver Progressive Disclosure of Information
4. Make FAQs and Help Sections Easily Accessible
5. Provide Clear Information About Fraud Protection
PROVIDE VISUAL EXAMPLES
6. Include Demos of Credit Card Management Tools
7. Provide Rewards and Savings Calculator Tools
SIMPLIFY THE APPLICATION PROCESS
8. Utilize Prominent and Consistent Calls to Action
9. Show Visual Indicators of Progress
10. Optimize Application Forms for Mobile
11. Increase Confidence in Security
MAKE IT EASY TO USE ON ANY DEVICE
12. Allow for Seamless Experiences Across Devices
13. Utilize the Latest Technologies for Mobile Access
HIGHLIGHT CARD BENEFITS
14. Surface Card Benefits Upfront
15. Provide Streamlined Management of Rewards
Best
Practices
BEST PRACTICES

5
©2015 AnswerLab. All rights reserved.

Consumers browse, research and compare their options when looking for
a new credit card. This section explores how brands can streamline onsite
information to increase consumer confidence and guide them towards
faster decisions.
6
BEST PRACTICES
1. Provide Credit Card Matching Tools
2. Design Well-Formatted Comparison Charts
3. Deliver Progressive Disclosure of Information
4. Make FAQs and Help Sections Easily Accessible
5. Provide Clear Information About Fraud Protection

Consumers appreciate onsite card matching
tools that can lead them to 2-3 card
recommendations with explanations for why
each card is a good fit. Tools that provide this
tailored guidance increase consumer trust in
the brand.
7
Provide Credit Card Matching Tools1
[call out if needed]
Design Principle
Utilize matching tools such as quizzes to
provide recommendations based on
individual financial needs.
Example from American Express website

Consumers highly value side-by-side card
comparisons. This allows them to easily evaluate
card APRs, rewards, fees, security, etc.
Complicated or difficult-to-read comparison charts
may frustrate consumers, leading them to
abandon the process.
8
Design Easy-To-Read Comparison Charts2
[screenshot illustrating
the best practice. Grey
box is placeholder, not a
frame/background/border.
Delete and replace with
screenshot] Key Takeaway
Example from Citibank website
Design Principle
Show comparisons in simple chart
format and display enough
information above the fold for easy
discoverability and readability.

Consumers like knowing that all of the information needed to make a card decision is available
onsite; however, seeing too much “fine print” at once can be overwhelming. Consumers who are
able to access the information at their own pace feel more in control and are more likely to
stay focused on the task.
9
Deliver Progressive Disclosure of Information3
Design Principle
Utilize accordion
formats or hover-overs
to allow consumers to
view information as
needed.

Consumers are looking for quick
answers when they have questions.
Sites that have easily accessible FAQs
and customer service information will
help keep consumers on-task when
questions arise.
10
Make FAQs and Help Sections Easily Accessible4
screenshot] Design Principle
Make FAQ/Help sections easily
accessible from the homepage
and label any ambiguous icons.
Example from Citibank website

Consumers want to know upfront that a credit card will not hold them liable for fraudulent card activity.
Brands that provide clear assurance of hassle-free protection will increase consumer interest and
confidence in applying for the card.
11
Provide Clear Information About Fraud Protection5
Example from Capital One website
Design Principle
Provide highly visible
information about fraud
coverage and alerts.

12

Consumers want to know how much a credit card will support and benefit
their individual spending habits, particularly with respect to rewards. This
section discusses how to utilize data visualizations to increase the likelihood
of application completions.
13
BEST PRACTICES
6. Include Demos of Credit Card Management Tools
7. Provide Rewards and Savings Calculator Tools

Consumers want cards that provide tools to
track and manage spending. Visuals of the
card’s account management tools can drive
deeper engagement early in the selection
process and increase confidence in the card
choice.
14
Include Demos of Card Management Tools6
Example from Discover website
Design Principle
Provide demo dashboards that feature
data visualizations and account
management tools.

Design Principle
Calculator tools allow consumers
to better understand rewards and
savings before applying.
When browsing cards, consumers appreciate tools that allow them to calculate how their individual
spending habits will affect their rewards. Onsite calculator tools that demonstrate the card’s
benefits in a personalized way increase comprehension and the likelihood they will apply.
15
Provide Rewards and Savings Calculator Tools7
Example from Scotia website

16

Once a consumer selects a card, the online application process should be
quick and easy. In this section, we share tips to increase conversions by
making the application process as straightforward as possible.
17
BEST PRACTICES
8. Utilize Prominent and Consistent Calls-to-Action
9. Show Visual Indicators of Progress
10. Optimize Application Forms for Mobile
11. Increase Confidence in Security

Once consumers have selected a card, they look
for clear calls-to-action to take the next step and
apply. When consumers can easily identify those
calls-to-action, it makes it more likely they will
complete the application process.
18
Utilize Prominent and Consistent Calls-to-Action8
Design Principle
Provide easy-to-find, one-click
calls to action utilizing consistent
placement and design.

Consumers become frustrated when the
application process feels lengthier than
expected. Use design features showing
progress to set expectations and
minimize fatigue.
19
Show Visual Indicators of Progress9
screenshot]
Examples from Equifax and E*TRADE websites
Design Principle
Orient consumers throughout the
application process by showing the
steps along a progress bar.

Consumers are increasingly comfortable completing
financial applications on mobile devices. An application
experience that is optimized for mobile increases the
likelihood a consumer will apply when on-the-go.
20
Optimize Application Forms for Mobile10
screenshot]
Example from Capital One mobile app
Design Principle
Optimize forms for mobile utilizing features
such as number pads for entering digits
and auto-advance for going from one field
to the next.

Consumers want to know that their credit card provider
is protecting their personal financial information
throughout the application experience. Websites should
provide clear information about security measures to
increase trust in the brand.
21
Increase Confidence in Security11
screenshot]
Example from Bank of America website
Design Principle
Provide clear information, as well
as enhanced security options, that
lets consumers know their
information is protected.

22

Increasingly, consumers track and manage finances on the go. They
expect brands to provide access to the same content and features
across platforms. Learn how to increase consumer engagement by
optimizing for mobile.
23
BEST PRACTICES
12. Allow for Seamless Experiences Across Devices
13. Utilize the Latest Technologies for Mobile Access

Consumers expect to have access to the same features on
a mobile site or app as on a desktop site. A seamless
experience across devices encourages engagement and
allows consumers to easily pick up where they left off when
switching between devices.
24
Allow for Seamless Experiences Across Devices12
Design Principle
Provide consumers with the same
features and calls to action on all
devices, from browsing for cards and
applying to account management.
Example from Chase mobile app

Consumers value convenience when managing
their financial accounts on mobile apps. Mobile
designs can encourage interaction by utilizing
the latest technologies for login and account
management.
25
Utilize the Latest Technologies for Mobile Access13
Design Principle
Provide consumers with options that minimize
keystrokes, such as swipe access/fingerprint
recognition in lieu of passwords, as well as
one-touch payment options.

Consumers become frustrated when they cannot easily access and redeem
rewards and when they realize their card had benefits they weren’t utilizing.
In this section, we discuss how to build loyalty by increasing awareness of
benefits and redemption of rewards.
27
HIGHLIGHT CARD BENEFITS
BEST PRACTICES
14. Surface Card Benefits Up Front
15. Provide Streamlined Management of Rewards

Consumers are often unaware of card benefits
beyond points and rebates. Surfacing card
benefits early on builds awareness and enables
consumers to take advantage of their card’s
benefits, increasing loyalty to the card.
28
Surface Card Benefits Up Front14
Design principle
Surface card benefits early on in
the experience, even before
application, to increase
awareness and access.
Example from Discover website

Consumers often choose and continue to use a card based on
the rewards experience, and particularly the ease with which
they can view, manage, and redeem rewards. When
consumers don’t feel they are getting the most out of their card,
they are more likely to seek a new card to replace it.
29
Provide Streamlined Management of Rewards15
Example from Capital One mobile app
Design Principle
Keep rewards management and
redemption easily accessible on the
main site or app for a seamless user
experience.

30
METHODOLOGY
All studies were conducted by AnswerLab as one-on-one
interview sessions with over 200 consumers across the
United States.
Consumers performed key tasks on both desktop and mobile
devices for both live and prototyped websites/apps.
The results uncovered 15 UX Best Practices for Credit
Card Online Experiences, which we grouped into five
sections:
• Streamline Information
• Provide Visual Examples
• Simplify the Application Process
• Make it Easy to Use on Any Device
• Highlight Card Benefits

Want to Learn More?
31
Keep up-to-date on the latest AnswerLab research insights, get
access to best practices, and find out about upcoming UX events.
Sign up for our newsletter.
Read The Principles of Mobile Site Design white paper.
25 Design principles to answer the question “What makes a good
mobile site?”

Unparalleled Insights. Exceptional Experiences.
Thank You.
For follow-up questions about AnswerLab user experience
research services, contact:
info@answerlab.com

15 Best Practices for Designing Credit Card Sites

Recommended

Recommended

More Related Content

More from AnswerLab

More from AnswerLab (6)

Recently uploaded

Recently uploaded (20)

15 Best Practices for Designing Credit Card Sites

Editor's Notes