User Experience Best Practices

Transcription

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

2 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

3 Credit Card Consumers Expect Better Digital Experiences 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.* 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. *Source: Ernst & Young Global Consumer Banking Survey,

4 Designing for Credit Card Sites Best BEST PRACTICES Practices 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 4

5 STREAMLINE INFORMATION 5

6 STREAMLINE INFORMATION 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. 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 6

7 1 Provide Credit Card Matching Tools 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. Design Principle [call out Utilize if needed] matching tools such as quizzes to provide recommendations based on individual financial needs. Example from American Express website 7

8 2 Design Easy-To-Read Comparison Charts [screenshot illustrating the best practice. Grey box is placeholder, not a frame/background/border. Delete and replace with screenshot] 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. Design Principle Key Takeaway Show comparisons in simple chart format and display enough information above the fold for easy discoverability and readability. Example from Citibank website 8

9 3 Deliver Progressive Disclosure of Information 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. Design Principle Utilize accordion formats or hover-overs to allow consumers to view information as needed. Example from American Express website 9

10 4 Make FAQs and Help Sections Easily Accessible [screenshot illustrating the best practice. Grey box is placeholder, not a frame/background/border. Delete and replace with screenshot] 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. Design Principle Make FAQ/Help sections easily accessible from the homepage and label any ambiguous icons. Example from Citibank website 10

11 5 Provide Clear Information About Fraud Protection 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. Design Principle Provide highly visible information about fraud coverage and alerts. Example from Capital One website 11

12 PROVIDE VISUAL EXAMPLES 12

13 PROVIDE VISUAL EXAMPLES 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. BEST PRACTICES 6. Include Demos of Credit Card Management Tools 7. Provide Rewards and Savings Calculator Tools 13

14 6 Include Demos of Card Management 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. Design Principle Provide demo dashboards that feature data visualizations and account management tools. Example from Discover website 14

15 7 Provide Rewards and Savings Calculator Tools 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. Design Principle Calculator tools allow consumers to better understand rewards and savings before applying. Example from Scotia website 15

16 SIMPLIFY THE APPLICATION PROCESS 16

17 SIMPLIFY THE APPLICATION PROCESS 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. 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 17

18 8 Utilize Prominent and Consistent Calls-to-Action 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. Design Principle Provide easy-to-find, one-click calls to action utilizing consistent placement and design. Example from American Express website 18

19 9 Show Visual Indicators of Progress [screenshot illustrating the best practice. Grey box is placeholder, not a frame/background/border. Delete and replace with screenshot] Consumers become frustrated when the application process feels lengthier than expected. Use design features showing progress to set expectations and minimize fatigue. Design Principle Orient consumers throughout the application process by showing the steps along a progress bar. Examples from Equifax and E*TRADE websites 19

20 10 Optimize Application Forms for Mobile [screenshot illustrating the best practice. Grey box is placeholder, not a frame/background/border. Delete and replace with screenshot] 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. 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. Example from Capital One mobile app 20

21 11 Increase Confidence in Security [screenshot illustrating the best practice. Grey box is placeholder, not a frame/background/border. Delete and replace with screenshot] 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. Design Principle Provide clear information, as well as enhanced security options, that lets consumers know their information is protected. Example from Bank of America website 21

22 MAKE IT EASY TO USE ON ANY DEVICE 22

23 MAKE IT EASY TO USE ON ANY DEVICE 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. BEST PRACTICES 12. Allow for Seamless Experiences Across Devices 13. Utilize the Latest Technologies for Mobile Access 23

24 12 Allow for Seamless Experiences Across Devices 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. 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 24

25 13 Utilize the Latest Technologies for Mobile Access 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. 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. 25

26 HIGHLIGHT CARD BENEFITS 26

27 HIGHLIGHT CARD BENEFITS 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. BEST PRACTICES 14. Surface Card Benefits Up Front 15. Provide Streamlined Management of Rewards 27

28 14 Surface Card Benefits Up Front 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. Design principle Surface card benefits early on in the experience, even before application, to increase awareness and access. Example from Discover website 28

29 15 Provide Streamlined Management of Rewards 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. Design Principle Keep rewards management and redemption easily accessible on the main site or app for a seamless user experience. Example from Capital One mobile app 29

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 30

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

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