UX STRAT USA 2017: Ruth Buchanan, "Co-Designing Dropbox Innovations with Customers"
How to improve your customers ux
-
Upload
sarah-fletcher -
Category
Mobile
-
view
85 -
download
0
Transcript of How to improve your customers ux
www.ibeccreative.com
Learn How To Improve Your
Web Customer Experience
1
Web Design & Digital Marketing
In Portland, Maine
2
Founded in 2006 | Google Partnerswww.ibeccreative.com
Matt Rideout - Digital Marketing Manager
www.ibeccreative.com
High Impact + Low Investment Greatest Value
Amazon Link
Today● How And Where To Focus Website Improvements● Latest And Most Important Website Experience Trends● Why Measure Qualitative Behaviors● How It Translates To Website Updates That Make An Impact● Affordable Tools You Should Be Using● Examples of low investment tactics that deliver high impact
3
www.ibeccreative.com
Going Past The Analytics Numbers...
4
Looking At Visitor Behavior
www.ibeccreative.com
Stop Throwing Away Money On Useless Updates
5
39% of E-
Commerce Sites Report Reduced Conversion Rate After RedesignForrester Research, Inc. 2012
www.ibeccreative.com
Money DrainerDriving Traffic To A Site That Can’t Convert
6
Organic Search Traffic
Paid Advertising & Traditional Advertising
Social Media
Referral Traffic / Networking
Public Relations / Earned Media
Search Engine Marketing
Your Website Performance Directly Impacts The Cost
Effectiveness Of These Channels.
www.ibeccreative.com 7
www.ibeccreative.com
Design is your first impressionCut bounce rate in ½, Doubled Time on Site, SAME RESORT!
5 Year Difference
8
www.ibeccreative.com
… A lot has changed since 2012The Problem
9
2007 2012
www.ibeccreative.com
5 Years…
Even 2 Years
Is too long to wait to make improvements
10
www.ibeccreative.com
So Many Variables
A complete refresh is like the WORST multivariate test ever
Each variable impacts your conversion rate and performance, it is NOT POSSIBLE to address all of them at once with a complete redesign.
11
Key Messages & Content
Images / Photos
User Flow
Design Elements
Tone / Language
Navigation
XCall-To-Actions
UI / Layouts
Offer / Pricing
100 Different Pages
www.ibeccreative.com
Consider a redesign if...● Updates are costly and difficult
● Underlying platform is obsolete or poorly supported
● Not conducive to ongoing iterative improvements
Your new site should be focused on improving your ability to improve it,easily and affordably.
12
Reasons For A Redesign Ancient Architecture
www.ibeccreative.com
Reasons For A Redesign“Responsive conversions” are usually not worth the cost. Do a mobile first redesign.
13
Site Not Responsive
Desktop First Design / Responsive Conversion Mobile First Design (best)
● Design will be overly complex● Will be forced to cram your desktop experience
into smaller formats● More expensive to code desktop first responsive● Site will inherently be heavier / slower
● Design will focus on key messaging and most important features
● Inherently simpler, lightweight, optimized● Mobile layouts will easily transfer simple,
elegant and beautiful to desktop layouts where you can add elements as appropriate
● Easier to implement a LEAN strategy with this (see next slides)
● Forced to think more about planning user experiences up front
Read More About Thishttps://codemyviews.com/blog/mobilefirst
www.ibeccreative.com
Mobile FirstPrototyping &Design
14
www.ibeccreative.com 15
This Is Real… iBec Client Device Stats
2016 Started Mobile Dominant
www.ibeccreative.com
Separate Mobile & Desktop Sites?
16
Just Say NoResponsive Is The Way To Go
Day’s Jewelers had visits from over 500 different screen resolutions in February 2016
One screen resolution can potentially be several actual size dimensions in real life. Pixels are not all the same physical size.
Your site has to look good everywhere. Mobile -> Tablet -> Desktop oversimplifies the situation.
www.ibeccreative.com
So.. Many.. Devices..
17
Device Apple iPad Pro
Tablet? YesiOS operating system detected
Desktop? YesSame screen resolution as a desktop
Touch? MaybeBluetooth mouse compatible
Example:Your menu needs to work on desktop size touch screens.
No More Hover State
www.ibeccreative.com
</mobile-rant>Mobile is really, really important
18
www.ibeccreative.com
Website Timeline Comparisons
19
1 Year Strategy - 100% Spec'd Project with Large Investment, All Features Launched at Once
time
Large Investment, High-Risk Development Launch Fail
Learn Doing Better
Add Complexity Learn Doing Better Change Learn Fail
time
Launch
1 Year of Rapid Iterative Changes
Small Investment
Traditional Timeline
Lean Timeline (Preferred)
www.ibeccreative.com
Choose Iterative Design
20
V1Bounce Rate: 47%Conversion Rate: 5%
V2Bounce Rate: 39%Conversion Rate: 6.95%
V3Bounce Rate: 34%Conversion Rate: 8.18%
Basic iBec 30-day Website
6 Month Timeline, 63% Improvement
www.ibeccreative.com
Where Do We Start?
Trust Data, Not Lore.
If you're making decisions with bad data
You're making bad decisions
21
www.ibeccreative.com 22
% Of Visitors Submitting Contact Form
% Of Visitors Clicking Email Links
% of Visitors Donating % of Visitors Calling
Website Goals: Impact Business Outcomes
% Of Visitors Making Purchases
% Of Visitors Subscribing to Email% Of Visitors Bouncing
% of Visitors Using Live Chat
www.ibeccreative.com
Step 1 - Measure Everything
23
Tag Manager Tutorial
www.ibeccreative.com
Why Don’t They Do What You Want?1. Start at the bottom of your funnel2. Find the bottleneck to make the greatest impact
24
% Of Visitors Completing Checkout
% Of Visitors Checking Out
% of Visitors Viewing Products
% of Visitors Adding to Cart
Bounce Rate
Develop a Hypothesis You Can Test
Good Good
Bad
OkayGood
www.ibeccreative.com
Google Analytics Goal Funnels
25
www.ibeccreative.com
Google Analytics New Data Available
26
Goal flow report
www.ibeccreative.com
Google Analytics New Data Available
27
FunnelVisualization
www.ibeccreative.com
Hotjar Funnel Tracking
28
Funnel Visualization
www.HotJar.com Lots of features for free
Pro is only $9 / month
www.ibeccreative.com
Why Don’t They Convert?
Bounce - Visitor leaves website without taking any action
Why People Bounce● Site immediately unappealing● Doesn’t line up with what they’re wanting● Don’t see what they are looking for● Could be traffic source related
29
Bounce Rate
www.ibeccreative.com 30
www.ibeccreative.com 31
sugarloaf
www.ibeccreative.com
Don’t Take My Word For It!
32www.VWO.com $49 / mo
www.ibeccreative.com
Super Easy Visual Editing - Automatic A/B Test
33
www.ibeccreative.com 34
www.ibeccreative.com 35http://exisweb.net/menu-eats-hamburger
MENU Performs 20% Better
www.ibeccreative.com 36
Don’t take my word for itIf you could easily prove that one simple change increased calls by just 1% - wouldn’t you do it?
www.ibeccreative.com 37
Month-Month Comparisons Don’t Cut It
VWO splits your traffic in real time.Even if your whole site’s conversion rate drops during a month, you can still identify a winning variation that did the least bad.
www.ibeccreative.com
ALWAYS BE TESTING
38
Any time you’re not testing, you’re forgoing opportunity for increased performance.
www.ibeccreative.com
People Fly Through Competitor Websites Like It’s Tinder
39
“Travelers Visit 38 Sites Before Booking a Vacation”Skift.com 2013
www.ibeccreative.com
Don’t Make Your Visitors Think - They Are Dumb
“My credit is too bad”
40
www.ibeccreative.com
How Do You Know What To Improve?
41
www.ibeccreative.com 42
“Not sure if this is the best price”
“Having Trouble Viewing Different
Offers”
“Can’t Find Cancellation Policy”
“Is there air conditioning?”
www.ibeccreative.com
Screen Recordings
43
www.ibeccreative.com
Screen Recordings - Identify Issues You Can Fix
44
Don’t blame seasonality or the weather - it’s probably something you can fix!
www.ibeccreative.com
Screen Recordings - Identify Issues You Can Fix
45
Don’t blame seasonality or the weather - it’s probably something you can fix!
www.ibeccreative.com
Heatmaps
46
www.ibeccreative.com
Scroll Tracking
47
Long scrolling pages are popular.. But do they scroll?
Can a simple arrow make sure people see the packages just below the fold?
www.ibeccreative.com
Heatmaps & Grabbing Attention
48
Package Click Rate
No Tiles 20.88%
With Tiles 41.97%
Heatmap data led us to create visual package graphics that doubled click through to individual package categories compared to menu links alone.
www.ibeccreative.com 49
Iterative Design UpdatesVs. Last Year
17% improved bounce rate
18.66% increase in duration
46% increase in pages / visit
7.15% conversion rate lift(this year, last year we didn’t have this metric)
UX and Impact
● Same content, presented in a more engaging format
● Same call-to-actions, presented in a more intuitive way
● All Desirable Actions 100% Measurable
○ Open Account Online○ Live Chat○ Call Customer Service○ Email Customer Service
Time on Page: 50% Improvement
Conversion Rate: 300% Improvement
Version 1 Version 3
Version 1 Verson 2
Restyled Quote FormForm Conversion Rate: 5.11% Improvement
Lead Growth: 2 Additional Customers Per Month, not counting calls
www.ibeccreative.com 52
Web Design & Digital Marketing
In Portland, Maine
www.ibeccreative.com
?Question Time