3DDATA-DRIVEN DESIGN

1

65%O F M A R K E T E R S I N T H I S R O O M S A I D T H E Y D O N ’ T H AV E E N O U G H D ATA T O D O T H E I R J O B E F F E C T I V E LY.

65%

* who responded to my pre-conference survey

*

@oligardner #TuringFest

We did it because it was trendy

DESIGN DECISIONS NEED TO BE INFORMED BY DATA

NOT TRENDS@oligardner #TuringFest

BEING TRENDY DOESN’T MAKE IT RIGHT

Scrappy

@oligardner bit.ly/oli-tf

I interviewed and surveyed over 700 people who work on

marketing teams

DESIGNER COPYWRITER MARKETER

DESIGNER COPYWRITER MARKETER

DESIGNER COPYWRITER

Writers want me to start designing before they give me content.

MARKETER

81%O F D E S I G N E R S H AV E T O S TA R T T H E I R D E S I G N W O R K B E F O R E T H E Y R E C E I V E T H E C O P Y

81%“Design gets frustrating when you don't have everything you need from the beginning”

*

* % of designers polled in a survey regarding working in marketing

“It’s like painting by numbers.”

DESIGNER COPYWRITER

Writers don't get that search engines see things differently to humans.

MARKETER

DESIGNER COPYWRITER

Marketers have no understanding of customer behaviour.

MARKETER

DESIGNER COPYWRITER

they're too myopic and enjoy naval gazing.

MARKETER

na·vel-gaz·ing/‘ nāvel gāziNG/noun

self-indulgent or excessive contemplation of oneself…

DESIGNER COPYWRITER

…they don't respect designand think they know how it should be done.

MARKETERMARKETER

98%O F M A R K E T E R S S A I D T H E Y A R E R E S P O N S I B L E F O R G I V I N G D E S I G N F E E D B A C K T O D E S I G N E R S

98%*

* % of marketers polled in a survey regarding working with designers and copywriters in marketing

87%O F M A R K E T E R S W H O G I V E D E S I G N F E E D B A C K B E L I E V E T H E Y A R E Q U A L I F I E D T O D O S O .

87%*

* % of marketers polled in a survey regarding working with designers and copywriters in marketing

87%O F M A R K E T E R S W H O G I V E D E S I G N F E E D B A C K B E L I E V E T H E Y A R E Q U A L I F I E D T O D O S O .

87%*

* % of marketers polled in a survey regarding working with designers and copywriters in marketing

DESIGNER COPYWRITER MARKETER

DESIGNER COPYWRITER MARKETER

Designers are too sensitive.

Are you a designer?

MacGyver.

MacGyvered

design == empathy

design != copying shit

TRENDLINETREND

2011

2010

PARALLAX SCROLLINGA beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused.

CINEMAGRAPHSAnother beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF.

STICKY NAVIGATIONA similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages.

INLINE FORM FIELD LABELSThis one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints.

BUTTON COLOURAs affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices.

HELLO BARThe first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page. 20

12EXPLAINER VIDEOSEveryone needs an explainer video, right? Explain that to me.

FULLSCREEN HERO IMAGESWide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere.

1991 WWW

The World Wide Web is made available to the general public.

1994

THE FOLDJakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops.

1997 CAPTCHAS

The first evil interruptive device is added to web forms. Creating a usability nightmare.

1998

POPUPSThings get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving.

2004 PINOT NOIR

Not a design trend, but an example of the power trends can wield when left unchecked.

2007 CAROUSELS

Oft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen.

RE-CAPTCHAThe evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard-to-read books. Gets acquired by Google in 2009.

RESPONSIVE WEB DESIGNOne of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues.

MOBILE-FIRST DESIGNClosely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right?

EYE TRACKINGAn expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs.

2013 INLINE FORM FIELD LABELS II

A community-led success story. Designers created a way to keep the label inline without disappearing.

HAMBURGER MENUMassive debates raged about this one, but influence from OS designers has forced this into mass adoption.

FLAT DESIGNAffordance is thrown out the window en masse with a trend that can destroy app usability.

2014 BACKGROUND VIDEOS

The fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”.

CONGRATULATIONS!A Facebook hack more than a design trend. But quite hilarious. Congratulations!!!

GHOST BUTTONSRectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking.

GOOD COP / BAD COPThe psychological term for the two-button popup, whereby you have to click something you don’t agree with to exit the experience.

SCROLLJACKING20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism.

2015

SCROLL-TRIGGERED ANIMATIONSAs you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell.

CSS ANIMATED CTAsThese have the ability to get really out of hand. Although there are some really nice subtle effects.

WELCOME MATAn entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates.

2016 OVERLAYS

Unbounce signals the end to the popup, ushering in a new era of responsible marketing practices.

SKELETON SCREENSA technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening.

CONVERSATIONAL FORMSOne of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience.

CONFIRM SHAMINGA new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend.

STICKY TOP AND BOTTOMTop-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport.

2017

SMART NAVIGATIONThis will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility.

ASYMMETRIC DESIGNCould this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly.

2017?2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation.

DESIGN TRENDLINE@OliGardner @Unbounce #TuringFest

- Pinot Noir

- Pinot Noir - Another wine varietal

- Pinot Noir - Another wine varietal

2004

Image Source: GQ

2004

Image Source: GQ

Jeremy

2004

Image Source: GQ

Source: http://www.decanter.com/wine-news/sideways-effect-confirmed-76585/

“It only takes one tree to make a thousand matches.

“It only takes one tree to make a thousand matches.Only takes one match to burn a thousand trees.”

— Stereophonics

I DRINK A LOT OF WINE

But I haven’t bought a bottle of Merlot in 13 years

#TRENDpower

@oligardner #TuringFest bit.ly/oli-tf

3D !

"

N

H

E

I

THE DATA-DRIVEN DESIGN (3D) PROCESS

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

1 !

"

N

H

E

I

1 !

"

N

H

E

I

Choose Object of Interest

Isolate the data sources you need

SCROLL MAP

VISUAL ID

VISUAL ID

BOUNCE RATE

FALSE BOTTOM

FALSE BOTTOM

STOCK PHOTOSTOCK PHOTO

NAV

CTA

HERO SHOTHERO SHOT

FORM

VISUAL ID

FALSE BOTTOM

STOCK PHOTO

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

THE 3D PLAYBOOKAN INTERACTIVE OPTIMIZATION LOOKUP CHART FOR MARKETING TEAMS

3D

bit.ly/oli-tf

COLLECT DATADoing this as a collaborative process will empower your team, and create working

relationships that remove the frustrations marketers, designers, and copywriters

often feel. A simple status document helps.2 !

"

N

H

E

I

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

Tech Setup Complete

Date Started

Days Needed CollectingTool Used

Sample Size NeededData Type Assigned To

XXXXXXXXXX

XXXXXXXXXX

XXXXXXXXXX

WORKSHEET #1 - DATA COLLECTION3D

DATA-DRIVEN DESIGN (3D) WORKSHEET #1

Tech Setup Complete

Date Started

Days Needed CollectingTool Used

Sample Size NeededData Type Assigned To

XXXXXXX

XXXXXXX

XXXXXXX

WORKSHEET #1 - DATA COLLECTION3D

Aug 3, 20175-10 Usability Test

Aug 3, 201725 Visual ID Test

Aug 3, 20172,000 Scroll Map Camtasia Usability Hub

Hotjar

11

14 Oli Michael

Andrea

XXX

X

XXXXX

X

MAKE OBSERVATIONSViewing the data together (recordings, heat

maps, survey results) develops empathy, and ultimately better digital experiences. Have the whole team take notes as you look through it.

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

3 !

"

N

H

E

ICOLLECT DATA

Doing this as a collaborative process will empower your team, and create working

relationships that remove the frustrations marketers, designers, and copywriters

often feel. A simple status document helps.

PROJECT NAME

#

CARD #TEAM MEMBER DATA TYPE TOOL / SOURCE SAMPLE DATE

Data-Driven Design (3D) by Oli Gardner from Unbounce

DATA-DRIVEN DESIGN (3D) WORKSHEET #2

DESIGN NOTES

#

#

#

1. DATA

2. OBSERVATIONS 3. DESIGN IDEAS

# #

# #

(either sketch a complete solution or break it into multiple sketches by observation #)(describe in words the problems you witness)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

3D

SEVERITY

MICRO METRICS

SEVERITY

MICRO METRICS

SEVERITY

MICRO METRICS

SEVERITY

MICRO METRICS

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

DATA-DRIVEN DESIGN (3D) WORKSHEET #2

Data-Driven Design (3D) by Oli Gardner from Unbounce

2. OBSERVATIONS (describe in words the problems you witness)

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

WRITE DOWN ALL OBSERVED:

- MISTAKES - PROBLEMS - REACTIONS - FRUSTRATIONS - SURPRISES - SUCCESSES

1

#

#

#

7 of 8 usability test participants were unable to find the map when looking for directions to the hotel.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

Data-Driven Design (3D) by Oli Gardner from Unbounce

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

SEVERITY

SEVERITY

SEVERITY

SEVERITY

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

7 of 8 usability test participants were unable to find the map when looking for directions to the hotel.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

Tofu franzen gochujang VHS chartreuse pop-up swag man braid squid etsy drinking vinegar humblebrag.

1 RATE THE SEVERITY OF EACH OBSERVATION FROM 1 TO 5

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

4 !

"

N

H

E

I

ASSIGN MICRO METRICSEvery observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make.

MAKE OBSERVATIONS

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

COLLECT DATADoing this as a collaborative process will empower your team, and create working

relationships that remove the frustrations marketers, designers, and copywriters

often feel. A simple status document helps.

Viewing the data together (recordings, heat maps, survey results) develops empathy, and

ultimately better digital experiences. Have the whole team take notes as you look through it.

What are Micro Metrics?

What are Micro Metrics?

“The aggregation of marginal gains.

What are Micro Metrics?

“The aggregation of marginal gains.Each improvement may seem trivial, but the

cumulative effect can be huge.”— Dave Brailsford

What are Micro Metrics?

“Micro-metrics measure how your design

decisions change on-page behaviours.”— Me

3D Playbook 3

45

7

6 Click Map

Session RecScreen Res

Interview

Reading Ease

DATA

2

Usability Test

1

Lead Data

3D Playbook

2

3.1

3

4

1

5

7

63.2

3.3

3.4

2.1

4.2

4.1

4.35.1 5.2

6.2

6.1

6.3

7.1 1.31.2 1.4 1.51.1

Usability Test

Click Map

Session Rec

Lead Data

Screen Res

Interview

Reading Ease

OBSERVATIONS

DATA

Do Nothing

Fix

Do Nothingor

Optimize & Track Micro Metric

Fixor

Do Nothingor

3D Playbook

2

3.1

3

4

1

5

7

63.2

3.3

3.4

2.1

4.2

4.1

4.35.1 5.2

6.2

6.1

6.3

7.1 1.31.2 1.4 1.51.1

Usability Test

Click Map

Session Rec

Lead Data

Screen Res

Interview

Reading Ease

OBSERVATIONS

DATA

MICRO METRICS

3D Playbook

2

3.1

3

4

1

5

7

63.2

3.3

3.4

2.1

4.2

4.1

4.35.1 5.2

6.2

6.11

6.3

7.1 1.31.2 1.4 1.51.1

Usability Test

Click Map

Session Rec

Lead Data

Screen Res

Interview

Reading Ease

1.2 1.5

OBSERVATIONS

DATA

MICRO METRICS

3D Playbook

2

3.1

3

4

1

5

7

63.2

3.3

3.4

2.1

4.2

4.1

4.35.1 5.2

6.2

6.11

6.3

7.1 1.31.2 1.4 1.51.1

Usability Test

Click Map

Session Rec

Lead Data

Screen Res

Interview

Reading Ease 3.1

3.3

1.2 1.5

OBSERVATIONS

DATA

MICRO METRICS

I just made 4 people fall asleep

Mum Dad Bro Sis

“DESIGN CARD” MOCKUPSThis is the MacGyver phase. Take your observations, hypotheses, and your new understanding of the user experience, and sketch before/after ways to solve each problem, as a team. Remember, we are all designers.

ASSIGN MICRO METRICS MAKE OBSERVATIONS

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

COLLECT DATADoing this as a collaborative process will empower your team, and create working

relationships that remove the frustrations marketers, designers, and copywriters

often feel. A simple status document helps.5 !

"

N

H

E

I

Viewing the data together (recordings, heat maps, survey results) develops empathy, and

ultimately better digital experiences. Have the whole team take notes as you look through it.

Every observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make.

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS

# #

# #

(either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions.

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS

# #

# #

(either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions.

11

Try bigger underpants

2

3 4

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS

# #

# #

(either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions.

1 2

3 4

2

Try bigger underpants + Toilet humor

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS

# #

# #

(either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions.

1 2

3 4

3

Try bigger underpants + Toilet humor

Panda diapers?

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions.

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS

1 2

3 4

(either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

Try bigger underpants Toilet humor usually works

Panda diapers? Unique as a snowflake

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

Data-Driven Design (3D) by Oli Gardner from Unbounce

DESIGN NOTES

3. DESIGN IDEAS (either sketch a complete solution or break it into multiple sketches by observation #)

(these can be general notes about your design ideas, or applicable to each observation+design combination #)

1

2

3

4

2. OBSERVATIONS (describe in words the problems you witness)

Everyday carry sartorial vaporware vice man bun mlkshk tilde celiac migas enamel pin neutra YOLO thundercats.

Ennui kogi pickled, godard pop-up tumeric four dollar toast sartorial vexillologist subway tile paleo street art disrupt health goth VHS.

Helvetica tote bag shaman disrupt vegan readymade vinyl organic iPhone. Pour-over cloud bread cold-pressed, hella umami ennui sartorial occupy knausgaard.

In the session recordings, it seemed like almost everyone had trouble figuring out how to print out the map & directions. #HipsterPandaPoopPants

1

2

3

4

TURING FEST 2017 2 OLI 8 Aug 3, 2017DATA-DRIVEN DESIGN (3D) WORKSHEET #2 1. DATA3D USABILITY TEST CAMTASIA

SEVERITY

MICRO METRICS

% who can find the map

SEVERITY

MICRO METRICS

% of ppl who scroll to bottom

SEVERITY

MICRO METRICS

Ratio of calls to form fills

SEVERITY

MICRO METRICS

Attention Ratio

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

“DESIGN CARD” MOCKUPSThis is the MacGyver phase. Take your observations, hypotheses, and your new understanding of the user experience, and sketch before/after ways to solve each problem, as a team. Remember, we are all designers.

ASSIGN MICRO METRICS MAKE OBSERVATIONS

CONSULT 3D PLAYBOOKThe 3D Playbook is a simple lookup tool for

taking the overwhelming amount of data that exists, and narrowing it down to the

types, sources, and formats that are most relevant to what you’re working on.

COLLECT DATADoing this as a collaborative process will empower your team, and create working

relationships that remove the frustrations marketers, designers, and copywriters

often feel. A simple status document helps.6 !

"

N

H

E

I

TEST & MEASURE MICRO METRICSMicro metrics focus on the holistic elements of the whole. Each observation you are trying to improve creates its own micro metric that can be measured as part of the reporting process.

Viewing the data together (recordings, heat maps, survey results) develops empathy, and

ultimately better digital experiences. Have the whole team take notes as you look through it.

Every observed pain point needs a corresponding solution. If you can measure it, you can optimize and improve it. Assigning micro metrics ensures you can measure the impact of every design decision you make.

RESULTS

TEST RESULTS: MICRO METRICS6!

"

N

H

E

ID

1.2

1.5

MICRO METRIC DATA TYPE TOOL/SOURCE SEVERITY CONTROL 3D TREATMENT CHANGE

% of people who can find the map

Average # of form errors

Usability Test

GA

Camtasia

GTM Script

5

2

12.5%

1.5

RESULTS

TEST RESULTS: MICRO METRICS6!

"

N

H

E

ID

1.2

1.5

MICRO METRIC

% of people who can find the map

Average # of form errors

DATA TYPE

Usability Test

GA

TOOL/SOURCE

Camtasia

GTM Script

SEVERITY

5

2

CONTROL

12.5%

1.5

3D TREATMENT

15%

2.2

CHANGE

+20%

+47%

“Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”

“Which types of data would you MOST like at the start of a project, that you DON'T usually have access to?”

On the way to Nashville…

“He parked in the middle of the road, got out of the car…

— Nicole

“He parked in the middle of the road, got out of the car…

We sat awkwardly in the back feeling lost and belittled.

— Nicole

“We then smiled as we figured out how to work this terrible

experience into Oli’s on-stage presentation at the Country

Music Hall of Fame.”

— Nicole

“Nicole, we only pick up by appointment. We did not have any reservation for you and the vehicle belonged to another family.“

— Metro Livery

“Then your driver should never have welcomed us into his vehicle.

Again, we thank you for this most excellent example and hope you figure your shit out.”

— Nicole

4.2

4.2

Keep language positive.

If even just 1% of page copy subconsciously reminds your visitors of feelings of anger or fear, you could be seeing up to 25% lower conversion rates.

No one wants to be angry on their vacation!

CONVERSION BENCHMARK REPORT

TRAVEL

business vertical

EMOTION: ANGER

what’s being measured

insights

0%

5%

10%

15%

0.0% 0.5% 1.0% 1.5% 2.0%anger

Conv

ersi

on R

ate

bit.ly/oli-tf

THE 3D PLAYBOOK3Dbit.ly/oli-tf

WORD COUNT

THE 3D PLAYBOOK3Dbit.ly/oli-tf

READING EASE

THE 3D PLAYBOOK3Dbit.ly/oli-tf

SENTIMENT

THE 3D PLAYBOOK3Dbit.ly/oli-tf

EMOTION

moods.mybluemix.net

https://tone-analyzer-demo.mybluemix.net/

2011

2010

2012

1991

1994

1997

1998

2004

2007

2013

2014

2015

2016

2017

PARALLAX SCROLLINGA beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused.

CINEMAGRAPHSAnother beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF.

STICKY NAVIGATIONA similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages.

INLINE FORM FIELD LABELSThis one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints.

BUTTON COLOURAs affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices.

HELLO BARThe first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page.

EXPLAINER VIDEOSEveryone needs an explainer video, right? Explain that to me.

FULLSCREEN HERO IMAGESWide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere.

WWWThe World Wide Web is made available to the general public.

THE FOLDJakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops.

CAPTCHASThe first evil interruptive device is added to web forms. Creating a usability nightmare.

POPUPSThings get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving.

PINOT NOIRNot a design trend, but an example of the power trends can wield when left unchecked.

CAROUSELSOft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen.

RE-CAPTCHAThe evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard-to-read books. Gets acquired by Google in 2009.

RESPONSIVE WEB DESIGNOne of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues.

MOBILE-FIRST DESIGNClosely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right?

EYE TRACKINGAn expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs.

INLINE FORM FIELD LABELS IIA community-led success story. Designers created a way to keep the label inline without disappearing.

HAMBURGER MENUMassive debates raged about this one, but influence from OS designers has forced this into mass adoption.

FLAT DESIGNMicrosoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse.

BACKGROUND VIDEOSThe fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”.

CONGRATULATIONS!A Facebook hack more than a design trend. But quite hilarious. Congratulations!!!

GHOST BUTTONSRectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking.

GOOD COP / BAD COPThe psychological term for the two-button popup, whereby you have to click something you don’t agree with to exit the experience.

SCROLLJACKING20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism.

SCROLL-TRIGGERED ANIMATIONSAs you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell.

CSS ANIMATED CTAsThese have the ability to get really out of hand. Although there are some really nice subtle effects.

WELCOME MATAn entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates.

OVERLAYSUnbounce signals the end to the popup, ushering in a new era of responsible marketing practices.

SKELETON SCREENSA technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening.

CONVERSATIONAL FORMSOne of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience.

CONFIRM SHAMINGA new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend.

STICKY TOP AND BOTTOMTop-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport.

SMART NAVIGATIONThis will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility.

ASYMMETRIC DESIGNCould this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly.

2017?2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation.

Data visualization has become big business, one whose needs will only grow as data expands like a new universe. After an initial peak, the quality declined as the market got swamped.

INFOGRAPHICS

2016

CONVERSATIONAL FORMSOne of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience.

2016

NEWTREND

THE CONVERSATIONAL FORM

3D !

"

NH

E

I

1. CHECK 3D PLAYBOOK

1 !

"

NH

E

I

BOUNCE RATE

SESSION REC.

SESSION REC. POLL MOBILE

QAMOBILE

QAUSABILITY

TESTUSABILITY

TEST

CONV FORMCONV FORM

PAGE LENGTH

NPS SURVEY

SCROLL MAP

CLICK MAP

FORM ABANDON

LEAD DATA

NEW VS RETURN

SCROLL MAP

CLICK MAP

LEAD DATA

DEVICE BRAND

5-SEC TEST

CHECK 3D PLAYBOOK: CONVERSATIONAL FORM1 !

"

NH

E

I

2. COLLECT DATA

2 !

"

NH

E

I

Tech Setup Complete

Date Started

Days Needed CollectingTool Used

Sample Size NeededData Type

July 17, 20171 Mobile QA

July 17, 20171,000 Scroll Map

July 17, 2017500 Lead Data

July 17, 2017100 Session Recordings

July 17, 20176 Usability Test

July 17, 20171,000 Click Map

iPhone

Hotjar

Unbounce

Hotjar

Camtasia

Hotjar

1

7

28

1

1

7

Assigned To

Oli

Oli

Oli

Oli

Oli

Oli

XXXXXX

XXXXXX

XXXXXX

COLLECT DATA: CONVERSATIONAL FORM2 !

"

NH

E

I

3. MAKE OBSERVATIONS

3 !

"

NH

E

I

Session Recording

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data New trends should never follow the set it and forget it model. Session recordings will be the fastest way to get visual qualitative feedback from real visitors. Consider it an extension of QA, and be prepared to roll back if needed.

OBSERVATIONS: SESSION RECORDING3 !

"

NH

E

I

Session Recording

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

OBSERVATIONS3 !

"

NH

E

I

Session Recording

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

OBSERVATIONS3 !

"

NH

E

I

Session Recording

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

OBSERVATIONS3 !

"

NH

E

I

Apologies for the poor experience with that form!

Hi Oli,

Wow! I have been a consultant for 25+ years and can say without hesitation that this is the best example of taking responsibility for an error that resulted in a bad customer experience. Equally important was the timeliness of this follow up – thank you!

Thanks for the link. Please note that I was able to view the content via the link but was unable to complete the opt in form to download the content.

I look forward to viewing the content and will be much more likely to continue to engage with the unbounce brand as a result of this email.

Regards,

Hi Oli,

Wow! I have been a consultant for 25+ years and can say without hesitation that this is the best example of taking responsibility for an error that resulted in a bad customer experience. Equally important was the timeliness of this follow up – thank you!

Thanks for the link. Please note that I was able to view the content via the link but was unable to complete the opt in form to download the content.

I look forward to viewing the content and will be much more likely to continue to engage with the Unbounce brand as a result of this email.

Regards,

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS: MOBILE QA3 !

"

NH

E

I

Does the data entry mode for a conversational form work well on a phone?

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS3 !

"

NH

E

I

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS3 !

"

NH

E

I

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS3 !

"

NH

E

I

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS: USABILITY TEST3 !

"

NH

E

I

Test Instructions This test is to evaluate how a landing page works. You cannot do anything wrong. Any problems that arise are the fault of the page, and not your actions.

TEN 2-MINUTE USABILITY TESTS WITH CO-WORKERS

Please read out the task, and verbalize all of your thoughts, observations, choices and actions.

Task 1 I searched Google for a landing page course and arrived on this page. Find a way to take the course.

Usability Test

The animated dots make it appear as though someone on the other end of the conversation is typing, giving reason to pause.

OBSERVATIONS: USABILITY TEST3 !

"

NH

E

I

Usability Test

The animated dots make it appear as though someone on the other end of the conversation is typing, giving reason to pause.

Typing a value from the dropdown list buttons results in the first value being submitted. You have to click the button for it to work.

Because there were no visible form fields, the participant was unsure how many questions there were going to be in the process.

OBSERVATIONS: USABILITY TEST3 !

"

NH

E

I

Mobile QA

Usability Test

Scroll Map

Click Map

Lead Data

Session Recording

OBSERVATIONS: CLICK MAP3 !

"

NH

E

I

Click Map

OBSERVATIONS: CLICK MAP3 !

"

NH

E

I

Click Map

OBSERVATIONS: CLICK MAP3 !

"

NH

E

I

Click Map

12% of visitors clicked the first question on the form (which isn’t an interactive element).

OBSERVATIONS: CLICK MAP3 !

"

NH

E

I

Lead Data

Conversational forms look and behave like chat sessions (or a chat bot). Check the quality of the lead data that you receive in case there is an increase in fake/spam emails.

OBSERVATIONS: LEAD DATA3 !

"

NH

E

I

Lead Data

2.5x fake email addresses entered, compared to a regular form.

OBSERVATIONS: LEAD DATA3 !

"

NH

E

I

Speaking of spam…

"

2011

2010

2012

1991

1994

1997

1998

2004

2007

2013

2014

2015

2016

2017

PARALLAX SCROLLINGA beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused.

CINEMAGRAPHSAnother beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF.

STICKY NAVIGATIONA similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages.

INLINE FORM FIELD LABELSThis one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints.

BUTTON COLOURAs affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices.

HELLO BARThe first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page.

EXPLAINER VIDEOSEveryone needs an explainer video, right? Explain that to me.

FULLSCREEN HERO IMAGESWide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere.

WWWThe World Wide Web is made available to the general public.

THE FOLDJakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops.

CAPTCHASThe first evil interruptive device is added to web forms. Creating a usability nightmare.

POPUPSThings get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving.

PINOT NOIRNot a design trend, but an example of the power trends can wield when left unchecked.

CAROUSELSOft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen.

RE-CAPTCHAThe evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard-to-read books. Gets acquired by Google in 2009.

RESPONSIVE WEB DESIGNOne of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues.

MOBILE-FIRST DESIGNClosely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right?

EYE TRACKINGAn expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs.

INLINE FORM FIELD LABELS IIA community-led success story. Designers created a way to keep the label inline without disappearing.

HAMBURGER MENUMassive debates raged about this one, but influence from OS designers has forced this into mass adoption.

FLAT DESIGNMicrosoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse.

BACKGROUND VIDEOSThe fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”.

CONGRATULATIONS!A Facebook hack more than a design trend. But quite hilarious. Congratulations!!!

GHOST BUTTONSRectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking.

GOOD COP / BAD COPThe psychological term for the two-button popup, whereby you have to click something you don’t agree with to exit the experience.

SCROLLJACKING20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism.

SCROLL-TRIGGERED ANIMATIONSAs you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell.

CSS ANIMATED CTAsThese have the ability to get really out of hand. Although there are some really nice subtle effects.

WELCOME MATAn entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates.

OVERLAYSUnbounce signals the end to the popup, ushering in a new era of responsible marketing practices.

SKELETON SCREENSA technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening.

CONVERSATIONAL FORMSOne of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience.

CONFIRM SHAMINGA new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend.

STICKY TOP AND BOTTOMTop-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport.

SMART NAVIGATIONThis will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility.

ASYMMETRIC DESIGNCould this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly.

2017?2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation.

1997 CAPTCHAS

The first evil interruptive device is added to web forms. Creating a usability nightmare.

1997

2011

2010

2012

1991

1994

1997

1998

2004

2007

2013

2014

2015

2016

2017

PARALLAX SCROLLINGA beautiful motion design and photographic technique, parallax scrolling can create an excellent experience. Sadly it was quickly abused.

CINEMAGRAPHSAnother beautiful concept, that didn’t gain much traction, instead its subtlety was passed over in favour of the surging animated GIF.

STICKY NAVIGATIONA similar device to the HelloBar, but designed for anchor (in-page) navigation. Something that can really help long landing pages.

INLINE FORM FIELD LABELSThis one blew up UX and CRO communities. Primarily because the label disappeared when the field was clicked, removing context and hints.

BUTTON COLOURAs affordable A/B testing tools hit the market, so cometh a slew of bad case studies that encourage bad experimentation practices.

HELLO BARThe first sticky bar emerges from Digital Telepathy, allowing you to place persistent offers at the top of the page.

EXPLAINER VIDEOSEveryone needs an explainer video, right? Explain that to me.

FULLSCREEN HERO IMAGESWide adoption of fullscreen background images was the beginning of many trends that would harm readability of the all-important above-the-fold value prop area of web pages everywhere.

WWWThe World Wide Web is made available to the general public.

THE FOLDJakob Nielsen proclaims that people don’t scroll, and most debated topic in digital marketing begins, and never stops.

CAPTCHASThe first evil interruptive device is added to web forms. Creating a usability nightmare.

POPUPSThings get even uglier as web designers and developers begin hacking browser behaviour. The hard to escape Javascript popup empowers the black hats to start misbehaving.

PINOT NOIRNot a design trend, but an example of the power trends can wield when left unchecked.

CAROUSELSOft looked upon as a way to pacify stakeholder politics, carousel sliders hit every homepage adding massive amounts of content destined never to be seen.

RE-CAPTCHAThe evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard-to-read books. Gets acquired by Google in 2009.

RESPONSIVE WEB DESIGNOne of the biggest web bandwagons ever. RWD seemed like a great idea at the time, but the lack of control over the mobile experience can cause issues.

MOBILE-FIRST DESIGNClosely tied to RWD, mobile-first sought to future-proof web experiences by placing emphasis on mobile – because all of your traffic is mobile, right?

EYE TRACKINGAn expensive and fancy way to detect what people are looking at on a web page. It quickly gained notoriety when the “baby gaze” experiment did the rounds on marketing blogs.

INLINE FORM FIELD LABELS IIA community-led success story. Designers created a way to keep the label inline without disappearing.

HAMBURGER MENUMassive debates raged about this one, but influence from OS designers has forced this into mass adoption.

FLAT DESIGNMicrosoft’s 2010 efforts were amplified by Apple and affordance is thrown out the “window” en masse.

BACKGROUND VIDEOSThe fullscreen hero image extends to video, further impacting readability and increasing instances of “false bottoms”.

CONGRATULATIONS!A Facebook hack more than a design trend. But quite hilarious. Congratulations!!!

GHOST BUTTONSRectangles with opaque fills create quite awesome secondary state buttons, but poor affordance and readability can render them unclickable-looking.

GOOD COP / BAD COPThe psychological term for the two-button popup, whereby you have to click something you don’t agree with to exit the experience.

SCROLLJACKING20 years of interaction design thrown down the toilet. Designers once more try to re-invent the quite perfect browser scrolling mechanism.

SCROLL-TRIGGERED ANIMATIONSAs you scroll down the page, images and text start to fly in, drawing your attention to them. Great the first time you see them. Thereafter annoying as hell.

CSS ANIMATED CTAsThese have the ability to get really out of hand. Although there are some really nice subtle effects.

WELCOME MATAn entrance-overlay method from SumoMe whereby the entire screen is covered. An interruptive experience that has seen some positive updates.

OVERLAYSUnbounce signals the end to the popup, ushering in a new era of responsible marketing practices.

SKELETON SCREENSA technique where a wireframe-like layout appears before the content to accelerate load times and provide a signal that loading is happening.

CONVERSATIONAL FORMSOne of the most interesting new interaction models to emerge, conversational forms turn a regular web form into a chat-like experience.

CONFIRM SHAMINGA new name for good cop / bad cop emerges. Manipulinks is another. Regardless of the name, I hope one sticks as it makes it easier to track the trend.

STICKY TOP AND BOTTOMTop-anchored sticky bars are awesome, bottom ones feel slightly more interruptive, but when both are used at the same time it destroys the viewport.

SMART NAVIGATIONThis will be an interesting one, where navigational devices will be presented to visitors where and when they hold the most contextual importance and utility.

ASYMMETRIC DESIGNCould this simple yet elegant and dynamic trend be the saviour of the false bottom? Quite possibly.

2017?2017 will be an interesting year for trends, hopefully we’ll see an increase in experimentation and validation.

Data visualization has become big business, one whose needs will only grow as data expands like a new universe. After an initial peak, the quality declined as the market got swamped.

INFOGRAPHICS

2007

RE-CAPTCHAThe evil captcha is turned into a device that does good – by crowdsourcing digitizing of hard-to-read books. Gets acquired by Google in 2009.

2007

Not all books should be preserved.

Scrappy

4. DEFINE MICRO METRICS

"4 !

"

NH

E

I

Data Sources

2

3.1

3

4

1

5

6 3.2

3.3

2.1

4.15.1

6.2

6.1

1.21.1

Mobile QA

Usability Test

Scroll Map

Session Recording

Click Map

Lead Data

OBSERVATIONS

DATA

4 !

"

NH

E

I

MICRO METRICS

Optimize & Track Micro Metric

Fixor

Do Nothingor

Data Sources

2

3.1

3

4

1

5

6 3.2

3.3

2.1

4.15.1

6.2

6.1

1.21.1

Mobile QA

Usability Test

Scroll Map

Session Recording

Click Map

Lead Data

OBSERVATIONS

DATA

MICRO METRICS

Turn off Required Fields Disable on Mobile

Hide Dots

Add“4 Qs Only”

Subhead

4 !

"

NH

E

I

Data Sources

2

3.1

3

4

1

5

6 3.2

3.3

2.1

4.15.1

6.1

1.21.1

Mobile QA

Usability Test

Scroll Map

Session Recording

Click Map

Lead Data

OBSERVATIONS

DATA

MICRO METRICS

% Spam Emails

# of Q1 Clicks

Turn off Required Fields Disable on Mobile

Hide Dots

Add“4 Qs Only”

Subhead

4 !

"

NH

E

I

6.2

5. DESIGN CARD MOCKUPS

"5 !

"

NH

E

I

FINAL 3D DESIGN TREATMENT5 !

"

NH

E

I

FINAL 3D DESIGN TREATMENT5 !

"

NH

E

I

FINAL 3D DESIGN TREATMENT5 !

"

NH

E

I

4.1

3.2

5.1

3.1

FINAL 3D DESIGN TREATMENT5 !

"

NH

E

I

6. TEST & MEASURE MICRO METRICS

6 !

"

NH

E

I

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID MICRO METRIC DATA TYPE TOOL/SOURCE SEVERITY CONTROL 3D TREATMENT CHANGE

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

MICRO METRIC

% clicking on first question

DATA TYPE

Heat Map: Click

TOOL/SOURCE

Hotjar

SEVERITY

2

CONTROL

11.94%

3D TREATMENT CHANGE

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

MICRO METRIC

% clicking on first question

DATA TYPE

Heat Map: Click

TOOL/SOURCE

Hotjar

SEVERITY

2

CONTROL

11.94%

3D TREATMENT

6.28%

CHANGE

-47%

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

6.1

MICRO METRIC

% clicking on first question

# of fake emails entered

DATA TYPE

Heat Map: Click

Lead Data

TOOL/SOURCE

Hotjar

Unbounce

SEVERITY

2

5

CONTROL

11.94%

63

3D TREATMENT

6.28%

CHANGE

-47%

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

6.1

MICRO METRIC

% clicking on first question

# of fake emails entered

DATA TYPE

Heat Map: Click

Lead Data

TOOL/SOURCE

Hotjar

Unbounce

SEVERITY

2

5

CONTROL

11.94%

63

3D TREATMENT

6.28%

40

CHANGE

-47%

-37%

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

6.1

6.2

MICRO METRIC

% clicking on first question

# of fake emails entered

% personal email addresses (gmail etc)

DATA TYPE

Heat Map: Click

Lead Data

Lead Data

TOOL/SOURCE

Hotjar

Unbounce

Unbounce

SEVERITY

2

5

3

CONTROL

11.94%

63

19.2%

3D TREATMENT

6.28%

40

CHANGE

-47%

-37%

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

6.1

6.2

MICRO METRIC

% clicking on first question

# of fake emails entered

% personal email addresses (gmail etc)

DATA TYPE

Heat Map: Click

Lead Data

Lead Data

TOOL/SOURCE

Hotjar

Unbounce

Unbounce

SEVERITY

2

5

3

CONTROL

11.94%

63

19.2%

3D TREATMENT

6.28%

40

33.6%

CHANGE

-47%

-37%

+75%

TEST & MEASURE MICRO METRICS6 !

"

NH

E

I

RESULTS

ID

5.1

6.1

6.2

0

MICRO METRIC

% clicking on first question

# of fake emails entered

% personal email addresses (gmail etc)

Conversion Rate

DATA TYPE

Heat Map: Click

Lead Data

Lead Data

A/B Test

TOOL/SOURCE

Hotjar

Unbounce

Unbounce

Unbounce

SEVERITY

2

5

3

-

CONTROL

11.94%

63

19.2%

7.55%

3D TREATMENT

6.28%

40

33.6%

CHANGE

-47%

-37%

+75%

- ?

MARKETER

COREY

Corey, why did we make an explainer video?

Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it.

COREY

Well... we made a bunch of shit up, without asking the audience it was meant for, what they thought about it.

COREY

We also started the project because we thought we needed a video, not because we got some feedback from our prospects that said we needed it.

Cheesy & entirely unnecessary elevator sequence

Fake businesswoman walking by at the right time.

Patronizing jerk

*Not real developers

Really? Is this the DMV?

“Minority Report” segment. Cos we’re a tech company

Fake businesswoman

developer

Marketing Team Frustration

MARKETER DESIGNER

COPYWRITER

Marketing Team Frustration

MARKETER DESIGNER

COPYWRITER

Marketing Team Frustration

MARKETER DESIGNER

COPYWRITER

Marketing Team Frustration

Marketing Team Frustration

MARKETER DESIGNER

COPYWRITER

45% OF DESIGNERS FIND MARKETERS

FRUSTRATING

32% OF MARKETERS FIND DESIGNERS FRUSTRATING

“They take a concept and do

magic…”marketers talking about designers

“They come from a planet

with super powers.”

“They're enthusiastic and motivated. Full

of ideas, even if most of the ideas are

bad.”

“They're enthusiastic and motivated. Full

of ideas, even if most of the ideas are

bad.”

“They're enthusiastic and motivated. Full

of ideas, even if most of the ideas are

bad.”designers talking about marketersdesigners talking about copywriters

“They're intelligent, and can turn the

bullshit of a marketer into something a

customer can understand.”

“They are our symbiotic organism.

We die without them.”

“They are our symbiotic organism.

We die without them.”

“They're intelligent, and can turn the

bullshit of a marketer into something a

customer can understand.”

Music: “The Diary” by Relejar

data-drivendesign

data-driven

design == empathy

data-driven

design == empathy == results

Thank you!bit.ly/oli-tf