how fathead conquered responsive design and increased revenue
TRANSCRIPT
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
CUSTOMER WEBINAR WITH
RESPONSIVE DESIGN & HOW YOTTAA IMPROVED THE
MOBILE USER EXPERIENCE AND BOOSTED REVENUE
PERFORMANCE
ENGAGEMENT
IMPACT
AUTOMATION
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
MICHAEL LAYNEDIR. INTERNET MARKETING
@md_layne
YOUR SPEAKERS
JEN
RADEMACHERCHIEF INFORMATION OFFICER
@jenrademacher
ARI WEILVP PRODUCT MARKETING
@aweil
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
RESPONSIVE DESIGN:The Year-One Lessons That Build an Even Better Year Two
©2015, Fathead, LLC. All rights reserved.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
71.6%
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
DECEMBER 2011 – 19.6%
DECEMBER 2012 – 44.1%
DECEMBER 2013 – 55.0%
DECEMBER 2014 – 64.6%
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
QUESTION:
If you knew that most of your visitors came to your
site on phones and tablets, would you spend most
your time designing for desktop monitors?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
ANSWER:
That’s up to you…
…but, we asked ourselves that question as we set
out to create a 2nd generation responsive web
site…
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
…and these are the guiding principles that we came up
with…
• MOBILE FIRST
• MOBILE FAST
• COMPREHENSIVELY
RESPONSIVE
• BRAND FORWARD
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Fathead – what’s behind that catchy name?
We are:
a graphic design company
a partner to over 700 licensed brands
a Detroit based US manufacturer
a B2C online retailer
a wholesaler to online and brick & mortar
retailers
a B2B provider of creative design solutions
100+ highly motivated, creative people
in the business of selling fun
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Here are some samples of what we do:
The original and still most popular Fathead REAL.BIG. Wall Decal
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
The smaller Fathead Jr…
…and a Custom Creation of a personal photo that we turned into one of our
products
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
We have solutions for businesses and educational institutions as well
as events
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
The arguments in favor of responsive design
A great solution for a talented but resource-limited team
A handy solution for delivering screen-specific content
An efficient solution due to the single code base
A measurable solution for both web analytics and testing
As we deployed it, a largely marketing driven front end that is
nimble and powerful
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
The arguments against responsive design
It’s SO slow
We already built an app for that, so what’s the
point?
We’re going to have to rebuild everything, right?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
What we learned and what we changed
Design for mobile first
Load it as you need it – it’s SO MUCH FASTER!
Use fewer break points
Scale the images
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
What we learned and what we changed
Take and use feedback
Never stop testing
The front end is only as good as the management
of it
See your site in every way your customers do
Managing multiple views can make testing tough
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Obsessed with finding a better way
Creating a 2nd generation responsive site
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Strategic Principles:
MOBILE FIRST
Change mindset and approach: design every
aspect of the site for mobile phones first.
Make the site easy to use and fully functional on
a phone.
Let the larger screens flow from a mobile
foundation, adding to the experience and
making each view an enhanced version of the
site.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Strategic Principles:
MOBILE FAST
Every Second Counts. Do what it takes to speed
up page load times.
Take advantage of third party services. They’re
experts and can quickly improve performance.
Don’t rely on third party services. Build for speed
independently of those services.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Strategic Principles:
COMPREHENSIVE RESPONSIVENESS
Move beyond responsive web design into
responsive web experience.
Let responsive design be the means for meeting
and responding to the needs of online
customers, not the end for designers and
developers.
Make Happiness Happen.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Strategic Principles:
BRAND FORWARD
What they see is who and what you are. (especially for a graphics company). Every pixel matters.
Harness responsive design to the intent of the brand, not the other way around.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Cultural Guide Posts:
You’ll See It
When You Believe It
Creating a responsive web site is no small task.
If you begin by asking how, you may never get to what.
Start with what can be. Start with a vision.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Cultural Guide Posts:
Simplicity is Genius
Marketers, designers
and developers, take a
step back.
Customers, take a step
forward.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Cultural Guide Posts:
Innovation is Rewarded… (it’s fun to create something cool)
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Cultural Guide Posts:
…Execution is Worshipped (it’s even better to
succeed)
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
So, is it worth it?
25% increase in overall direct web revenue year
one.
300% increase in mobile revenue year one.
Mobile revenue outpaced mobile traffic year two.
Customer satisfaction scores nearing best-in-class.
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
To recap, here’s what we are currently focused on as
we create a 2nd generation responsive website:
• DESIGN FOR MOBILE FIRST
• FOCUS ON A FAST MOBILE EXPERIENCE
• THINK OF “RESPONSIVE” AS MORE THAN
DESIGN
• DON’T SACRIFICE BRAND FOR TECHNOLOGY
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
PERFORMANCE
ENGAGEMENT
IMPACT
AUTOMATION
Online-only retailer speeds up its responsive design site and realizes increased revenue
CASE STUDY:
+37% Time to Display
-4.6% Bounce Rate
+16% Revenue per Visitor
+14% Time on Site
This technology attacks the fundamental flaw in responsive design, which is sending everything and then hiding a bunch of stuff. It looks at the viewport first and says, ‘Tell me what you need.’
Michael Layne, Dir. Of Internet Marketing, Fathead
“ “
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
AppSequencingTM Omni-EngagementOptimize RWD User Experience and Mobile Performance
PERSONALIZED EXPERIENCE OPTIMIZATION
WITH YOTTAA, WHAT YOU SEE IS WHAT YOU GET
ON-DEMAND IMAGES & SOCIAL WIDGETS
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
Q&A
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
HOW DID YOU DETERMINE THAT MOBILE WAS A CRITICAL COMPONENT?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
HOW DID YOU EVOLVE FROM A DESKTOP WEBSITE TO MOBILE-FIRST & RWD?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
WHAT UNIQUE CHALLENGES HAVE YOU FOUND WITH REGARD TO TABLETS?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
WHAT WERE SOME OF THE OTHER ASSUMPTIONS FATHEAD WORKED THROUGH?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
HOW DID YOU FACE TRADE-OFFS BETWEEN SPEED, USER EXPERIENCE AND
CONVERSIONS?
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
YOU SPOKE ABOUT RWD & AWD, BUT HOW ABOUT RESS?(RESPONSIVE WITH SERVER-SIDE COMPONENTS)
Y O T T A A , I N C , © 2 0 1 5 A L L R I G H T S R E S E R V E D
MICHAEL LAYNEDIR. INTERNET MARKETING
@md_layne
THANK YOU!A LINK TO THE RECORDING WILL BE SENT TO ALL ATTENDEES
JEN
RADEMACHERCHIEF INFORMATION OFFICER
@jenrademacher
ARI WEILVP PRODUCT MARKETING
@aweil