72
A/B testing workshop “In God we trust, all others must bring data” JSConf Colombia Workshop 2015

The anatomy of an A/B Test - JSConf Colombia Workshop

Embed Size (px)

Citation preview

Page 1: The anatomy of an A/B Test - JSConf Colombia Workshop

A/B testing workshop “In God we trust, all others must bring data”

JSConf Colombia Workshop 2015

Page 2: The anatomy of an A/B Test - JSConf Colombia Workshop

@shiota github.com/eshiota

slideshare.net/eshiota eshiota.com

Page 3: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 4: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 5: The anatomy of an A/B Test - JSConf Colombia Workshop

A/B

Page 6: The anatomy of an A/B Test - JSConf Colombia Workshop

A/B tests measure how a new idea (version B/variant/test) performs agains an existing implementation (version A/base/control).

Page 7: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 8: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 9: The anatomy of an A/B Test - JSConf Colombia Workshop

Buy now Buy nowversus

Page 10: The anatomy of an A/B Test - JSConf Colombia Workshop

coin flip

Buy now

Buy now

50%

50%

Page 11: The anatomy of an A/B Test - JSConf Colombia Workshop

When the user sees or is affected by the idea, they are tracked and become part of the test.

Page 12: The anatomy of an A/B Test - JSConf Colombia Workshop

Buy now

Buy now

track(my_experiment)

Page 13: The anatomy of an A/B Test - JSConf Colombia Workshop

Data about the website is generated as users browse through pages and do their tasks.

Page 14: The anatomy of an A/B Test - JSConf Colombia Workshop

product added to cart

number of products added

purchase finished

average price per purchase

number of products seen

user has logged in

used guest checkout

customer service calls

Page 15: The anatomy of an A/B Test - JSConf Colombia Workshop

When there’s enough information to make a decision, you can either stop the test (keeping version A) or choose version B, directing all traffic to it.

Page 16: The anatomy of an A/B Test - JSConf Colombia Workshop

Buy now Buy now

Duration: 14 days Visitors: 45.140 (22.570 per variant)

339 (1.5%) 407 (1.8%)

20% up

144.500 COP 147.390 COP

2% up

Number of purchases:

Average price:

Page 17: The anatomy of an A/B Test - JSConf Colombia Workshop

coin flip

Buy now

Buy now

50%

50%

Page 18: The anatomy of an A/B Test - JSConf Colombia Workshop

B

Buy now

100%

Page 19: The anatomy of an A/B Test - JSConf Colombia Workshop

"But my design is obviously more beautiful and intuitive than what we have now! Why should I run an A/B test?” — the majority of designers

Page 20: The anatomy of an A/B Test - JSConf Colombia Workshop

Quiz time!(prizes included)

Page 21: The anatomy of an A/B Test - JSConf Colombia Workshop

A: Raise your left hand B: Raise your right hand

Neutral: Don’t raise your hands

Which performed better?

Page 22: The anatomy of an A/B Test - JSConf Colombia Workshop

Reduced bounce rate in 1.7%

Page 23: The anatomy of an A/B Test - JSConf Colombia Workshop

A: Raise your left hand B: Raise your right hand

Neutral: Don’t raise your hands

Which performed better?

Page 24: The anatomy of an A/B Test - JSConf Colombia Workshop

Which performed better?

Increased CTR in 203%

Page 25: The anatomy of an A/B Test - JSConf Colombia Workshop

A: Raise your left hand B: Raise your right hand

Neutral: Don’t raise your hands

Which performed better?

Page 26: The anatomy of an A/B Test - JSConf Colombia Workshop

Which performed better?

43.4% more purchases

Page 27: The anatomy of an A/B Test - JSConf Colombia Workshop

A: Raise your left hand B: Raise your right hand

Neutral: Don’t raise your hands

Which performed better?

Page 28: The anatomy of an A/B Test - JSConf Colombia Workshop

Both were statistically equivalent

Which performed better?

Page 29: The anatomy of an A/B Test - JSConf Colombia Workshop

Intuition vs

Historical Analysis vs.

Experimentation

Page 30: The anatomy of an A/B Test - JSConf Colombia Workshop

We have a 2/3 chance of being wrong when trusting our intuition.

Page 31: The anatomy of an A/B Test - JSConf Colombia Workshop

People behave differently each season/month/day of the week.

Page 32: The anatomy of an A/B Test - JSConf Colombia Workshop

Different cultures lead to different patterns of usage.

Page 33: The anatomy of an A/B Test - JSConf Colombia Workshop

Data analysis alone provides correlation but not causation.

Page 34: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 35: The anatomy of an A/B Test - JSConf Colombia Workshop

Running your A/B test(in 5 simple steps)

Page 36: The anatomy of an A/B Test - JSConf Colombia Workshop

Step 1: Hypothesis

Page 37: The anatomy of an A/B Test - JSConf Colombia Workshop

Analyse all possible inputs to come up with an hypothesis to work on.

Page 38: The anatomy of an A/B Test - JSConf Colombia Workshop

• Usability research • Benchmarking • Surveys • Data mining • Previous experiments

Page 39: The anatomy of an A/B Test - JSConf Colombia Workshop

Hypothesis:

“If users from South America countries relate more to the website, they will book more.”

Page 40: The anatomy of an A/B Test - JSConf Colombia Workshop

Step 2: Idea

Page 41: The anatomy of an A/B Test - JSConf Colombia Workshop

Idea:

“If we add the country’s flag next to the website’s logo, users will relate more to the brand.”

Page 42: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 43: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 44: The anatomy of an A/B Test - JSConf Colombia Workshop

Step 3: Setup

Page 45: The anatomy of an A/B Test - JSConf Colombia Workshop

• Who will participate? • What is the primary metric? • Any secondary impacts? • How will it be implemented?

Page 46: The anatomy of an A/B Test - JSConf Colombia Workshop

• Users from Argentina, Bolivia, Brazil, Chile, Colombia, Ecuador, Guyana, Paraguay, Peru, Suriname, Uruguay and Venezuela, on all platforms

• Conversion (net bookings) uplift is expected • We expect more returning customers

Page 47: The anatomy of an A/B Test - JSConf Colombia Workshop

<h1 class="main-header__logo logo"> <% if user.is_from_south_america && track_experiment(:header_flag_for_south_america) == "b" %> <span class="main-header__logo__country-flag"> <%= user.country %> </span> <% end %> <%= image_tag "logo.png" %> </h1>

Page 48: The anatomy of an A/B Test - JSConf Colombia Workshop

Step 4: Monitoring

Page 49: The anatomy of an A/B Test - JSConf Colombia Workshop

Keep checking the metrics to see if anything’s terribly wrong.

Page 50: The anatomy of an A/B Test - JSConf Colombia Workshop

Avoid checking too often, let your test get enough users and enough runtime.

Page 51: The anatomy of an A/B Test - JSConf Colombia Workshop
Page 52: The anatomy of an A/B Test - JSConf Colombia Workshop

Step 5: Data, decisions, and next steps

Page 53: The anatomy of an A/B Test - JSConf Colombia Workshop

When you reach the expected runtime, number of visitors or effect, look at the data and take a decision.

Page 54: The anatomy of an A/B Test - JSConf Colombia Workshop

product added to cart

number of products added

purchase finished

average price per purchase

number of products seen

user has logged in

used guest checkout

customer service calls

Page 55: The anatomy of an A/B Test - JSConf Colombia Workshop

Optimizely dashboard

Page 56: The anatomy of an A/B Test - JSConf Colombia Workshop

• How were the primary and secondary metrics impacted?

• What were the results isolated by each country?

• What were the results isolated by each language?

• Did any particular platform (desktop, mobile devices, tablets) perform better?

• Was the impact on returning customers any higher than first time visitors?

Page 57: The anatomy of an A/B Test - JSConf Colombia Workshop

Based on the gathered data, plan for next steps.

Page 58: The anatomy of an A/B Test - JSConf Colombia Workshop

• Should we add a copy to the flag? • Should we add a tooltip to the flag? • Should we increase/decrease the flag size? • Should we restrict it just for desktop users? • Should we try this for a single country, or

other countries?

Page 59: The anatomy of an A/B Test - JSConf Colombia Workshop

What can you test?

Page 60: The anatomy of an A/B Test - JSConf Colombia Workshop

(almost) Everything.

Page 61: The anatomy of an A/B Test - JSConf Colombia Workshop

You can test a small design change.

Page 62: The anatomy of an A/B Test - JSConf Colombia Workshop

versus

Page 63: The anatomy of an A/B Test - JSConf Colombia Workshop

You can test large design changes.

Page 64: The anatomy of an A/B Test - JSConf Colombia Workshop

versus

Page 65: The anatomy of an A/B Test - JSConf Colombia Workshop

You can test different copies.

Page 66: The anatomy of an A/B Test - JSConf Colombia Workshop

versus

Submit

Book now

Page 67: The anatomy of an A/B Test - JSConf Colombia Workshop

You can test technical improvements and measure page load time, repaints/reflows, and conversion impact.

Page 68: The anatomy of an A/B Test - JSConf Colombia Workshop

versus

jQuery 1.11.3

jQuery 2.1.3

Page 69: The anatomy of an A/B Test - JSConf Colombia Workshop

You can even test back-end optimisations and measure page load time, rendering time, CPU and memory usage etc.

Page 70: The anatomy of an A/B Test - JSConf Colombia Workshop

if track_experiment(:my_optimized_query) @users = my_optimized_query else @users = do_the_normal_thing end

Page 71: The anatomy of an A/B Test - JSConf Colombia Workshop

Live coding(I hope that works.)

Page 72: The anatomy of an A/B Test - JSConf Colombia Workshop

Find the code at:

https://github.com/eshiota/ab_workshop

Additional links:

https://www.optimizely.com/ https://github.com/splitrb/split/

http://whichtestwon.com http://unbounce.com/

http://blog.booking.com/hamburger-menu.html http://blog.booking.com/concept-dne-execution.html

Gracias!