-
Notifications
You must be signed in to change notification settings - Fork 0
/
crucible.html
200 lines (179 loc) · 11.8 KB
/
crucible.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>sona dolasia</title>
<link rel="icon" href="assets/img/logo.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- <link rel="stylesheet" href="assets/css/Transparent-Overlay-On-Image-On-Hover.css"> -->
<link rel="stylesheet" href="assets/webfontkit/stylesheet.css">
</head>
<body class="text-center" style="background:#FBEC9E;">
<div class="container">
<div class="row" style="padding: 100px 0px 0px 0px;">
<div class="col-sm-6">
<h1 class="text-left" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="work.html">view work</a></h1>
</div>
<div class="col-sm-6">
<h1 class="text-right" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="about.html">learn more</a></h1>
</div>
</div>
</div>
<h2 class="display-1" style="font-size: 100px;font-style: normal;margin-top: 100px"></h2>
<div class="container">
<div class="row" style="padding: 0px 0px 100px 0px;">
<div class="col-sm-6 text-left">
<p style="font-size: 36px; font-family: 'apercu-boldbold';">The Crucible</p>
<p style="margin: 10px 0px 10px; font-family: 'aperculight'; font-size: 18px;">Improving class registration and checkout flow for Oakland-based industrial arts facility.</p>
<div style="font-family: 'aperculight';font-size: 15px; margin: 50px 0px 10px;">
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Team:</a> Sona Dolasia, Marissa Wu, Miley Hu, Heidi Dong, Jess Liu (mentor) </p>
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Role:</a> Ideation Lead</p>
<p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Timeline:</a> September - December 2018</p>
<p><a style="font-family: 'apercu-boldbold';">Deliverables:</a> Figma Prototypes, User Research Report</p>
<a href="https://www.figma.com/proto/0rsEPYRWNi3UeNYMjZTInp8k/Crucible-x-BI-FINAL-DELIEVERABLES?node-id=1%3A652&viewport=548%2C470%2C0.072831891477108&scaling=min-zoom" target="_blank"><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark" type="button" style="padding: 10px 50px;color: #FBEC9E;margin: 30px 0px 10px 0px;">view protoype</button></a>
</div>
</div>
<div class="col-sm-6 text-right">
<img class="shadow" src="assets/img/crucible.gif" style="height: 300px;margin: 0px 0px;">
</div>
</div>
</div>
<!-- </div><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 40px 0px 0px 0px;">view full case study</button> -->
<!-- <h5 class="text-center" style="margin: 50px 0px 10px 0px;font-size: 24px;">the short story</h5>
<h6 class="text-center body" style="margin: 0px 0px 10px 0px;">a 6 minute abridged case study</h6> -->
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="font-size: 24px;font-family: 'apercu-boldbold';">context</p>
</div>
<div class="col-sm-8 text-left" style="margin: 10px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p >As a product design consultant for Berkeley Innovation, my team worked with oakland nonprofit, The Crucible, the largest industrial arts education facility in the United States.</p>
<p>The initial goals for the project were to increase conversions and reduce the abandoned cart rate for class registration on the website.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">research</p>
</div>
<div class="col-8 text-left" style="margin: 40px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p>We set out with two questions to focus our research:</p>
<ol style="padding: 0px 60px;">
<li style="padding: 0px;">How can we increase conversions and reduce the abandoned cart rate?</li>
<li style="padding: 5px 0px 0px 0px;">How can we improve the class registration process as a whole?</li>
</ol>
<p style="padding: 10px 0px 0px 0px;">We conducted four different research methods to motivate our designs:</p>
<div class="row" style="margin: 0px; padding:0px;">
<div class="col-md-6" style="margin: 0px; padding:0px 20px 0px 0px;">
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Usability Testing On Existing Site</p>
<p >We interviewed 12 people and asked them to perform several tasks on the website to find out current pain points in the user flow based on their feedback.</p>
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Customer Interviews</p>
<p >We conducted 2 phone interviews with The Crucible’s customers about their past experiences with online class registration and the website in general.</p>
</div>
<div class="col-md-6" style="margin: 0px; padding:0px 20px 0px 0px;">
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Secondary Research</p>
<p >We analyzed 5 online checkout flows of various industries to understand the best practices involved with user experience and information hierarchy.</p>
<p style="padding: 10px 0px 0px 0px;font-family: 'apercu-boldbold';">Customer Survey</p>
<p >We sent out an online survey and gathered 22 responses regarding customers’ past experience registering for classes at The Crucible.</p>
</div>
</div>
</div>
</div>
</div>
<!-- INSIGHTS -->
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">insights</p>
</div>
<div class="col-8 text-left" style="margin: 35px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p style="font-family: 'apercu-boldbold';margin:5px 0px;">Mobile Responsivness</p>
<p>Several pages were unwieldy to view on mobile, especially in regards to lengthy scrolling and class browsing.</p>
<p style="font-family: 'apercu-boldbold'; padding: 10px 0px 0px 0px; margin:5px 0px;">Visual Design & Accessibility</p>
<p>The contrast of colors made some parts of the site more difficult to read, such as the checkout screen.</p>
<p style="font-family: 'apercu-boldbold';padding: 10px 0px 0px 0px; margin:5px 0px;">Navigation</p>
<p>Users had trouble navigating when asked to find certain pages.</p>
<p style="font-family: 'apercu-boldbold';padding: 10px 0px 0px 0px; margin:5px 0px;">Information Hierarchy</p>
<p>Information layout on class pages could be more effective.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">low fidelity</p>
</div>
<div class="col-sm-8 text-left" style="font-family: 'aperculight';font-size: 15px;">
<img class="shadow" src="assets/img/cruc-low.png" style="width: 400px;margin: 50px 0px 0px 0px;"><p style="margin: 20px 0px 0px 0px;">User flow of the existing product
<a href="assets/img/cruc-low.png" target="_blank"> <u>(view full image) </u></a></p>
<img class="shadow" src="assets/img/cruc-low-1.png" style="width: 400px;margin: 50px 0px 0px 0px;"><p style="margin: 20px 0px 0px 0px;">Ideal user flow for our designs
<a href="assets/img/cruc-low-1.png" target="_blank"> <u>(view full image) </u></a></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">mid fidelity</p>
</div>
<div class="col-sm-8 text-left">
<div class="row" style="width: 700px;">
<div class="col-sm-6" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<img class="shadow" src="assets/img/download.png" style="width: 325px;">
<p style="margin: 20px 0px 40px 0px;">Class Search</p>
<img class="shadow" src="assets/img/download%20(1).png" style="width: 325px;">
<p style="margin: 20px 0px 40px 0px;">Class Details - Confirmation</p>
<img class="shadow" src="assets/img/download%20(3).png" style="width: 325px;">
<p style="margin: 20px 0px 40px 0px;">Department Detail</p>
</div>
<div class="col-sm-6" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<img class="shadow" src="assets/img/Class+detail.png" style="width: 325px;margin: 0px 0px 10px 60px;">
<p style="margin: 20px 0px 40px 60px;">Class Details</p>
<img class="shadow" src="assets/img/download%20(2).png" style="width: 325px;margin: 0px 0px 10px 60px;">
<p style="margin: 20px 0px 40px 60px;">All Departments</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">high fidelity</p>
</div>
<div class="col-9 text-left"><img src="assets/img/Background.png" style="width: 700px;margin: 50px 0px 10px 60px;">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">reflection</p>
</div>
<div class="col-sm-8 text-left" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
<p>This was my first project in berkeley innovation, and my first project doing work for a client. I learned so much from my team and our client about the design process.</p>
<p>Looking back, I wish we had time to conduct more user testing with the high fidelity screens. Since there were only a number of screens we designed up, it was difficult to get accurate testing on the navigation improvements, given there were only a few pages to choose from.</p>
<img class="shadow" src="assets/img/crucible.jpg" style=" width:500px">
<p style="margin: 20px 0px 40px 0px;">My team and our client at the Berkeley Innovation showcase!</p>
</div>
</div>
</div>
<div class="container">
<div class="row" style="margin: 70px 0px 100px 0px; padding: 0px;">
<div class="col-md-6" >
<h5 class="text-left" style="padding: 0px; color: #333333; font-weight: 100; font-size: 18px;font-family: 'apercumono'; ">© sona dolasia, 2020</h5>
</div>
<div class="col-md-6">
<!-- <h5 class="text-right" style="padding: 0px; color: #ffffff;font-weight: 100; font-size: 20px;font-family: 'Apercu-Mono';">invert</h5> -->
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>