how fathead conquered responsive design and increased revenue

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

michaellayne@fathead.com

@md_layne

YOUR SPEAKERS

JEN

RADEMACHERCHIEF INFORMATION OFFICER

jenniferrademacher@fathead.com

@jenrademacher

ARI WEILVP PRODUCT MARKETING

aweil@yottaa.com

@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

michaellayne@fathead.com

@md_layne

THANK YOU!A LINK TO THE RECORDING WILL BE SENT TO ALL ATTENDEES

JEN

RADEMACHERCHIEF INFORMATION OFFICER

jenniferrademacher@fathead.com

@jenrademacher

ARI WEILVP PRODUCT MARKETING

aweil@yottaa.com

@aweil