-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcrucible-1.html
More file actions
241 lines (238 loc) · 19.9 KB
/
crucible-1.html
File metadata and controls
241 lines (238 loc) · 19.9 KB
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!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="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+TC">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,400,500,600,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Horizontal.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body style="background-color: rgb(224,232,222);">
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color: rgb(224,232,222);font-family: 'Noto Serif TC', serif;">
<div class="container"><a class="navbar-brand text-lowercase" href="index.html" style="font-family: 'Noto Serif TC', serif;background-color: rgba(255,255,255,0);color: rgb(78,84,71);font-size: 18px;margin: 0px 0px 0px;">SONA DOLASIA</a><button class="navbar-toggler"
data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link text-lowercase" href="about.html" data-bs-hover-animate="tada" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);">ABOUT</a></li>
<li class="nav-item" role="presentation"><a class="nav-link text-lowercase" href="work.html" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);background-color: #;"><strong>WORK</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="https://drive.google.com/file/d/1ZWuNkIAm7SLdPxyaSuiWzRVCM2zyUAIw/view?usp=sharing" data-bs-hover-animate="tada" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);">resume</a></li>
</ul>
</div>
</div>
</nav>
<div>
<div class="container text-center">
<div class="row">
<div class="col-md-6" style="padding: 0px 0px 10px 0px;"><img class="img-fluid d-inline bounce animated" src="assets/img/Frame%204.png" width="400" style="width: 500px;"></div>
<div class="col-md-6" style="padding: 0px 0px 0px 0px;">
<h1></h1>
<h1 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;font-size: 40px;padding: 60px 0px 0px;color: rgb(78,84,71);"><strong>The Crucible </strong></h1>
<p style="font-family: 'Noto Serif TC', serif;">UI/UX Consultant:<em> September - December 2018</em></p>
<p class="text-left" style="font-family: 'Open Sans', sans-serif;padding: 0px 0px 0px;color: #212529;font-size: 14px;">In the Fall 2018 semester, through <a href="http://berkeleyinnovation.org">Berkeley Innovation</a>, I worked on a redesign of <a href="https://thecrucible.org">The Crucible</a>'s website. I worked with <a href="https://www.marissawu.com/">Marissa Wu</a>,
<a href="https://www.mileyhu.com/">Miley Hu</a>, and <a href="https://www.linkedin.com/in/heididong/">Heidi Dong</a> on this project, with <a href="http://www.jsliu.work/">Jess Liu</a> as our mentor. </p><a class="btn btn-light text-lowercase text-center"
role="button" href="https://www.figma.com/proto/Lz7cnXhABVvV3iKKF0sc3y9A/Crucible-Process-Deck?node-id=1%3A4&viewport=433%2C332%2C0.0739728&scaling=contain" style="background-color: rgba(78,84,71,0.65);font-family: 'Noto Serif TC', serif;color: rgb(234,234,234);margin: 10px 40px;filter: brightness(100%);opacity: 1;"><strong>VIEW PROCESS DECK</strong></a>
<a
class="btn btn-light text-lowercase" role="button" href="https://www.figma.com/proto/0rsEPYRWNi3UeNYMjZTInp8k/Crucible-x-BI-FINAL-DELIEVERABLES?node-id=1%3A652&viewport=546%2C122%2C0.0632898&scaling=scale-down-width" style="background-color: rgba(78,84,71,0.65);font-family: 'Noto Serif TC', serif;color: rgb(234,234,234);margin: 0px 40px;"><strong>VIEW PROTOTYPE</strong></a>
<header></header>
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;"></p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12" style="color: rgb(200,201,203);">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 0px;background-color: rgba(78,84,71,0.65);color: rgb(234,234,234);font-size: 20px;"><strong>PROJECT OVERVIEW</strong></h3>
</div>
</div>
</div>
</div>
<div></div>
<div class="shadow"></div>
<div class="text-left" style="padding: 20px 0px 30px 0px;">
<div class="container">
<div class="row" style="font-family: 'IBM Plex Sans', sans-serif;">
<div class="col-md-6" style="padding: 0px 0px 30px 0px;">
<p style="padding: 10px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">My team worked with the Oakland-based nonprofit, <a href="https://thecrucible.org">The Crucible</a> on a web UI/UX project. The Crucible is <strong>the largest industrial arts education facility in the United States</strong>, hosting
adult and youth classes in departments including blacksmithing, glass blowing, neon, woodworking, ceramics, etc. <br></p>
<p style="padding: 10px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">The <strong>initial goals</strong> for the project were to <strong>increase conversions</strong> and <strong>reduce the abandoned cart rate </strong>on the website. After conducting user research, we determined that the issues were
more related to the <strong>navigation of the website</strong>, and how information about classes is presented. Over the course of the fall 2018 semester, our team redesigned specific pages of the website related to class discovery
to address the issue.<br></p>
<p style="padding: 10px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">Our project was <strong>split into four sprints</strong>; user research, ideation, iteration, and user testing. Each of us led one of these two-week sprints and organized weekly meetings with The Crucible to present our progress. <strong>I served as the sprint leader for the ideation portion of the project. </strong><br></p>
</div>
<div class="col-md-6 text-center" style="padding: 0px 0px 10px 0px;"><img src="assets/img/crucible%20screens.png" height="550" style="padding: 0px 0px 10px 0px;"></div>
<div class="col-md-12">
<header></header>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>SPRINT 1: USER RESEARCH </strong></h3>
</div>
</div>
</div>
</div>
<div></div>
<div style="padding: 20px 0px 0px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12" style="font-family: 'Open Sans', sans-serif;font-size: 14px;">
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px;">We set out with two questions:<br></p>
<ol style="padding: 0px 70px;font-family: 'Open Sans', sans-serif;">
<li>How can we<strong> increase conversions and reduce abandoned cart rates</strong>?</li>
<li>How can we<strong> improve the class registration process </strong>on the website?</li>
</ol>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center" style="padding: 0px 0px 10px 0px;"><img class="img-fluid" src="assets/img/Frame%2022.png" width="650">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;"><strong>KEY INSIGHTS</strong></p>
<ol style="padding: 0px 70px;font-family: 'Open Sans', sans-serif;font-size: 14px;">
<li class="text-left"><strong>Mobile Reponsivness: </strong>Several pages were unwieldy to view on mobile, especially in regards to lengthy scrolling and class browsing.<br></li>
<li class="text-left"><strong>Visual Design:</strong> The contrast of colors made some parts of the site more difficult to read, such as the checkout screen.<br></li>
<li class="text-left"><strong>Navigation:</strong> Users had trouble navigating when asked to find certain pages.</li>
<li class="text-left"><strong>Information Hierarchy:</strong> Typography and layout on class information pages could be more effective.<br></li>
</ol>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>SPRINT 2: IDEATION</strong></h3>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 10px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px;font-size: 14px;">We began the ideation portion of the project by creating two user flows of a user finding an adult jewelry class. <br></p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/image%204.1.png" width="500">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 16PX;padding: 20px 0px 0px 30px;"><strong>CURRENT USER FLOW</strong></p>
<p class="text-left" style="padding: 0px 0px 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">This flow demonstrates the current checkout flow, which contains many unnecessary sub-pages that don’t give any additional information and increase the time needed to find a class. <br></p>
</div>
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/image%204.png" width="500">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 16PX;padding: 20px 0px 0px 30px;"><strong>IDEAL USER FLOW</strong></p>
<p class="text-left" style="padding: 0px 0px 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">This flow was created with our key research findings. We decided to remove some intermediate pages, to provide useful information more quickly, and add easier options to find and add classes to check out. <br></p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 10px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 40px 0px 0px 30px;"><strong>LOW & MID-FIDELITY PROTOTYPES</strong></p>
<p class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">We focused on redesigning the major pages in the ideal checkout flow, which included <strong>the class search, class detail, departments, and department detail pages,</strong> to address the identified key insights of improving visual
design and information hierarchy.<br></p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-4 text-center"><img class="img-fluid" src="assets/img/download.png" width="450px"><small style="font-family: 'Open Sans', sans-serif;">Class Search </small><img class="img-fluid" src="assets/img/download%20(2).png" width="450" style="padding: 10px 0px;"><small style="font-family: 'Open Sans', sans-serif;">All Departments</small></div>
<div
class="col-md-4 text-center"><img class="img-fluid" src="assets/img/Class+detail.png" width="450px"><small style="font-family: 'Open Sans', sans-serif;">Class Detail</small></div>
<div class="col-md-4 text-center"><img class="img-fluid shadow" src="assets/img/download%20(1).png" width="450px"><small style="font-family: 'Open Sans', sans-serif;">Class Detail - Confirmation</small><img class="img-fluid" src="assets/img/download%20(3).png" width="450px" style="padding: 10px 0px;">
<small
style="font-family: 'Open Sans', sans-serif;">Department Detail</small>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>SPRINT 3 + 4: ITERATION & USER TESTING</strong></h3>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 10px 0px 0px 30px;"><strong>USER TESTING</strong></p>
<p class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">After iterating on our design and creating a mid-fidelity prototype with colors and pictures, we went out for another round of user testing. We did user testing with two methods: <strong>online testing through usertesting.com</strong>,
where we hoped to test our prototype with a wider demographic range, and <strong>in-person testing</strong>, through which we would observe users’ actions and get more detailed feedback. <br></p>
<p class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">In total,<strong> we conducted 6 online testing trials and 3 in-person testing trials</strong>. Our major objective was to test our<strong> visual design</strong>, including color palette and typography, as well as <strong>the user flow</strong>. <br></p>
<p
class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">The testing feedback was in accordance with the ease of use of our user flow. Some issues in terms of visual design were brought up during the testing sessions. For instance, the color of the dots on the Membership page caused confusion
to one user, and we fixed that by changing the gradient colors to one color to indicate that the benefits for different membership types are consistent. <br></p>
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 10px 0px 0px 30px;"><strong>FINAL DELIVERABLES </strong></p>
<p class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">We further iterated on our design based on user testing feedback. We finalized the visual design and iterated on the pages. <br></p><img class="img-fluid" src="assets/img/Background.png" width="1000px"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>REFLECTION </strong></h3>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-6" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 14px;">
<p style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;">Looking back on this project, there are some things I would want to improve upon. </p>
<ul style="padding: 0px 0px 0px 70px;">
<li style="font-family: 'Open Sans', sans-serif;">I would want to conduct <strong>more user testing with the high fidelity mockups</strong>. While we were able to test our final deliverables, I wish we had time to test more. In addition, since there were only a number of screens
we mocked up, it was difficult to get accurate user tests, given there were only a few pages to choose from. </li>
<li style="padding: 10px 0px;font-family: 'Open Sans', sans-serif;">I would want to <strong>iterate further on the department page</strong>. This page was tricky, and was re-designed it multiple times. I wonder if we could find cleaner ways to organize all the information the client wanted displayed. </li>
</ul>
</div>
<div class="col-md-6 text-center"><img class="img-fluid" src="assets/img/crucible.jpg" width="500"><small style="padding: 30px;font-family: 'Open Sans', sans-serif;">My team and our client at the Berkeley Innovation showcase!</small></div>
</div>
</div>
</div>
<div class="footer-basic" style="background-color: rgb(224,232,222);">
<footer>
<ul class="list-inline"></ul>
<p class="copyright" style="font-family: 'IBM Plex Sans', sans-serif;">Sona Dolasia © 2019</p>
</footer>
</div>
<div></div><br>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
</body>
</html>