This repository has been archived by the owner on Jan 18, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·683 lines (627 loc) · 51.2 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
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
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/site.webmanifest">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
<title>Pavithra's Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/hexagons.css">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/portfolio-style.css" rel="stylesheet">
<style>
.container1 {
width: 35px;
height: 1px;
background-color: black;
position: relative;
top:70px;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -4px;
left: calc(50% - 5px);
}
.yellow {
background: #fed136;
}
.yellow .circle {
background: #fed136;
border-color: #fed136;
}
</style>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Pavithra R.</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#process">Process</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">I'm</div>
<div class="intro-heading"><span class="typewrite" data-period="2000" data-type='["Pavithra Ramasamy.", "a UX Researcher.", "a UX Designer."]'></span></div>
<a href="#about" class="btn btn-circle js-scroll-trigger"><i class="fa fa-angle-double-down animated"></i></a>
</div>
</div>
</header>
<!-- Process -->
<section class="content-section bg-light text-black text-center" id="process">
<div class="container">
<div class="content-section-heading">
<h2 class="section-heading text-uppercase">Process</h2>
<h3 class="section-subheading text-muted center"><i class="fa fa-star"></i></h3>
</div>
<img src="img/process.png" class="data-image">
<div class="row">
<!-- <div class= "mb-5 mb-lg-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-heart"></i>
</span><br><br>
<h5>Empathize</h5>
<img src="img/empathize.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-lg-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-search"></i>
</span><br><br>
<h5>Discover</h5>
<img src="img/discover.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-md-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-wpforms"></i>
</span><br><br>
<h5>Define</h5>
<img src="img/define.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-md-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-edit"></i>
</span><br><br>
<h5>Ideate</h5>
<img src="img/ideate.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-md-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-id-card-o"></i>
</span><br><br>
<h5>Prototype</h5>
<img src="img/prototype.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-md-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-tasks"></i>
</span><br><br>
<h5>Test</h5>
<img src="img/test.png" height="120px" width="120px">
</div><div class="container1">
<div class="circle"></div>
</div>
<div class="mb-5 mb-md-0">
<span class="hb hb-md spin-icon">
<i class="fa fa-desktop"></i>
</span><br><br>
<h5>Evaluate</h5>
<img src="img/evaluate.png" height="120px" width="120px">
</div> -->
</div>
</div>
</section>
<!-- Portfolio Grid -->
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h2 class="section-heading text-uppercase">Projects</h2>
<h3 class="section-subheading text-muted center"><i class="fa fa-star"></i></h3>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" data-toggle="modal" href="#portfolioModal1">
<span class="caption">
<span class="caption-content">
<h2 class="mb-0">Dot Dot Dot</h2>
<p class="mb-0">Designing and Prototyping an interactive learning tool for kids</p>
</span>
</span>
<img class="img-fluid" src="img/children.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" data-toggle="modal" href="#portfolioModal2">
<span class="caption">
<span class="caption-content">
<h2>Visualizing Cascading Delays</h2>
<p class="mb-0">Visualizing cascading delays in flight patterns in the US</p>
</span>
</span>
<img class="img-fluid" src="img/Map.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" data-toggle="modal" href="#portfolioModal3">
<span class="caption">
<span class="caption-content">
<h2>Evaluation of the edX discussion forum</h2>
<p class="mb-0">Heuristics based evalution of the edX discussion board</p>
</span>
</span>
<img class="img-fluid" src="img/edx.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" data-toggle="modal" href="#portfolioModal4">
<span class="caption">
<span class="caption-content">
<h2>Boarding Pass Redesign</h2>
<p class="mb-0">Redesign concept to show only important information</p>
</span>
</span>
<img class="img-fluid" src="img/boarding_pass.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted center"><i class="fa fa-star"></i></h3>
</div>
</div>
<div class="aboutScreen">
<img class="circular--landscape" src="img/1.jpg" align="right"/>
<p class="aboutPara"> Hi, I am Pavithra ! I am a first year Master's student at the University of Maryland, College Park majoring in Human Computer Interaction. </p>
<p class="aboutPara"> My interests are to devise assistive technologies for the disabled and help them overcome their difficulties. Currently, I work as a Research Assistant at the Trace R&D Center, University of Maryland focusing on assistive technologies, inclusive design and accessibility. </p>
<p class="aboutPara"> My undergrad background is in Information Technology. Post my undergraduate studies, I worked for a year at Temenos, a Banking Software Company as a Product Analyst. At Temenos, I was responsible for creating innovative customer experiences, gathering business requirements and interacting with clients on a daily basis to understand their pain points. </p>
<p class="aboutPara"> Aside from my academic works, I enjoy travelling around to different places, listening to good melodious music and reading novels. My favorite authors are Nicholas Sparks and Sidney Sheldon. Their books have always helped me understand minute nuances from a different perspective, which has in turn helped me grow as a person.</p>
<p class="aboutPara"> I am actively seeking internship opportunities for Summer 2018 as a UX Researcher or UX Designer.</p>
<p class="aboutPara" id="thanks"> Thanks for stopping by! </p>
<div class="col-lg-12 text-center">
<div id="downResume"></div>
<button type="button" class="btn btn-primary btn-xl text-uppercase" onclick="window.open('https://github.com/PavithraRamasamy/Portfolio/raw/master/resume/Pavithra_Ramasamy_Resume.pdf')"><i class="fa fa-download"></i> Download Resume </button>
</div>
</div>
</div>
</section>
<!-- Contact -->
<!-- <div class="googlemap-responsive" id="mapsCollegePark">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3101.2442115821304!2d-76.94474298459008!3d38.9869224492671!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6bd3e9aaaab%3A0xd48e8bdda5e4da9a!2sUniversity+of+Maryland!5e0!3m2!1sen!2sin!4v1515512384383" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div> -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Pavithra Ramasamy | 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="mailto:[email protected]">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/pavithra.ramasamy.33">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/pavithra-ramasamy">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://medium.com/@pavithra.ramasamy94">
<i class="fa fa-medium"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>D<span style="color:grey">O</span>T D<span style="color:#15AE95">O</span>T D<span style="color:orange">O</span>T</h2>
<p class="item-intro text-muted">An Interactive Web based Learning Tool for Elementary School Kids</p>
<ul class="inline-bullets">
<li><b>Duration:</b> Fall 2017 - Team Project</li><br>
<li><b>Course:</b> Introduction to Human Computer Interaction</li><br>
<li><b>Tools and Methods:</b> Sketching, Contextual Inquiries, Cognitive Walkthroughs, Semi-structured interviews, Heuristic Evaluation, InVision, Adobe Photoshop, Adobe Illustrator and Adobe Indesign</li><br>
<li><b>My Role:</b> UX Researcher - developed low-fi prototypes and personas, design sketches, conducted semi-structured interviews and heuristic evaluation, designed process book and design specification using Adobe InDesign.</li><br>
</ul><br>
<p class="processflow">In our Introduction to HCI course, we were split into teams of 4 and given a common topic - <strong> Engaging Communities </strong> - to base our semester long project upon. While brainstorming on which community to focus on our project, all of us collectively decided to design solutions that deal with issues faced by elementary school kids in their education.</p> <br>
<p class="headers"><strong>Motivation</strong></p>
<p class="processflow">Our team project is based on improving kid’s education in elementary schools through interactive learning systems. Our main motivation for choosing this project is that we observed that the kids were having great difficulty focusing on learning the materials provided in class as they were not engaged or motivated enough.
<p class="headers"><strong>Project Goals</strong></p>
<p class="processflow">Through this project, we attempt to address the problem of student distraction and lack of interest while dealing with topics of difficulty. We mainly focus on the following aspects in our project- </p>
<ul class="inline">
<li>Making kids motivated and engaged in learning the curriculum through interactive systems</li>
<li>Bring about better Parents-Kids engagement in their kid's education</li>
<li>Better Parent-Teacher communication systems for both the sides to be aware of the kid's progress.</li>
</ul>
<p class="headers"><strong>Our Process</strong></p>
<p class="processflow">The approach that we took to design this project is divided into five phases - Design Problem, Brainstorming, Analysis, Prototyping and Evaluation.</p>
<img class= "sketch-image" src="img/DesignProcess.png" alt="">
<p class="processflow"><strong>Design Problem</strong></p>
<p class="processflow-1">On observing a coding classroom for the elementary school kids at the Washington Cathay Pacific Center, we noticed that the kids were
focussed on moving up through the levels in the game based learning exercise but were not keen on looking into the javascript code that followed it. We also noticed that the students were demotivated and were not finding the exercises engaging.<br><br>The lead causes for the kid’s lack of interest are the difficulty of the materials, different interests based on their genders, the presentation of the learning materials, and the different adaptability rates.</p>
<q class="processflow problem-quote"> <strong> Problem: Distraction among Elementary Kids in Classrooms </strong></q>
<br><br><p class="processflow"><strong>Brainstorming</strong></p>
<p class="processflow-1">With this design problem in mind, I conducted semi-structured interviews with elementary school teachers and parents. Through these interviews, I learnt that the kids were not looking into the JavaScript code that popped up in the interface inspite of repeated instructions due to growing interest in progressing through the game-based activity rather than learning something out of it.<br> The main concern that the teachers put forth was that the students were getting anxious and less-motivated as the levels of the program became more complex and it starts to become difficult for him to bring their focus to one place. The parents mentioned that they felt the use of technology to enhance their kid's knowledge is good in a way that it helps them stay engaged, motivates and promotes healthy competition in an interactive manner. </p>
<q class="processflow solution-quote"> <strong> Solution: Design Engaging and Interactive Learning Experiences </strong></q><br>
<br><p class="processflow-1"> From our semi-structured interviews, we found the crux of the issue that the kids are facing that distracts them during classroom activities. To design creative and engaging learning experiences, we performed card sorting technique to analyse their problem in an effective manner. Followed by card sorting, each of us sketched 40 ideas and collectively gathered all of them to find out which idea would best suit the needs of our design problem.</p>
<img class="sketch-image" src="img/portfolio/S1.png" alt="">
<p class="processflow"><strong>Analysis</strong></p>
<p class="processflow">Post our brainstorming phase, we developed personas and scenarios to support our ideas. The personas that we developed were of kids, teachers and parents. We drew several key insights to accomodate these personas in our designs.</p>
<img class="analysis-image" src="img/portfolio/P1.png" alt=""><br>
<p class="processflow"><strong>Prototyping</strong></p>
<p class="processflow">For testing the developed personas and scenarios, we then developed low and high-fidelity prototypes to help understand the user experience of our tool. From the sketches that we developed, three major ideas stood out - <strong>Social Media for kids to promote knowledge transfer, Leaderboard to encourage healthy competition and Game-based learning activities to engage the kids</strong> - which we have focused on our prototypes.</p>
<p class="lofiprototype"><strong>Low Fidelity Prototype</strong></p>
<p class="lofiprototype">The purpose of this design is to provide an easy to use interface for a web based tool that will be used by elementary and middle students (ages 7 to 13) and teachers. Our main objective is to keep students engaged in the classroom and decrease distractions. We plan to do so by making students compete against each other through a real-time reward system. Students may compete with each other for bragging rights or prizes (badges, candy, etc). Teachers who manage students can create activities and assignments, grade and award points and badged, and communicate with students and parents through the platforms social media features.</p>
<img class="lfp-image" src="img/portfolio/lfp.png" alt="">
<p class="hifiprototype"><strong>High Fidelity Prototype</strong></p>
<p class="hifiprototype">Our high-fidelity prototype shows the various screens of our interactive tool majorly focussing on the leaderboard and game based learning approaches. We feel that the game-based learning approach gives a sense of connectedness and encouragement for the kids, whereas the leaderboard gives a sense of competitiveness that gives the kids motivation to excel in their education.</p>
<img class="hfp-image" src="img/portfolio/hfp1.png" alt="">
<img class="hfp-image-2" src="img/portfolio/hfp2.png" alt="">
<p class="processflow"><strong>Evaluation</strong></p>
<p class="processflow">With our low fidelity prototypes and high fidelity prototypes, I conducted heuristic evaluation and cognitive walkthroughs with expert users. The users commented that the tool provided an engaging and interesting way to learn, the icons were large thus being simple and easy to use for elementary kids.On the other hand, certain issues that the experts faced with our tool was that, proper feedback and current status of thetool was lacking. Also, it was mentioned that some of the buttons were also not accessible as full functionality was not included in the prototype. Finally, the experts also suggested that addition of previous screen navigation button could be very useful incases where the kid erroneously clicks on a button and there is no undo option. From all the feedback that we received through all our evaluation, we analysed and modified the high-fidelity prototype according to the feedback received.</p>
<p class="headers"><strong>Demo Video</strong></p>
<p class="processflow">To aid our design solution, we created a video prototype and animation of our interactive tool using Adobe AfterEffects.</p>
<iframe class="video-image" width="500" height="315" src="https://www.youtube.com/embed/huaeTca5U3A" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe><br><br>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Visualizing Cascading Delays in Flights in the US</h2>
<p class="item-intro text-muted">Visualizing airplane dataset for the year 2007</p>
<!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/02-full.jpg" alt=""> -->
<ul class="inline-bullets">
<li><b>Duration:</b> Fall 2017 - Team Project</li><br>
<li><b>Courses:</b> Data Visualization</li><br>
<li><b>Tools and Methods:</b> DataMaps and D3.js</li><br>
<li>
</ul><br>
<p class="processflow"><strong>Visualizing Cascading Delays </strong> is a project in which a fellow classmate and I visualized the airplane dataset for the year 2007 to identify cities in which the cascading delays are maximum as well as cities in which the delays are minimum. Cascading Delays in other words is defined as the departure delay caused at the origin airport, thereby causing an arrival delay at a connecting airport which in turn causes an arrival delay at the destination airport. For example, a flight moving from NY to CA has connections at TX. If the flight is delayed by 60mins at NY, which causes a delay of 45mins at TX in turn causing a delay of 20mins when the flight arrives at CA is called as Cascading Delays. </p><br>
<p class="headers"><strong>Project Goals</strong></p>
<p class="processflow">The airplane dataset is huge and has multiple data points which makes it challenging to visualize the important features of this data. The aim of this term project is to find effective ways of visualizing this dataset such that it could help passengers select days with least delays or could enable the airport authorities to see delay patterns and make necessary changes. Also, for someone interested in studying flights in the US, these visualizations could also help gain insights into how flying patterns of people in the US have altered over time.<br>
The dataset contains details of all the flights within the US from 1987 to 2008. Two broad categories of data points that can be looked into are delay patterns and flying patterns.</p>
<p class="headers"><strong>Our Process</strong></p>
<p class="processflow"><strong>Discover</strong></p>
<p class="processflow">It is observed that cascading delays were highly frequent in the US, but there are no proper visualization methods through which the users can understand which flights to choose with minimum delay. Taking this as our problem statement, we brainstormed to identify the users and their pain points.</p>
<p class="lofiprototype"><strong>Target Audience or Users</strong></p>
<p class="lofiprototype">The target audience for this data visualization project are data analysts, airport and airlines crew, and flyers(passengers).</p>
<p class="lofiprototype"><strong>User Goals</strong></p>
<p class="lofiprototype">To view and select flights that cause minimum delays at the connecting airport due to delays in origin airport.</p>
<p class="lofiprototype"><strong>Questions this project answers</strong></p>
<p class="lofiprototype">We focus on answering two major questions through this visualization project - </p>
<ul class="inline-1">
<li> Help users observe flying patterns as well as delay patterns in flights in the US</li>
<li> Is there a pattern of delays at particular airports? </li>
<li> Do delays cascade, that is do delays at one airport lead to delays at other airports? </li>
</ul>
<p class="processflow"><strong>Research</strong></p>
<p class="processflow">To research more on how to visualize the proposed questions using the airplane dataset, we performed an extensive literature review. Different kinds of research that has already been done on visualizing multidimensional and temporal data, visualizing airplane dataset and notions of storytelling for any data visualization project were all studied.</p>
<p class="processflow"><strong>Design</strong></p>
<p class="processflow">Post our literature review, we sketched out different ways in which we can visualize flight patterns (trends in delays and flight patterns) and cascading delays.</p>
<img class="data-image" src="img/portfolio/D1.png" alt="">
<p class="processflow"><strong>Develop</strong></p>
<p class="processflow">We initially started developing this visualization project with a dummy dataset to show animation of flight patterns across the US in the year 2007. The <a href="http://datamaps.github.io/" target=
_blank">Datamaps</a> library was used to plot the US map and to display the flight patterns in the form of arcs. For instance, for a flight moving from MD (Maryland) to CA (California) , an animated arc is drawn starting from MD and ending at CA.</p>
<img class="alpha" src="img/portfolio/alpha.png" alt="">
<p class="processflow">Post visualizing flight patterns in the US, we aimed to focus on visualizing cascading delays.Using a dataset for the year 2007, we visualized two levels of delays (first level being the origin airport for the initial set of delays and the second level being the delays caused in other airports due to delays in the origin airport). The origin airport is chosen by the user from a select set of ten major states. The difference between the origin and the destination points in these arcs are distinguished by using gradients. The darker shade corresponds to the origin while the lighter shade indicates the destination state. In the first level, we chose a timeframe of 5PM to 8PM to show the delays.</p>
<img class="beta" src="img/portfolio/beta-1.png" alt="">
<p class="processflow">The states of flights which were delayed from the origin airports are all taken as origins for the second level and the delays they caused in the flights departing from them are visualized. An animation sequence was implemented wherein we first show the first level of delays and once that is done, we show the second level of delays(cascading delays) after that on a different map.In the second level, we chose a timeframe of 8PM to 11PM to show the cascading delays.</p>
<img class="beta" src="img/portfolio/beta-2.png" alt="">
<p class="processflow">We observed that the gradient mappings did not occur consistently and there were significant bugs in the visualization which were found during user testing. We incorporated all these findings in our final implementation. To give our users freedom of choosing the time frame and to observe at which timeframe the delays were maximum, we implemented a time slider and a bar chart that shows the average delays caused in the cities. The user also has the freedom to select the day of the week in which they wish to view the delay information. Once the user chooses an origin airport by clicking on a particular state(one out of the 10 major states), the two levels of delays are visualized, along with a bar chart to show average delays at a particular timeframe.The weight of each arc in the first level of delays indicates the delay minutes.Through our visualization, we help users understand flight patterns being affected due to cascading delays and find out in which states the delays are being caused maximum.</p>
<img class="final" src="img/portfolio/final-1.png" alt="">
<img class="final" src="img/portfolio/final-2.png" alt="">
<p class="headers"><strong>Key Takeaways</strong></p>
<p class="processflow">Through this visualization, we were able to identify the following -
<ol class="processflow takeaways"><li>Cities in which the delays were maximum and minimum</li>
<li>Average delay(in minutes)caused due to delay in origin airport.</li>
<li>Average delay(in minutes)at other airports caused due to delay in origin airport.</li></ol></p>
<p class="headers"><strong>Video of our Visualization</strong></p>
<iframe class="video-image" width="560" height="315" src="https://www.youtube.com/embed/B068VUrUzH8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe><br><br>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Heuristic Evaluation of edX Discussion Board</h2>
<p class="item-intro text-muted"></p>
<!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt=""> -->
<ul class="inline-bullets">
<li><b>Duration:</b> February 2017</li><br>
<li><b>Course:</b> Introduction to User Experience</li><br>
<li><b>Tools and Methods:</b> Key findings and heuristics violation, Usability studies</li><br>
<li><b>My Role:</b> User Researcher - identified key findings, assessed severities and heuristics the findings violated</li><br>
</ul><br>
<p class="processflow">This project was done as part of a MOOC offered in edX by the University of Michigan. In this project, I conducted a heuristic evaluation of the discussion board hosted by edX. I analysed the discussion forum and judged its compliance with recognized usability principles penned by Jakob Nielsen. Firstly, I performed analysis of the interface based on Nielsen's heuristics, noting down the findings and violations that I came across. Then I prioritized the observations made on the interface based on their severity ratings ranging from 0 (not a usability problem) to 4 (usability catastrophe). </p><br>
<p class="headers"><strong> Introduction</strong></p>
<p class="processflow">edX is an online learning platform that hosts courses with weekly learning sequences where each sequence has interactive short videos followed by quizzes and assignments for the student (course taker). The quizzes and assignments help the students to identify their stance and test their understanding once they have finished viewing the weekly lecture. The courses also include references that can be used to study further and gain more intellect on the topic of the lecture. edX also hosts a discussion forum for each course where the student can post and review questions and involve in discussions among their peers as well as the teaching assistants.</p>
<p class="headers"><strong> Findings and Recommendations</strong></p>
<p class="processflow"><strong>Finding 1.</strong> No provision to change font, text size and color of text which is included in other popularly used text editors in the “Add a Post” screen. <strong>Recommendation:</strong> Add feature to change font, text size and color of text to give the user control and freedom of what they want to do.<br><br>
<strong>Finding 2.</strong> “Post Anonymously” option in the “Add a Post” screen not working according to its concept. <strong>Recommendation:</strong> Fix the post anonymously option such that it does not display the name of the person who is posting in the forum.<br><br>
<strong>Finding 3.</strong> The “Blockquote” formatting option in the “Add a Post” screen merely indents the text instead of showing it as a quote. <strong>Recommendation:</strong> When the user clicks on the blockquote option, it should show the text as a quote.<br><br>
<strong>Finding 4.</strong> Widely used text editors use the shortcut “CTRL + U” to underline text. In the discussion forum, it is used to display the text as unordered lists which kind of brings a lag between the system and the real world. <strong>Recommendation:</strong> Try using any other shortcut to bring about unordered lists in the editor box.<br><br>
<strong>Finding 5.</strong> No confirmation message upon submitting the post to the forum. <strong>Recommendation:</strong> Keep the user informed from time to time regarding the status of the system.<br><br>
<strong>Finding 6.</strong> Search results do not highlight the word being searched. <strong>Recommendation:</strong> Add a word highlight option to indicate the word being searched so that the user will know exactly where to look.<br><br>
<strong>Finding 7.</strong> While using ordered and unordered list, every time we add an item to the list we need to choose the respective formatting option. <strong>Recommendation:</strong> Let the user use the unordered and ordered lists continuously until they opt out of that formatting option.<br><br>
<strong>Finding 8.</strong> While there is an option to post anonymously, there is no option to respond anonymously. <strong>Recommendation:</strong> Add the option of responding to a post anonymously in order to bring about consistency within the system.<br><br>
<strong>Finding 9.</strong> There is no option to vote on the comments made on responses to the post, whereas there is an option of voting on the responses as well as the post. <strong>Recommendation:</strong> Add the option of voting on the comments made on the responses to a post to bring about consistency within the system.<br><br>
<strong>Finding 10.</strong> Every post has an option of voting – upvote or downvote. The upvote is indicated by a plus sign. Whenever a post has been upvoted, the color of the button changes to green, but the plus sign still remains. <strong>Recommendation:</strong> To increase the aesthetic aspect of the button, upon upvoting the symbol can be changed to show the minus sign to indicate to the user that they can reverse their action.<br><br>
<strong>Finding 11.</strong> In the forum where we can view all posts, the characters in bold are given in between **char**, the ones in italics are given in between *char*, but when we read through the posts, they are shown in bold and italic as per their functionality. <strong>Recommendation:</strong> Use the same design throughout the entire system to maintain consistency. Show the characters in the forum also as bold and italics respectively.<br><br>
<strong>Finding 12.</strong> Pinned posts on the discussion forum are also shown when a user searches for a particular word irrespective of whether it is relevant to the search word or not. <strong>Recommendation:</strong> Search results must only show posts or items relevant to the search.<br><br></p>
<img class="findings" src="img/portfolio/F1.png"><img class="findings" src="img/portfolio/F2.png">
<p class="headers"><strong>Heuristic Evaluation Report</strong></p>
<p class="processflow">Once I had analyzed the interface of the discussion forum, jotted down the violations that I came across with the interface and prioritized the violations based on their severity, I wrote a research report to debrief my findings and provide suggestions to improve.</p>
<button type="button" class="btn btn-primary btn-xl" onclick="window.open('https://github.com/PavithraRamasamy/Portfolio/raw/master/resume/edX_Research_Report.pdf')"><i class="fa fa-download"></i> Download Report </button><br><br>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Boarding Pass Redesign</h2>
<p class="item-intro text-muted"></p>
<!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt=""> -->
<ul class="inline-bullets">
<li><b>Duration:</b> Spring 2018 - Individual Project</li><br>
<li><b>Course:</b> HCI Design Methods</li><br>
<li><b>Tools and Methods:</b> Brainstorming, Pen and Paper sketching, User Interviews and Adobe Illustrator</li><br>
<!-- <li><b>My Role:</b> User Researcher - identified key findings, assessed severities and heuristics the findings violated</li><br> -->
</ul><br>
<p class="processflow">For this project, I started by doing a quick research on who the users and defined their main goal. I conducted several informal user interviews and tried to understand their pain points and their needs. With the information that I received from the users, I observed that the current boarding pass designs does not aid the users in the aspects of memory and cognition. They either had too much of information to process or they made the user to think and recall a lot of things as opposed to Nielsen's famous heuristic - Recognition rather than Recall. </p><br>
<p class="processflow"><em>DISCLAIMER</em> - I am in no way related to Delta Airlines and its affiliates. I have chosen it just for a proof of concept for this project.</p>
<p class="headers"><strong>Process</strong></p>
<p class="processflow"><strong>Discover</strong></p>
<p class="processflow">Who are the users?</p>
<p class="processflow">On a short research on the target audience, I found that there are 2 main group of users - the passengers and the flight attendents. For this project, I am focusing on the passengers perspective alone.</p>
<p class="processflow">User Goals</p>
<p class="processflow">To correctly identify required information on-the-go and help remember it throughout rather than wanting to look at the boarding pass again and again.<br> To find out more about the needs and the pain points of the users, I conducted informal user interviews with my friends.</p>
<p class="processflow"><strong>Define - Current Issues:</strong></p>
<p class="processflow">The observations I made from the interviews are as follows - </p>
<ul class="inline-1">
<li> It is difficult to retrieve information on-the-go from the boarding passes as they are cramped with a lot of information.</li>
<li> For frequent travellers, it is difficult to keep track of the airports they are travelling to and the connections they will be making during their journey. </li>
</ul>
<p class="processflow"><strong>Design Ideas</strong></p>
<p class="processflow">I came up with the following design ideas that would aid the user in terms of memory and cognition and also help them in retaining information.</p>
<figure>
<img class="data-image" src="img/sketch1.png" alt="">
<figcaption><strong>Sketch 1</strong>- Important information such as flight, gate, seat and zone in bolded characters to make them stand out and easy to find in a boarding pass.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch2.png" alt="">
<figcaption><strong>Sketch 2</strong>- Similar to sketch #1 but with involving law of proximity and law of similarity thereby grouping similar items together.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch3.png" alt="">
<figcaption><strong>Sketch 3</strong>- Concept of displaying things farther on the go. When the passenger is moving towards the gate after security check, the information required is only the gate number so I have shown the gate number in bolded characters. Later on, they would need the flight, seat and zone information which is shown on the sides.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch4.png" alt="">
<figcaption><strong>Sketch 4</strong>- Highlighting the place of departure and destination and then displaying the other information in a relevant manner following laws of memory in the order in which they occur.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch5.png" alt="">
<figcaption><strong>Sketch 5</strong>- Following laws of consistency and similarity, I have grouped similar items together and displayed only information that is really required.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch6.png" alt="">
<figcaption><strong>Sketch 6</strong>- Through user problems discovery, it was noted that often times when people travel frequently it is quite difficult for them to remember the place they are travelling to and the airport from which they will be boarding. To employ recall rather than recognition, this design talks more about involving cognition and perception.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch7.png" alt="">
<figcaption><strong>Sketch 7</strong>- A wallet sized design which shows the departing city on the left - with the flight details on the middle - and the destination city on the right thereby indicating a sequence of events.</figcaption>
</figure>
<figure>
<img class="data-image" src="img/sketch8.png" alt="">
<figcaption><strong>Sketch 8</strong>- Further improvising on Sketch #7, I designed this sketch improvising on consistency and aesthetics as well.</figcaption>
</figure>
<p class="processflow"><strong>Final Design</strong></p>
<p class="processflow">Based on the inputs I received from the users on my sketches, I redesigned the boarding passes based on concepts of memory, cognition and gestalt laws.
<p class="processflow">This design was developed in adherence to Sketch #8. The most important information for a user on the go is their departing city to destination city information along with the date and time of travel. To indicate this information and make them stand out, I have highlighted them to improve cognition and memory. Following Miller’s law of remembering only 7 (plus or minus 2) items at a time, the other information such as Flight, Gate, Seat and Zone are displayed in the middle of the boarding pass. To improve aesthetics, this information is provided inside a flight shaped object as this information is only required while boarding on to the flight. The perforated portion of the pass holds the same information in a simple manner for the flight attendants to easily recognize the information following Neilsen’s heuristic of Recognition rather than Recall.</p>
<img class="data_image" src="img/boarding_pass_2.png" width="700" height="400" alt="">
<p class="processflow">On talks with users and frequent flyers, it was noted that most of them keep their boarding passes on their passports and each time they need to look at the information, they had to take their boarding passes off their passports and view the information. In order to avoid this situation, I have designed a passport sized design that fits well within the passport. When the passenger needs to look at the flight details, they just need to lift the flap of the pass on the top – where they can directly view the square of information on Seat, Gate and Zone instead of taking the whole boarding pass outside of the passport to view the information. As QR codes store more information than barcodes, this design employs the usage of QR codes to store all the passenger details. This design employs law of proximity for the square shaped information and also uses Fitt’s Law – reaching the target is much more quick in this design and it also fits well inside the passport. Miller’s Law and Law of similarity are also followed here for better memory and cognition.</p>
<img class="data_image" src="img/boarding_pass_1.png" width="500" height="600" alt="">
<p class="processflow"><strong>Reflection</strong></p>
<p class="processflow">Considering the amount of time spent on this quick 2 days project, I am personally very satisfied with the outcome. However, I realize that there are several things that could’ve been improved during the process. Through this project, I learnt <strong> not to overlook on the importance of user data and not to make any assumptions(thinking of ourselves in the place of user).</strong>User Research always helps in identifying accurate needs and goals of the user.</p><br><br>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
<script>
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
</script>
</body>
</html>