generated from sarahbawabe/cs1300-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
166 lines (145 loc) · 7.57 KB
/
home.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A/B Testing</title>
<link rel="stylesheet" href="bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Piazzolla:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto mb-lg-0">
<li class="nav-item"> <a class="nav-link" href="#Overview">Overview</a></li>
<li class="nav-item"> <a class="nav-link" href="#Hypothesis">Hypothesis</a></li>
<li class="nav-item"> <a class="nav-link" href="#Data">Data Collection</a></li>
<li class="nav-item"> <a class="nav-link" href="#Info">Infographic</a></li>
<li class="nav-item"> <a class="nav-link" href="#Takeaway">Takeaways</a></li>
</ul>
</div>
</div>
</nav>
<!-- Landing Area Text + Underlayed Image -->
<div id="Home" class="d-flex flex-column cacti justify-content-center align-items-center text-center">
<div class="boost">
<h1> A/B Testing</h1>
<h3>A Shopping Experiment</h3>
</div>
</div>
<!-- Featured Product Cards: Grid + Flex -->
<div id="Overview" class="overview">
<h4 class="text-center">Overview</h4>
<div class="container-fluid text-center">
<hr class="mb-4">
<p>
I began this assignment by taking a look at a cacti-shopping website. My goal was to create two
versions of this site so that I could test how people's shopping habits were affected by each
layout. <br><br>
You can take a look at my websites
<a href="https://pacific-dawn-35735.herokuapp.com/">here</a>. Each version of the website shows up
with a 50% chance, so refresh the page a few times until you see them both. I've also
included screenshots of each below! <br><br>
</p>
<div class="d-flex flex-row flex-wrap align-items-center justify-content-center pt-3">
<div class="d-flex flex-column pr-4">
<h5>Site A</h5>
<img src="site_a.png" class="castle">
</div>
<div class="d-flex flex-column">
<h5>Site B</h5>
<img src="site_b.png" class="castle">
</div>
</div>
<br>
<p>
Needless to say, there are some key differences between the two sites. Site A shows
the items in a 2x2 grid. Importantly, you can't even see the red 'cart'
checkout button, because it is further down on the page. On the other hand, on Site B,
the items are in a single line and the checkout button is within view.<br><br>
The rest of the project will go as follows: <br><br>
<ol style="text-align: center; list-style-position: inside; padding-bottom: 2rem;">
<li>Hypothesis of user behavior on Site A vs. Site B</li>
<li>A discussion of the data collection process</li>
<li>Infographics illustrating the data results</li>
<li>Key takeaways from the experiment</li>
</ol>
</p>
</div>
</div>
<div id="Hypothesis" class="usability">
<h4 class=text-center>Hypothesis</h4>
<div class="container-fluid">
<hr class="mb-4">
<p class="text-center"> My first step in this process was to make hypothesis that reflect
the way the site's designs are different. I think my changes, as you will read below, lead
to some interesting conclusions.
</p><br>
<h5 class="text-center">Time to Completion:</h5>
<p class="text-center">
My null hypothesis is that the time to completion on Site A is the same as the time to
completion on site B. My alternative hypothesis is that the time to completion is larger
on Site A. I believe this because, on Site B, we see all of the items we can buy and the
checkout button on one page. People don't need to waste time scrolling to location the checkout button.
</p>
<br><br>
<h5 class="text-center">Return Rate:</h5>
<p class="text-center">
Once again, my null hypothesis is that the return rate on Site A is the same as the return rate
on site B. My alternative hypothesis is that the return rate is higher
on Site A. I believe this because, on Site A, we might accidentally checkout without realizing
how much is in our cart. I think we are more likely to make this mistake on Site A because
the checkout button is hidden and the counts for each item in the cart are organized in the 2x2
form instead of linearly, as in Site B.
</p>
</div>
</div>
<div id="Data" class="low_fid">
<h4 class=text-center>Data Collection</h4>
<div class="container-fluid">
<hr class="mb-4">
<p class="text-center">
After making my hypothesis, it was time to put them to the test. In order to do this,
I devised a scheme to collect data on my two sites. These are the steps I took:<br><br>
</p>
<ol style="text-align: center; list-style-position: inside; padding-bottom: 2rem;">
<li>Recruit users to shop for $150 of plants (randomly assigned to Site A or B)</li>
<li>Inspect and clean heroku logs for each user session</li>
<li>Analyze time to completion and return rate for each user</li>
<li>Aggregate user data with other users of the same site version</li>
<li>Compute statistics (t-test and chi^2-test) for time to completion and return rate on each site</li>
</ol>
</div>
</div>
<div id="Info" class="hi_fid">
<h4 class=text-center>Infographic</h4>
<div class="container-fluid">
<hr class="mb-4">
<p class="text-center">
Below is an inforgraphic I created that shows the results of my statistical analyses.
<br><br>
<img src="info.png" width="40%">
</p>
</div>
</div>
<div id="Takeaway" class="resp">
<h4 class=text-center>Takeaways</h4>
<div class="container-fluid text-center">
<hr class="mb-4">
<p class = "text-center">Here are my main takeaways from this project: </p><br>
<ol style="text-align: center; list-style-position: inside; padding-bottom: 2rem;">
<li>Site design really matters and can impact user behavior!</li>
<li>Visual clarity is key to good design. In Site B, the better performing site, users saw all necessary information at the same time.</li>
<li>We could have collected better data if users had not seen other similar websites prior to testing.</li>
<li>Another interesting aspect of the study could have been to measure user satisfaction with their shopping experience.</li>
</ol>
</div>
<br><br>
</div>
</body>
</html>