-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
406 lines (350 loc) · 16.9 KB
/
index.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
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href= "css/style.css" type= "text/css">
<title>UX/UI Homework 20</title>
</head>
<body>
<!-- Nav -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">
<strong>CHT</strong>
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Introduction
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/getting-started/" target="_blank">Problem Statement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank">Iteration & Prototype</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.linkedin.com/in/carolinahurtadotambini/" class="nav-link" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a href="https://www.behance.net/carolinahubb0b" class="nav-link" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/Carolina-start" class="nav-link border border-light rounded"
target="_blank">
<i class="fab fa-github mr-2"></i>CHT GitHub
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Introduction to the business -->
<div class="view" style="background-image: url('images/sj\ cover\ 2.png'); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="text-center black-text mx-5 wow fadeIn">
<p>
<strong>CASE STUDY</strong>
</p>
<h1 class="mb-4">
<strong>Sanjoseca.gov</strong>
</h1>
<p>
<strong>How might we make the website for the City of san Jose user friendly?</strong>
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/49Ji4v-wC9Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>San Jose city Capital of Silicon Valley</strong>
</h1>
<p>
<strong>“This mindset fosters an urban center of innovation, learning, transit, creativity and art in Silicon Valley. Oh, and our weather is killer.”</strong>
</p>
<p>
<strong>This place is unique atracting talent from all over the world, is the 3rd best place to live.</strong>
</p>
<!-- Research section -->
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">RESEARCH</h3>
<div class="row wow fadeIn">
<div class="col-lg-6 col-md-12 px-4">
<div class="row">
<div class="col-1 mr-3">
<i class="fas fa-code fa-2x indigo-text"></i>
</div>
<div class="col-10">
<h5 class="feature-title">San Jose city sounds great! Lets see if users have the same feeling on their current website...</h5>
<p class="grey-text">We conducted a user testing with 4 users, on the current website of sjca.gov with four tasks that were more common used by a resident. 50% of the users fail in the task: “find rates and fees for garbage and recycle for a single family.” </p>
</div>
</div>
<!--/First row-->
<div style="height:30px"></div>
<!--Second row-->
<div class="row">
<div class="col-1 mr-3">
<i class="fas fa-book fa-2x blue-text"></i>
</div>
<div class="col-10">
<h5 class="feature-title">Why?</h5>
<p class="grey-text">The experience for them was to heavy,
too much information, they feel lost:
where to start? where to end? how to follow the steps? Where I am, maybe I been here before?
</p>
</div>
</div>
<!--/Second row-->
<div style="height:30px"></div>
<!--Third row-->
<div class="row">
<div class="col-1 mr-3">
<i class="fas fa-graduation-cap fa-2x cyan-text"></i>
</div>
<div class="col-10">
<h5 class="feature-title">/*This users never imagine that they have to find a PDF file to show the rates fees. */</h5>
<p class="grey-text">Let`s see what else we are going to find as a researchers in this government site?</p>
</div>
</div>
<!--/Third row-->
</div>
<!--/Grid column-->
<div class="col-lg-6 col-md-12">
<div class="col-md-6 mb-4">
<img src="images/Animation .gif" class="img-fluid z-depth-1-half" alt="">
</div>
</div>
</div>
<!--/Grid row-->
</section>
</div>
<!--/Grid row-->
</div>
<!--/Grid column-->
</div>
<!--/Second row-->
</section>
<!--Section: More-->
</div>
</main>
<!-- Problem Statement section -->
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">OVERVIEW</h3>
<div class="row wow fadeIn">
<div class="col-lg-6 col-md-12 px-4">
<div class="row">
<div class="col-1 mr-3">
<i class="fas fa-code fa-2x indigo-text"></i>
</div>
<div class="col-10">
<h5 class="feature-title">The website for the City of San Jose needs a more user friendly design. It is currently very information heavy. While transparency and open government are essential standards, there is a need to assess what is being offered and to ensure that content being offered is in line with content that users need regularly and to organize it in a way that will ensure they can find what they’re looking for easily.San Jose city sounds great! Lets see if users have the same feeling on their current website...</h5>
<p class="grey-text">Redesign the website by applying established UI standards based on data gathered through user research and continual user testing so that the result is a simpler, easier and user-friendly way for users to find necessary information efficiently.</p>
</div>
</div>
<div class="col-lg-6 col-md-12">
<p class="h5 text-center mb-4">.</p>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="col-md-6 mb-4">
<strong>ROLE: </strong></span><br>User Experience & Interface Design, User Research
<br>
<br>
<span class="bold">
<strong>TEAM:</strong></span>
<br>Darya S.<br>Kiri R.<br>Namrata BA.<br>Carolina H.T.<br>
<br>
<span class="bold"><strong>TOOLS USED:</strong><br></span>Figma, InVision, Photoshop, Pen and Paper<br>
<br>
<span class="bold"><strong>DURATION:</strong><br></span>Spring 2020
</div>
<!--/Grid row-->
</div>
<!--/Grid column-->
</div>
<!--/Second row-->
</section>
<!--Section: More-->
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">USER PERSONA</h3>
<p>From the User Research we developed our User persona. Meet Hailey Wright! </p>
<img src="images/User Persona.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">WEBSITE EVALUATION</h3>
<p>Next we did a Heuristic evalaution of the existing website</p>
<img src="images/WEBSITE EVALUATION.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">WIREFLOW ANALYSIS</h3>
<p>User research revealed that our government site is frequently used to find out about recycling & garbage rates and rules, so we created our Wireflow about this task. Current wireflow for “Recycling & Garbage Rate for a single-family home”
</p>
<img src="images/WIREFLOW ANALYSIS.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<!-- Iteration section -->
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">ITERATE</h3>
<p><strong>How can we achive our goal?</strong></p>
<br>
<br>
<p>// SJ site looks more innovative, diversity, creative and friendly. //</p>
<br>
<p>We start creating a Moodboard, then the UI Style Guide, with a beautiful icons to make more inclusive and clear the current information at the website and to refresh the SJ site.</p>
<br>
<p>See our process: our sucess and fails on our journey from paper sketches to hi-fi prototype.</p>
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">MOODBOARD</h3>
<img src="images/MOADBOARD.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">IU STYLE GUIDE</h3>
<img src="images/IU STYLE GUIDE.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<!-- Prototype -->
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">PAPER SKETCHES</h3>
<p>As UI Designers we all did our version of the Homescreens. As a team we voted & picked elements from all our ideas.</p>
<img src="images/PAPER SKETCHES.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">LO-FI</h3>
<p>As UI Designers we all did our version of the Homescreens. As a team we voted & picked elements from all our ideas.</p>
<img src="images/Lo-Fi.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">MID-FI</h3>
<img src="images/MID-FI GIF.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">HI-FI</h3>
<img src="images/Hi-Fi 1.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">CONCLUSION</h3>
<br>
<strong>LEARNINGS: </strong>
<br>
<p>Spend more time iterating the lo-fi and mid-fi designs before moving to the hi-fi prototyping.
Test more. Whenever there is a concern about what designs to use, test it before implementation.
The illustrations and colors do not fit with users’ mental models of a government site.
Be mindful of how users interact with the site, what they are searching for, and how to minimize the effort to find the information.</p>
<br>
<br>
<strong>NEXT STEPS:</strong>
<p> Continue to iterate the web & mobile prototypes based on data gathered from user testing.
Use less detailed icons rather than full illustrations for the clickable elements.
Test how users react to photos and icons over the illustrations. Do further AB testing.
Iterate the style guide to be more in line with users’ mental models of a government site.
</p>
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">NEXT STEPS</h3>
<img src="images/NEXT STEPS.svg" class="img-fluid mx-auto" alt="Responsive image">
</section>
</div>
</main>
<main>
<div class="container">
<hr class="my-5">
<section>
<h1 class="mb-4">
<strong>THANKS!</strong>
</section>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>