-
Notifications
You must be signed in to change notification settings - Fork 0
/
assignment5.html
142 lines (109 loc) · 7.58 KB
/
assignment5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assignment3.css">
<title>Assignment Ⅴ</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<style>
.content{
width:1000px;
background: white;
text-align: left;
margin-left: auto;
margin-right: auto;
display:block;
border: solid;
border-color: #898989;
box-shadow:0px 0px 10px 5px #aaa;
padding: 50px;
border-top:none;
}
.table img{
width: 60%;
text-align: center;
box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
}
.feature img{
width:100%;
box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
left:0;right:0;top:0;bottom:0;
}
.i {
color:#898989"
}
</style>
</head>
<body>
<div class="feature">
<img src="a5_hero.png" width="30%">
</div>
<div class="content">
<h1>🐱<u>爲食貓 Usability Test & A/B Test </u></h1>
<i style="color:#898989"> Assignment Ⅴ · by Luo Yin</i>
<br>
<br>
<p>
The proposed solution will focus on the development of a community (paid subscription-based) platform that serves to connect mainland students studying in Hong Kong with mainland prepackaged food manufacturers/companies. The “hook” is the free home-styled recipes to attract student users. While this platform earns money from making membership fees and the profits from acting as the middleman. The membership system can provide users with more discounts, including free delivery fees, and home delivery when up to 200HKD. This can save their time and money on the purchase.
</p>To place an order of pre-packaged food is the most important functional requirement that needs to be validated. Both the usability test and A/B test will be conducted to obtain feedback for the validation. The usability test can provide qualitative responses from 5 chosen users from the target persona group regarding the “why”, reasons they articulated verbally in the test engagement, and the AB test results can provide quantitative responses coming from a broader audience base regarding the “what” — whether people really click the button to buy or not.</p>
<p>
Three usability tasks were designed to test the ease of use in purchase:<br>
1. Where would you click to be redirected to the purchase page?<br>
2. How would you get more details about the products?<br>
3. Buy the product.
</p>
<p>
Three post-test questions were also designed to obtain recommendations for improvement:<br><br>
1. Please rate the overall process: 5 as very satisfied, 1 as very dissatisfied<br>
2. What difficulties did you encounter in the process?<br>
3. What you expect to know from the product page?<br>
4. What you expect to know from the detail page? <br>
5. How do you think the page can be improved?<br>
</p>
<p>
<b>A/B Test One:</b><br>
The homepage includes the two most important functions of the website – the recipe function and the pre-packaged food purchase function. For one thing, the recipe function (free) attracts users to know more about the website and increases retention time. It may increase users' goodwill towards the site because it offers free recipes. For another, the pre-packaged food purchase function is essential for the monetization of the website. This A/B test is designed to see whether the display order on the homepage will influence the click rate of the pre-packed food purchase function. <br><br>
The original version: the recipe function shows up first, then the prepackaged food purchase function.<br><br>
The variant 1 version: the prepackaged food purchase function shows up first, then the recipe function.
</p>
<img src="assign5_02.png" width="30%"><br><br>
<p>
<b>A/B Test Two:</b><br>
In this test, we check whether more information given on the sign-up page will increase the sign-up rate. This is because we assumed that there are two kinds of people visiting the sign-up page: the hesitators and the determinists. The former ones need more information/CTAs to complete the sign-up process. Therefore, more membership benefits would be provided in version one to test if more conversions would be achieved.<br><br>
The original version: no membership benefits details would be given<br><br>
The variant 1 version: membership benefits details would be given at the top of the page
</p>
<img src="assign5_04.png" width="50%"><br><br>
<!--Results!-->
<h2>The usability result can be seen as follows:</h2>
<p>All participants completed three tasks successfully. As for the time to finish each task, task 2 took the longest time (mean= 8). This may be due to the unclear CTA in the product page – users have to have to click the picture to be redirected to the detail page (on the mobile), or to have their mouse hover on the picture (on the computer). </p>
<img src="assign5_01.png" width="70%"><br><br>
<h3>① Recommendations from participants:</h3>
<p><b>For the design part:</b></p>
<p>1. Use filters, adjust the saturation, change the warmth, bump up the contrast, and use other photo editing techniques to make the images better fit in with the harmony of a web design.<br> <br> 2. The style of the product images should be more consistent.</p>
<p><b>For the function part:</b></p>
<p>1. Page loading speed is relatively slow.<br><br>
2. Lack clear CTA to buy unless you move your mouse to the picture<br><br>
3. The mobile version lacks a bottom to scroll to the top quickly.
</p><br>
<h3>② Comments from venue owners:</h3>
<p>1. Can have some soft advertising in the recipe section so that the purchase rate could increase.<br><br>
2. More information should be presented on the product detail pages.
</p><br><br>
<!--ABtest-->
<h2>The A/B test results can be seen as follows:</h2><br>
<h3>A/B Test One Result:</h3>
<p>From the result, it can be suggested version 1 would have more chances to be clicked by users than the original version (see A/B test comparison picture).</p>
<img src="assign5_03.png" width="70%"><br>
<h3>A/B Test Two Result:</h3>
<p>From the result, it can be implied that if membership benefits are highlighted again in the sign-up page, more users would like to register for our membership plan (see A/B test comparison picture).</p>
<img src="assign5_05.png" width="70%"><br><br>
<p>Combing the results from the usability test and A/B test, as well as recommendations, put forward by interviewees, the prepackaged food purchase function would be shown up first, and more membership benefits would be highlighted again on the sign-up page (to be realized in the final project). In this way, users can know what the main function this website can offer as well as place an order as soon as possible – a win-win situation for both the website and the users.</p>
<p>You can find out more about this topic <a href="https://hkdesign.org/to-refine-the-weishimao-website/">here.</a></p>
</div>
</body>
</html>