-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheckout.html
147 lines (129 loc) · 7.26 KB
/
checkout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TakeLessons Checkout by Adam Armstead</title>
<meta name="description" content="TakeLessons Mobile Site by Adam Armstead">
<meta name="keywords" content="">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<!-- CSS-->
<!-- Google web fonts. You can get your own bundle at http://www.google.com/fonts. Don't forget to update the CSS accordingly!-->
<link href='//fonts.googleapis.com/css?family=Raleway:800,300,200' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/flexslider/flexslider.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/fontello-codes.css">
<link rel="stylesheet" href="css/fontello-embedded.css">
<link rel="stylesheet" href="css/fontello-ie7.css">
<link rel="stylesheet" href="css/fontello-ie7-codes.css">
<!-- end CSS-->
<!-- Google Analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54903618-1', 'auto');
ga('send', 'pageview');
</script>
<!-- end Google Analytics-->
<!-- JS-->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- end JS-->
</head>
<body id="home">
<!-- header area -->
<header class="clearfix">
<div class="wrapper">
<div id="banner">
<div id="logo"><a href="index.html#checkout">Back to Adam Armstead's Portfolio</a></div>
</div>
<div class="intro_internal">
<h1>TakeLessons Checkout</h1>
</div><!-- end Intro -->
</div>
</header><!-- end header -->
<section class="whitebg clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_7">
<h1>The Problem</h1>
<p>The business model for TakeLessons is that the company takes a percentage of the money a student pays and passes the remaining amout on to the teacher as lessons are taught.</p>
<p>In order to maximize revenue, it was imperative that we address the key workflow of searching for, selecting, and ultimately booking lessons with an instructor. The existing checkout funnel had several seemingly unnecessary steps that we wanted to revisit and the design just generally looked very dated compared with the more updated home page.</p>
<p>Strategically, we also needed to maximize the number of students choosing to book online rather than calling into our sales team. It wasn't scalable to keep hiring more sales personnel as the traffic and sales grew.</p>
</div>
<div class="grid_5 rightfloat">
<img src="images/checkout_old.png">
</div>
</div>
<div class="grid_12">
<img src="images/checkoutflow_old.png">
</div>
</section><!-- end section area -->
<section class="bluebg clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_5">
<img src="images/checkout_proto.png">
</div>
<div class="grid_7 rightfloat">
<h1>The Process</h1>
<p>I did extensive research shadowing our sales team on the phones to discover not only what the blockers were for completing a purchase online, but also how the sales team was walking the customer through the different decisions they had to make. Once they chose a teacher, the student also had to decide on the lesson location, the lesson length, and the number of lessons to purchase. Two things became clear during this shadowing: <ul><li>Decisions about lesson length and quantity are almost always made at the same time to arrive at an acceptable total dollar amount for the transaction.</li><li>Around 50% of the people calling in were not ready to commit to a specific day and time or to sign up for recurring lessons.</li></ul></p>
</div>
</div><!-- end .row div -->
<div class="row">
<div class="grid_7">
<p>I sketched out and prototyped a new checkout funnel that more dynamically tied the decisions about length and quantity together, having the user construct their "Lesson Package". The new funnel also placed the schedule selection step as an optional step after the student has purchased lessons. This updated funnel was tested with participants on UserTesting.com and then, after implementation, as an A/B test with the existing checkout funnel.</p><a href="http://aro2oo.axshare.com/search_results.html" target="_blank">Try it for yourself!</a>
</div>
<div class="grid_5 rightfloat">
<img src="images/checkout_scheduling.png">
</div>
</div><!-- end .row div -->
</div><!-- end .wrapper div -->
</section><!-- end section area -->
<section class="whitebg clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_5">
<img src="images/checkout-hero.png">
</div>
<div class="grid_7 rightfloat">
<h1>The Outcome</h1>
<p>During the A/B test it quickly became clear that by continuing to test the existing flow alongside the new flow we were leaving money on the table. The new flow nearly doubled online conversion for both sales and leads and increased the percentage of sales completed online by ~50%. It did this by removing obstacles and better organizing the choices the user had to make.</p>
</div>
</div>
</section><!-- end section area -->
<!-- footer area -->
<footer>
<div class="wrapper clearfix">
<a href="mailto:[email protected]" class="mailicon">
<i class="icon-mail-alt"></i>
</a>
<a href="https://linkedin.com/in/AdamArmstead" class="linkedinicon" target="_blank">
<i class="icon-linkedin"></i>
</a>
<a href="https://twitter.com/AdamArmstead" class="twittericon" target="_blank">
<i class="icon-twitter"></i>
</a>
<a href="https://facebook.com/adamarmstead" class="facebookicon" target="_blank">
<i class="icon-facebook"></i>
</a>
</div>
</footer><!-- #end footer area -->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script defer src="js/flexslider/jquery.flexslider-min.js"></script>
<!-- fire ups - read this file! -->
<script src="js/main.js"></script>
</body>
</html>