TSX Webinar: User Experience (UX) Design Best Practices
Dec. 7, 2017
Presenter & Panelists
Grant Patten Digital Media & User Experience Specialist, CSIO
Al Schill President Schill Insurance Brokers
Michelle Meerse Marketing & Communications Manager Schill Insurance Brokers
Today’s Agenda • Definition of UX and Stats • UX Design – Planning Stage • Design & Implementation • Buying Tenant Insurance in the Broker Channel
• Consumer’s Path to Purchasing Insurance • Resources & Questions
Definition: What Is User Experience (UX)?
The totality of the experience a user has when interacting with a digital product – it can be their impressions and feelings, whether they’re successful, whether they feel like coming back again. Any single pain point can result in a lost sale, meaning insurance brokers need to pay special attention to their website and/or mobile app to ensure they attract and retain as much business as possible.
UX – By The Numbers ● For every dollar spent to resolve a problem during product design, $10 would be spent on the same problem during development and $100 or more if the problem had to be solved after the product’s release (Pressman, Software Engineering: A Practitioner’s Approach)
● Numerous industry studies have stated that every dollar spent on UX brings in between $2 and $100 dollars in return (Fast Company) ● 75% of users base your entire company’s credibility on your website’s design (Veopix Design)
The Planning Stage
UX Design Planning – Best Practices ● ● ● ●
Perform user research, e.g., interviews, surveys, web analytics If a redesign, test current site with users (usability test) Conduct competitive analysis Develop personas
usability testing session persona example
Poll Question – Audience
How much research did you do when planning the last design of your website and/or app?
Panelist Question
What kind of research and competitive analysis did you do during the planning stages of your website?
UX Design Planning – Sitemap
UX Design Planning – Prototyping (low fidelity)
UX Design Planning – Prototyping (medium)
UX Design Planning – Prototyping (hi-fi)
Design & Implementation
UX Design Implementation â—? Strong call-to-action (CTA) â—? Visually appealing user interface (UI)
http://schillinsurance.com/
Panelist Question
How did you come up with your website’s visual UI design and colour scheme?
UX Design Implementation â—? Responsive web design: web pages that detect the visitor's screen size and orientation and change the layout accordingly.
UX Design Implementation â—? Use real photos that appeal to your target audience and reflect your brand, not standard stock photos.
UX Design Implementation â—? Use real photos that appeal to your target audience and reflect your brand, not standard stock photos.
Panelist Question
How did you decide on the photography and imagery to use on your website?
The UX of Buying Tenant Insurance in the Broker Channel
UX Design – Tenant Insurance Example � While I visited many brokerage websites, three in particular stood out as demonstrating both best practices and areas for improvement:
Strengths
Brokerage 1
Brokerage 2
Brokerage 3
Online quote form used progress bar
Simple online quote
Rapid customer service
Rapid customer service Opportunities for Improvement
Un-intuitive online quote Poor error handling
Meeting user expectations
Flow of online quote Paperless workflow
UX Design – Tenant Insurance Example ● Brokerage #1 and Error Handling: online quote form made effective use of a progress bar (also called “completeness meter”)
● Error message: “We’re sorry; your request cannot be processed at this time” … Jakob Nielson heuristic: “error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”
UX Design – Tenant Insurance Example ● Brokerage #1 and Error Handling: the first page of the form had asked me for my contact information, which raised two questions… 1. Why did I have to provide this information up front instead of obtaining the quote first and then deciding if I wanted to follow up? 2. If the site already had my contact information, why did the error message not include an option for the broker to contact me instead?
UX Design – Tenant Insurance Example ● Brokerage #2 and User Expectations: followed the Nielsen heuristic of aesthetic and minimalist design by being simple and uncluttered with unnecessary fields. ● Luke Wroblewski study: an 11-field form was shortened to 4 fields, there was a massive increase in both submissions (160%) and conversions (120%).
Panelist Question
Have you simplified the forms on your website as much as possible and if so, how did you go about doing that?
UX Design – Tenant Insurance Example ● Brokerage #2 and User Expectations: received an automated email from the President of the brokerage, personalized with my first name and promising a follow-up from a broker… ● Expectations not met: despite requesting email, my broker followed up by telephone instead. Would this brokerage fall short of expectations in the future in a situation with higher stakes?
UX Design – Tenant Insurance Example ● Brokerage #3 and Paperless Workflow: the online quote featured a progress bar (a strength), but also required my contact information upfront (an example of unintuitive flow). ● Their follow-up customer service was excellent, arriving when and how I expected it to (by email). ● Not using eSignatures: the PDF I received looked as though it had been printed and scanned rather than generated directly from their broker management system.
UX Design – Tenant Insurance Example � Brokerage #3 and Paperless Workflow: with eSignatures, brokers can send a clean, original PDF to be signed by customers directly on their mobile devices or computers.
https://www.csio.com/resources-tools/paperless-solutions/esignatures
Panelist Question
Do you use eSignatures and, if so, how do you think it has improved the customer/user experience at your brokerage?
UX and the Consumer’s Path to Purchasing Insurance
The Consumer’s Path to Purchasing Insurance 3 Stages:
THINKING
RESEARCHING
PURCHASING
9
3
2
Days
Days
Days
Where you first begin to think about acquiring insurance, but you haven’t yet started to do any research.
Where you take on a more active role by researching and consulting a variety of sources.
Where a majority of your research is complete. You may have a fairly good idea of what product you want to go with, and will start visiting branches to discuss options with someone in person, or go online and apply for the product.
Thinking (9 days) 33
PATH TO PURCHASE - THINKING Top 5 Triggers
35
Website/Brand Best Practices Telling your story online
“No one connects on a deep level with an insurance business. They connect with people who just happen to sell insurance. And every one of your clients is a client of yours because of that reason. Because of you, because of whoever it is inside your agency that they built a relationship with, that’s why they currently do business with you. So just think about that.” - Agency Nation www.agencynation.com
Example of Brokerage Telling a Great Story Online
Panelist Question
How are you conveying your brokerage’s personality through your online presence?
Research (3 days)
PATH TO PURCHASE - RESEARCHING Role of Source - Internet
(Q10) Now we would like to know how each of the following sources helped you as you researched and gathered information about your most recent purchase/acquisition of .... Please indicate the statements you feel apply to each source. (Select all that apply for each source) Base: Used Internet (n=115)
Search Engine Optimization - SEO
= Location, Location, Location!
SEO Best Practices
Content Creation
Panelist Question
What does your brokerage do in terms of ongoing content creation for SEO?
Purchase (2 days)
PATH TO PURCHASE - PURCHASING Needs of Consumers from Brokers
Hand-Holder Do little to no research myself, FS provider guides /informs me
Self Serve Do all research myself, & make the acquisition myself/ FS provider helps to write up the application document
Facilitator I do some research and the FS provider offers some guidance/info
(Q36) Which of the following would you prefer when it comes to the experience with a financial services provider through the entire purchase/acquisition process? (Select one) Base: Overall (n=479)
PATH TO PURCHASE - PURCHASING 3 Pillars for Optimal User Experience (UX) on Mobile
Speed
Usability
Features that Matter
PATH TO PURCHASE - PURCHASING Most Annoying Thing EVER
Page Load Speed
57%
of consumers will wait no more than three seconds before abandoning a mobile website
Forrester Consulting on behalf of Akamai Technologies, n=1,048 U.S. online consumers, September 2014
Great Resource – PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
PATH TO PURCHASE - PURCHASING Usability - The Power of the Thumb
Tinder
Hotel Tonight
PATH TO PURCHASE - PURCHASING Usability - Use the Native Features of Mobile
PATH TO PURCHASE - PURCHASING Usability - Create Seamless Experiences
Great Resource – UserTesting.com
https://www.usertesting.com/
Panelist Question
What is your advice to brokers interested in building a website of comparable quality to yours?
UX / Usability – Recommended Reading • Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug
• The Elements of User Experience by Jesse James Garrett
• Web Form Design: Filling in the Blanks by Luke Wroblewski
Learn More at CSIO.com
Members Section gives access to: • CSIO Forms
• TSX Webinars (accredited)
Educational Resources: •Infosheets, Articles, White papers •Videos •Twitter: @CSIO •Email: info@csio.com
Thank you for attending our Talk, Share, eXchange!
Recording of the webinar (and slides) can be found here: https://www.csio.com/news-events/tsx-webinars CSIO.com