TSX Webinar: User Experience (UX) Design Best Practices

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