forked from sarahbawabe/cs1300-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
609 lines (514 loc) · 22.4 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
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
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
<!DOCTYPE html>
<html>
<head>
<title>UIUX Personas - Surfboard</title>
<link rel="stylesheet" href="index.css" />
<!-- TODO: add additional links here! e.g. fonts, icons, more stylesheets, etc. -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div class="outermost-div">
<div class="header">
<h1 class="title">Surfboard</h1>
</div>
<div class="project-description">
<h1 class="title">Project Description</h1>
</div>
<div class="description-problem">
<p class="blurb">
The goal of this project is to step into a user’s shoes. I did this by
observing real users interacting with an interface, a surfboard, and
then interviewed these individuals about their experiences. Lastly, I
created personas based on these users, and illustrated a storyboard
for one of the personas.
</p>
</div>
<div class="interface">
<h1 class="title">Interface</h1>
</div>
<div class="description-surf">
<p class="blurb">
A surfboard enables a user to glide across the ocean surface while
being propelled by a wave. You stand on the body of the surfboard,
while the fins help improve directional stability.
</p>
</div>
<div class="image">
<img src="assets/boardboard.png" />
</div>
<div class="observations">
<h1 class="title">Observations</h1>
</div>
<div class="observes">
<ul class="list">
<li class="list-element">
Carrying a surfboard while walking on the beach is difficult if your
arm is not long enough to reach across the width of the board. This
is because you can therefore not comfortably tuck the surfboard
underneath your arm. Instead, one must hold the surfboard parallel
to the ground and squeeze the surfboard against their oblique.
Annie, who has shorter arms, had to stop periodically to adjust the
surfboard and/or rest while walking.
</li>
<li class="list-element">
While paddling out into the ocean, smaller sized users struggled to
get their surfboard over the oncoming waves. They frequently lost
control of their surfboard.
</li>
<li class="list-element">
Most users sit on their surfboards quite comfortably while waiting
for a good waves to catch, once they have paddled out past the area
where the waves crash.
</li>
<li class="list-element">
Surfboard users that catch many waves, are quick to maneuver their
surfboards in the water. It is as if the surfboard is an extension
of their body.
</li>
<li class="list-element">
In contrast, users that don’t catch as many waves and/or fall upon
attempting to stand up, normally lose track of their board and
struggle to control it.
</li>
<li class="list-element">
Some users hands and/or feet would slip off of the surfboard while
standing or pushing with their hands on the board in an attempt to
stand up.
</li>
<li class="list-element">
Users who successfully stand up normally have smiles on their faces
while riding the wave in.
</li>
</ul>
</div>
<div class="questions">
<h1 class="title">Questions</h1>
</div>
<div class="questioning">
<dl class="list">
<dt>1. How often do you use a surfboard?
</dt>
<dd class='question-element'>
The answers varied between the three participants
with Rachel having used a surfboard only three times,
while Braeden uses one almost everyday.
</dd>
<dt>2. When did you expect to first successfully stand up on a wave today using the surfboard?
</dt>
<dd class='question-element'>
Rachel thought it would take her at least 10 tries before a success,
while Braeden assumed he’d be able to on the first try.
Annie remained in the middle, at around 5 tries.
</dd>
<dt>3. What drew you to surfing and wanting to use a surfboard?
</dt>
<dd class='question-element'>
Braeden’s family and friends all surfed competitively when he was younger,
which in turn led to him wanting to try it. Rachel and Annie
both agreed that using a surfboard looked like a very enjoyable
experience and recently decided to take it up as a hobby due to its exciting and athletic nature.
</dd>
<dt>4. How were you introduced to surfing and using a surfboard?
</dt>
<dd class='question-element'>
All three interviewees would see people using
surfboards at the beach near their respective residences.
Braedan’s friend lent him a surfboard many many years ago, and he instantly fell in love with surfing.
</dd>
<dt>5. How many waves did you catch today?</dt>
<dd class='question-element'>
Annie had caught about 15, Braeden caught 32, and Rachel caught 10.
</dd>
<dt>6. How do you feel or how do you expect to feel when you stand up on the surfboard and ride the wave in to the beach?</dt>
<dd class='question-element'>
All participants described feelings of empowerment, adrenaline,
and joy. “Using a surfboard to effectively walk on water is a rush,” states Braedan.
</dd>
<dt>7. What is the best way to stand on a surfboard to remain upright and balanced?</dt>
<dd class='question-element'>
All participants referenced the classic “athletic stance”, which consists of knees
slightly bent, with your feet a little more than shoulder width apart,
and your arms stretching out from your body for balance.
</dd>
<dt>8. Have you taken a surf lesson to learn how to use a surfboard before? </dt>
<dd class='question-element'>
Rachel and Annie had never taken a
formal surf lesson before, while Braedan trains regularly with a surf coach.
</dd>
<dt>9. Have you ever fallen off your surfboard? </dt>
<dd class='question-element'>
All participants responded that they have.
None of them have sustained any serious injuries,
although Braedan says that injuries are not uncommon when using a surfboard.
</dd>
<dt>10. How do you feel when you fall off of your surfboard?</dt>
<dd class='question-element'>
Rachel expressed feelings of frustration, while Annie and Braedan agreed that
it’s part of the experience. Usually falling off of the surfboard is not a big deal since you
fall into the water. However, Braedan expressed that falling
from a standing position onto your surfboard can be dangerous.
</dd>
<dt dt>11. What keeps you using your surfboard despite falling?</dt>
<dd class='question-element'>
Braedan responded that “it’s all about chasing the swell”,
while Rachel and Annie agree that falling is well worth the payoff of successfully riding your surfboard.
</dd>
<dt>12. What challenges do you face when using your surfboard besides falling? </dt>
<dd class='question-element'>
Annie brought up the fact that her hands slip off of the surface of the board when
they go to stand up, while Rachel said that the board is quite hard and she’s afraid of the board hitting her accidentally.
Lastly Braedan mentioned that for the most part, he doens't run into problems since he's so well practiced.
</dd>
<dt>13. What is the function of the fins on the surfboard?</dt>
<dd class='question-element'>
Everyone replied that the fins make the surfboard more stable so that
you can stand on it and the fins also increases maneuverability allowing you to turn while standing on your surfboard.
</dd>
<dt>14. Where do you usually stand on the surfboard when riding it?</dt>
<dd class='question-element'>
All participants reported that they stand near the middle of the surfboard,
but shift their weight forwards or backwards in response to how the surfboard is gliding on the water.
</dd>
<dt>15. How do you carry your surfboard while walking on the beach?</dt>
<dd class='question-element'>
Braedan and Rachel hold the surfboard underneath their arm, while Annie has to hold the board against her hip.
</dd>
<dt>16. What would you change about the surfboard, if anything, to make it work better for you?</dt>
<dd class='question-element'>
Braedan responded that he would want the surface to be less slick,
to prevent slipping. Annie would want a handle on the board so that it’s easier to transport.
</dd>
<dt>17. Do you find that the surfboard is easily maneuverable when it’s in the water? </dt>
<dd class='question-element'>
Participants responded that the board is easy to maneuver for the most part in the water, but sometimes a
wave can separate the user from the surfboard, in which case then the wave takes control of the surfboard. Braedan
said that it just takes practice.
</dd>
</div>
<div class="empathy-maps">
<h1 class="title">Empathy Maps</h1>
</div>
<div class="title-name">
<h1 class="name">Elite Erica</h1>
</div>
<div>
<p class="descr-user">
Elite Erica is a veteran surfboard user. She has been using a surfboard for more than 10 years and
glides across the water atop her surfboard with ease.
She's committed to being the best surfboard user she can be and works hard to get better.
Despite Erica's wealth of experience, she still falls off of her surfboard at times, due to the slick, wet surface.
Erica represents surfboard users who have either been trained or have been surfing for a very long time and can successfully
stand on their surfboard, turn, and do other tricks.
These users experience less challenges with using a surfboard, but still struggle at times, due to the
variability of ocean and wave conditions.
</p>
</div>
<div class="empathy-grid">
<div class="box1">
<div>
<h2 class="subtitle">Thinks</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
I wonder how I can maximize my stand up time
</li>
<li class="list-element">
I would love to catch 30+ waves today and work on my cross over
step
</li>
<li class="list-element">
It’s really crowded today. I’m not looking forward to having to
weave around all the other surfboard users
</li>
</ul>
</div>
</div>
<div class="box2">
<div>
<h2 class="subtitle">Feels</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
Frustrated by falling off of the surfboard and by people who get
in the way of him efficiently catching wave
</li>
<li class="list-element">
LOVES surfing more than anything else
</li>
<li class="list-element">
Most users sit on their surfboards quite comfortably while
waiting for a good waves to catch, once they have paddled out
past the area where the waves crash.
</li>
<li class="list-element">
Motivated to be the best surfboard user that she can be
</li>
</ul>
</div>
</div>
<div class="box3">
<div>
<h2 class="subtitle">Says</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">“On your left! Please move.”</li>
<li class="list-element">
“My surfboard was not positioned correctly on the wave!”
</li>
<li class="list-element">
“I’m so dissappointed that my hand slipped off of my surfboard
after I caught that super good wave.”
</li>
<li class="list-element">
“My body was positioned too far up on my surfboard that time.”
</li>
</ul>
</div>
</div>
<div class="box4">
<div>
<h2 class="subtitle">Does</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
Uses surfboard in the most efficient and effective way possible
</li>
<li class="list-element">
Walks quickly across beach with board in a comfortable position
and paddles out into the ocean on board very fasts, weaving
between other surfboard users
</li>
<li class="list-element">
Catches lots of waves and stands up successfully almost 100% of
the time
</li>
<li class="list-element">One with the ocean</li>
</ul>
</div>
</div>
</div>
<div class="title-name">
<h1 class="name">Beginner Brittany</h1>
</div>
<div>
<p class="descr-user">
Beginner Brittany is an inexperienced surfboard user who just started surfing. She falls off of her surfboard frequently,
but still enjoys her time and attempts to get better at using her surfboard. Brittany frequently loses control of her surfboard
because of how big and heavy it is. Additionally. she struggles to stay standing on her surfboard for long periods of time.
Brittany represents surfboard users who have little to no experience using a surfboard and are just trying their very best
to use thier surfboard correctly.
</p>
</div>
<div class="empathy-grid">
<div class="box1">
<div>
<h2 class="subtitle">Thinks</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
How do I get better at using my surfboard?
</li>
<li class="list-element">Should I get surf lessons?</li>
<li class="list-element">How can I minmize the amount of times that I fall off of my surfboard?</li>
</ul>
</div>
</div>
<div class="box2">
<div>
<h2 class="subtitle">Feels</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">Peaceful and happy</li>
<li class="list-element">
Inspired by other, more experienced surfboard users
</li>
<li class="list-element">
That she doesn’t know how to use a surfboard very effectively
</li>
</ul>
</div>
</div>
<div class="box3">
<div>
<h2 class="subtitle">Says</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
“How far up should I lie on my surfboard?”
</li>
<li class="list-element">
“Isn’t it nice out today? A great day to use my surfboard!”
</li>
<li class="list-element">
“Oh darn, I just fell off of my surfboard.”
</li>
</ul>
</div>
</div>
<div class="box4">
<div>
<h2 class="subtitle">Does</h2>
</div>
<div class="list">
<ul class="emp-list">
<li class="list-element">
Takes her time walking to the ocean and paddling out on
surfboard.
</li>
<li class="list-element">
Enjoys the sun and the beach vibes. Is more about the whole
experience than only using the surfboard to catch waves
</li>
<li class="list-element">
Falls off of the surfboard a lot, but gets back up each time
</li>
</ul>
</div>
</div>
</div>
<div class="storyboard">
<h1 class="title">Elite Erica: Storyboard</h1>
</div>
<div class="third">
<figure class="figure1">
<p class="caption-box">
<img
src="assets/walking.jpg"
width="400x"
height="390px"
alt="Person holding a surfboard."
/>
<figcaption>
Erica arrives at the beach, holding her surfboard tucked under her arm. She carries her surfboard across the sand towards the ocean.
</figcaption>
</p>
</figure>
<figure class="figure2">
<p class="caption-box">
<img
src="assets/paddleout.png"
width="400x"
height="390px"
alt="Surfer paddling towards a crashing wave."
/>
<figcaption class="caption">
Once Erica gets to the water, she positions herself on top of the surfboard, and quickly begins paddling out toward the crashing waves.
</figcaption>
</p>
</figure>
<figure class="figure3">
<p class="caption-box">
<img
src="assets/sit.jpg"
width="400x"
height="390px"
alt="Surfer sitting on surfboard."
/>
<figcaption class="caption">
Once Erica gets past the crashing waves, she can sit on her surfboard and relax until a good wave approaches.
</figcaption>
</p>
</figure>
<figure class="figure4">
<p class="caption-box">
<img
src="assets/onwave.jpg"
width="400x"
height="390px"
alt="Surfer paddling to catch a wave"
/>
<figcaption class="caption">
When a wave comes, Erica turns her surfboard towards the beach and starts paddling so that her surfboard is posiioned in front of
the wave.
</figcaption>
</p>
</figure>
<figure class="figure5">
<p class="caption-box">
<img
src="assets/push.jpg"
width="400x"
height="390px"
alt="Surfer beginning to stand up on her surfboard."
/>
<figcaption class="caption">
Once, Erica feels the wave pushing her and her surfboard toward the beach, she places her hands on top of the body of the surfboard
and begins to push down, resembling a push-up.
</figcaption>
</p>
</figure>
<figure class="figure6">
<p class="caption-box">
<img
src="assets/crouch.jpg"
width="400x"
height="390px"
alt="Surfer pushing himself to her feet"
/>
<figcaption class="caption">
Next, Erica shuffles her feet towards her hands.
to place her feet near the middle of the surfboard so that she has the best chance of standing up without falling.
</figcaption>
</p>
</figure>
<figure class="figure7">
<p class="caption-box">
<img
src="assets/stand.jpg"
width="400x"
height="390px"
alt="Surfer standing on surfboard"
/>
<figcaption class="caption">
Due to her multitude of experience, Erica successfully stand up on her surfboard and rides the wave toward the beach.
</figcaption>
</p>
</figure>
<figure class="figure8">
<p class="caption-box">
<img
src="assets/fall.png"
width="400x"
height="390px"
alt="Eiffel tower"
/>
<figcaption class="caption">
After riding the wave for a while, Erica suddenly loses her balance and falls off of her surfboard and into the water.
</figcaption>
</p>
</figure>
<figure class="figure9">
<p class="caption-box">
<img
src="assets/paddleout.png"
width="400x"
height="390px"
alt="Eiffel tower"
/>
<figcaption class="caption">
Frustrated, Erica immediately turns around, gets back onto her surfboard, and begins to paddle out towards the crashing waves
once again. She's ready to try again.
</figcaption>
</p>
</figure>
</div>
<div class="finding">
<h1 class="findings">Surprising Finding</h1>
</div>
<div class="finding">
<p class=para>
Some of the users that I observed had problems with their hands and feet slipping off of the surfboards pretty frequently.
I did some further research on this and found that normally surfboard users put wax on the body of their board where their feet
go. The users that I observed rented boards from a surfboard rental shop. Therefore, they couldn't put wax on their surfboards.
</p>
</div>
</div>
</body>
</html>