-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·639 lines (529 loc) · 39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Esporre - Portfolio Tool</title>
<!-- CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="assets/css/simple-line-icons.css" rel="stylesheet" media="screen">
<link href="assets/css/animate.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="assets/css/style.css" rel="stylesheet" media="screen">
<script src="assets/js/modernizr.custom.js"></script>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
<!-- Home start -->
<section id="home" class="pfblock-image screen-height">
<div class="home-overlay"></div>
<div class="intro">
<img src="assets/images/esporreLogo.svg" width="500px">
<br>
<span class="processly">We are now <a href="https://processly.io">Processly</a></span>
</div>
<a href="#services">
<div class="scroll-down">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<!-- Home end -->
<!-- Navigation start -->
<header class="header">
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Esporre</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#services">Overview</a></li>
<li><a href="#portfolio">Process</a></li>
<li><a href="#skills">Product</a></li>
<li><a href="#testimonials">Reflections</a></li>
</ul>
</div>
</div><!-- .container -->
</nav>
</header>
<!-- Navigation end -->
<!-- Services start -->
<section id="services" class="pfblock pfblock-gray">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Overview</h2>
<div class="pfblock-line"></div>
<h3>What is Esporre</h3>
<div class="pfblock-subtitle">
Esporre is online tool that helps student learn how to document throughout the process of a project for both personal and promotional use.
<br><br>
Esporre enables users to have complete ownership over their works while gathering feedback from peers, teachers, and their social network.
<br><br>
Through layout tools, milestone markups, and reflective activities, users present their project in a rich and compelling way.
</div>
<!--<div class="row">
<div class="col-sm-3">
<div class="iconbox wow slideInLeft">
<div class="iconbox-icon">
<span class="icon-magic-wand"></span>
</div>
<div class="iconbox-text">
<h3 class="iconbox-title">Web Design</h3>
<div class="iconbox-desc">
Good things come to those who wait, but only the things left by those who hustle
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="iconbox wow slideInLeft">
<div class="iconbox-icon">
<span class="icon-puzzle"></span>
</div>
<div class="iconbox-text">
<h3 class="iconbox-title">Web Programming</h3>
<div class="iconbox-desc">
Good things come to those who wait, but only the things left by those who hustle
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="iconbox wow slideInRight">
<div class="iconbox-icon">
<span class="icon-badge"></span>
</div>
<div class="iconbox-text">
<h3 class="iconbox-title">Branding</h3>
<div class="iconbox-desc">
Good things come to those who wait, but only the things left by those who hustle
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="iconbox wow slideInRight">
<div class="iconbox-icon">
<span class="icon-question"></span>
</div>
<div class="iconbox-text">
<h3 class="iconbox-title">Consultation</h3>
<div class="iconbox-desc">
Good things come to those who wait, but only the things left by those who hustle
</div>
</div>
</div>
</div>
</div>--> <!--use for top tabs-->
<h3>Problem Statement</h3>
<div class="pfblock-subtitle">
This semester, we were presented with a design challenge by Josephine Tsay & Kylie Peppler of Collective Shift to create a design of an open portfolio system for a learner or maker inside and outside of the traditional school setting.
<br><br>
We have scoped the open portfolio problem space to be in the documentation needs of high school and college students seeking higher education and employment. High school students use portfolios to document the project-based work they have done both in and out of school, and they use portfolios as a part of the college admissions process. As college students, they need to add to and refine their portfolio to be of use in the employment process. Facilitators and teachers heavily influence their documentation process and will therefore be considered within the problem scope.
<br><br>
Facilitators and learners both have individual documentation needs. A lot of the challenges faced in documentation occur in the transition between the process, the work done while in the creation cycle and product, the end result that comes out of the project, as well as between the facilitator and learner. We will be focusing on this documentation transition from process work, which is generally personal. to product work, which is generally promotional.
<br><br>
Another challenge on which we have focused our design is the need to teach both students and teachers about the design process and how to document it well.
</div>
<h3>Vision Statement</h3>
<div class="pfblock-subtitle">
We believe that building this portfolio platform for high school and college students will allow for students to efficiently archive, curate, and share the work they do with the audiences of their choice. We will know this is true when we are able to reliably gather feedback from students and facilitators that they are actively using the platform and documenting their process and final product more than they have before. The students will reflect more on their process and be better able to present what learning analytics would measure their work.
<br><br>
Our project focuses on the transition between personal, process documentation where one focuses primarily on social sharing and a personal record of work and a more polished documentation that can be used to present your work to external audiences in hopes of recruitment, admissions, employment, and the like. Through this focus, we will be addressing the needs of each persona derived from the data we have collected to date.
<br><br>
We will also emphasize using the system to educate teachers and students about good documentation practices and the design process. We will be able to gather data on the extent to which features such as tagging are used, and the construction of milestones, to determine how successfully our system is scaffolding good documentation practices.
</div>
</div>
</div>
</div>
</div><!-- .container -->
</section>
<!-- Services end -->
<!-- Portfolio start -->
<section id="portfolio" class="pfblock">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Design Research & Synthesis</h2>
<div class="pfblock-line"></div>
<h3>Initial Steps & Guiding Literature</h3>
</div>
</div>
<img src="assets/images/realTimeBoard.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
We collected our data in a collaborative method using a tool called realtimeboard.com. This allowed us to share insights, pictures, files, and thoughts with one another easily.
<br><br>
A literature review in which concepts such as user-centered design, problem-based learning, and persona creation were discussed. Notable articles read include : The Portfolio Process and the Processed Portfolio from Cambridge University, Modeling Users : Personas and Goals by Alan Cooper and Co., The Learning Practices of Making : An Evolving Framework for Design by Lisa Brahms and Peter Wardrip from the Children’s Museum of Pittsburgh, and Understanding the Problem : Design Research from Cooper’s About Face. These articles offered various perspectives and guidelines for our design process, and we have integrated the key insights from these articles into the sections below.
<br><br>
The Maker Ed Open Portfolio Research Briefs provided insights into what some of the existing documentation strategies and challenges are. Makers have found creative ways to document their processes, a memorable example being using egg cartons to hold ipads so that the makers could work uninterrupted while still collecting documentation. The brief detailed ways in which open portfolios could benefit students, from giving them ownership of their own work that would last between different learning settings, to increasing equity by allowing students to be represented by more than just a number in GPA or standardized test scores.
<br><br>
Guest speakers, primarily educators, provided us with the viewpoint that it is about more than just the needs of the users, but also the needs of teachers and facilitators of youth learning. During their class visits, we performed focused listening activities, allowing each facilitator to convey their narratives freely through directed storytelling activities while we, as a class, honed in on the Motivations, Opportunities, Tools and Methods, Goals and Purposes, Needs, and Challenges presented by each educator. Our three main guest speakers were Nina Barbuto, Founder of Assemble; Megan Cicconi, Director of Instructional Innovation at the Allegheny Intermediate Unit; and Randi Leonard, Online Technology Manager of Fox Chapel Area High School.
<br><br>
User Study 1 focused on determining what the current portfolio practices and processes are, which tools are used, what challenges and limitations are faced, and which design opportunities are available. The participants included were CMU students, highlighting their opinions and voices; we placed a special emphasis on getting a broad range of users, that is, not focusing on those within discipline.
<br><br>
User Study 2 had a similar focus to User Study 1 but focused on a different participant pool, encompassing facilitators, educators, and younger students. Additionally, the focus expanded to include facilitation processes. It followed a guerilla research method, where we used questionnaires and interviews to interact with the users. Again, we focused on getting a range, from children to adult.
<br><br>
Initially, we created a stakeholder map. This allowed us the opportunity to visually represent our primary users and the interactions and potential opportunities that can occur in relations to stakeholders.
</div>
<h3>User Studies</h3>
<div class="pfblock-subtitle">
We conducted three user studies in order to better understand the goals, needs, current practices, and challenges of our users.
<br><br>
In our first user study, we conducted six interviews with students, professors, alumni at Carnegie Mellon. We found out that students wanted a way to show off written work and they wanted a better way to store document the process, while professors were interested in a tool that would let students portray their unique story. Overall we found that Carnegie Mellon students and alumni found time and technology to be barriers to creating an ideal portfolio or to having a portfolio at all. Our participants emphasized that if one did not have the time and skill to produce a good portfolio to be proud of, that could promote oneself well, then one should not have a portfolio online at all. One participant even removed her portfolio because she did not want potential employers to see something that she believed was not representative of her best work. Participants emphasized that documentation was messy and time-consuming, and without immediate incentive of being on the job search, it was difficult to prioritize documentation above all the other work that Carnegie Mellon students had to do. Participants shared that they typically were not explicitly taught how to document or how to make a portfolio, but rather were taught implicitly through feedback in studio classes or learned informally.
<br><br>
Our second user study was conducted at the Pittsburgh Maker Faire, where we conducted surveys with 12 individuals and interviews with 9 of those participants. Our survey participants included on middle schooler, two high schoolers, two undergraduate college students, three teachers, one professional maker, and one person who identified themselves as other. There were eight males and four females. All of the participants had been making for a significant amount of time, with seven of the participants reporting that they had been making for one to five years, while five others had been making for over ten years. Half of our participants said they documented the final product of their making for a few projects, while the other half said they document for most projects. Seven participants said they document the process of a product for a few projects, while two said they document process for most projects and two said they never document the process of their making. This shows that people are already seeing documentation as a valuable thing to do and will be willing to use a documentation tool, and shows that there is an opportunity to increase process documentation. The predominant means of documentation was social media with eight participants using it, followed by blog platforms with six. The predominant audiences were for self, friends, and interested people online. Our findings show that the current use for the group who responded to our survey was a more personal form of documentation. Through our interviews, we also found that many organizers and facilitators document, curate, and share the work of the students to promote their programs, recruit new participants, and find funding. This aligned with the needs of the guest speakers who came to speak with our class, with backgrounds as facilitators in both formal and informal education.
<br><br>
Finally, we conducted a survey with students in a public school district who were using a career search and reflection system that they have termed a portfolio. After vicariously learning about the needs of the target user population through other stakeholders, we wanted to make sure that we could access the voice of the users themselves. Due the challenges in receiving permission to work with minors, we were not able to talk to students directly in a school setting but we believe the survey will provide useful insights about what students perceive portfolios to be and how they are documenting and sharing the work they do. The survey was taken by 15 students, most of whom were in 11th grade. From the survey, we found that students overwhelmingly share with people in their personal networks and share significantly less for promotional purposes. When asked further, students reported that there were various obstacles in sharing for promotional purposes. The students reported not being able to locate their past projects, or not knowing how to present their work in a professional manner. Students also reported not knowing how to share their projects.
</div>
</div>
</div>
</div>
<img src="assets/images/makerFaireProcess.png">
<img src="assets/images/interviewAnalysis.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h3>User Insight Boards</h3>
<div class="pfblock-subtitle">
From our user studies, we created insight boards to summarize the perspectives of the people we talked to. We highlighted quotes that were illustrative of the students’ challenges, portfolio processes, documentation goals, and motivations. We also summarized the portfolio processes of each user, and the tools that each of them were currently using, and pain points that the users were experiencing.
</div>
</div>
</div>
<img src="assets/images/insightBoards.png">
<img src="assets/images/insightBoards2.png">
<img src="assets/images/insightBoards3.png">
<img src="assets/images/insightBoards4.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h3>Personas</h3>
<div class="pfblock-subtitle">
We designed four personas to cover the range of users that we found in our user research. Personas are important models for conducting user research because they can provide specifications for what the product should do and how it should be have. They also allow stakeholders, developers, and designers to share a common language and common understanding. People relate better to personas because they resemble people rather than lists. Personas can be used in early stages as a reality check for designs, and can be repurposed throughout an organization. Using personas, designers can avoid designing for an elastic or ill-defined user, and can make sure the design is relevant to a real user. Personas are composite and represent behavior patterns in a specific context. They avoid stereotyping, but instead strive to represent typical and exemplary behavior. These insights came from Personas and Goals by Cooper, Reimann, & Cronin.
<br><br>
In the chart below, we show where each persona falls along the spectrum of personal to promotional portfolio practices, and process-focused to final product-focused portfolio practices. We are largely focusing on the transition that a user makes between personal and promotional motivation as well as process to product documentation. That is, there is the expectation that users in one quadrant may move to another quadrant due to changes in their life stages and goals. A high school freshman may focus on their process and document for personal and social purposes, but will one day likely need to document for promotional purposes.
</div>
</div>
</div>
<img src="assets/images/spectrumUsers.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
Our tool will aid in that transition. It also allows for older students or professionals to revert back to personal documentation after they no longer need to be focused on promoting themselves to employers.
<br><br>
For the more personal and process documentation, we have an informal platform where a user could place sketches and pictures. They are prompted to write a caption or a reflection along with it to enhance their documentation.
<br><br>
From that, users manipulate those sketches, pictures, and other items and formalize them into a portfolio more produced for external audiences.
</div>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
The Personas exist over a range of ages and Portfolio Proficiency. The age range is representative of the participants in User Study 1 and 2. As they are older than the actual target audience of the tool (9th-12th Graders), the personas were meant to mock future needs, challenges, obstacles, and opportunities these users may encounter. The Portfolio Proficiency was determined by challenges of the personas and sophistication of their process. The more advanced the technological use and the more thorough the documentation process, the greater the portfolio proficiency. The other aspects of the persona such as Goals/Motivations and Audience were derived from participant data in User Study 1 and 2.
<br><br><br>
<strong>Jamie - College Junior, Industrial Design</strong>
<br>
Jamie is a junior in college majoring in industrial design. He has a portfolio on Squarespace, featuring projects he’s done in his studio classes. He also tries to add professionals in his field on Facebook and Instagram. He posts photos and videos of his work in progress so that people become invested in projects that they’ve watched the growth of, and so that people know that the work is all his.
<br><br>
Jamie’s persona indicates that the portfolio tool designed needs to be both easily and quickly accessible and customizable, in order to accommodate users with more advanced technological skills. Furthermore, his persona indicates the importance of student ownership, something the tool needs to ensure.
</div></div></div>
<img src="assets/images/personaJamie.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
<br><br>
<strong>Tyler - College Freshman, Engineering</strong>
<br>
Tyler is a freshman in college. He submitted a basic portfolio of high school work on slideroom for his college application. Now that he is in college, he wants to collect the finished work he’s done so that he can keep track of what he’s accomplished and iterate further on final products. He also hopes for feedback on the final products he posts.
<br>
Tyler’s persona reveals that the tool should be easy to use and allow for feedback, both from educators and friends and families.
</div></div></div>
<img src="assets/images/personaTyler.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
<br><br>
<strong>Zoe - High School Junior</strong>
<br>
Zoe is a junior in high school. She participates in Maker activities outside of school and on weekends. Her school also puts a large emphasis on project based learning. She takes photos of her work and posts them to Facebook, Instagram, and Flickr. Soon, she will need to think about how to present herself to colleges.
<br>
Through Zoe’s persona, we learn that the tool needs to allow for a type of scaffolding in design, to accommodate for those that are unaware of how to assemble their works. Additionally, we learn that there must be an internal storage system to aid in the organization and record keeping of works. Lastly, we learn that the tool must allow for social media sharing of works.
</div></div></div>
<img src="assets/images/personaZoe.png">
<br><br>
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
<strong>Ashley - Secondary School Educator, Out-of-School Facilitator</strong>
<br>
Ashley is an in-school coordinator of project based learning activities and curriculum. She also run an out-of-school non-profit makeshop for high schoolers. She needs to recruit both members and funders for her non-profit. She often facilitates discussion between teachers and students.
<br><br>
Ashley’s persona focuses on educator and facilitator needs, namely that the tool should be easy to use and easy to teach, especially across contexts. Educators should be able to interact with the students on this tool. Educators need to not only learn how to use the tool, but be able to teach students how to use the tool.
</div></div></div>
<img src="assets/images/personaAshley.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
<h3>Workflow & Scenarios</h3>
From our readings, and from our user studies, we formulated a workflow diagram that encompassed the portfolio process. We began by listing the phases, which were capture, manage, reflect, compose, and analyze. We then added the artifacts and evidence from each phase of the portfolio process, and ways that the successful creation of artifacts and evidence could be scaffolded by our system. Next, we added the tools that were related to the different phases. Finally, we developed scenarios that would occur during the various phases of our portfolio process based on our primary persona, Zoe.
</div>
</div>
</div>
<img src="assets/images/workflowDiagram.svg">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
<br><br>
We developed five scenarios. We began with the tool tutorial as our first scenario. We ended up developing the tool tutorial as our first paper prototype. The other scenarios we created were an in school project, an out of school project, a school science fair presentation, and a college application. We developed the scenarios using sketches first, and then decided on the types of user interactions we wanted our system to have. We also noted which phases of the portfolio process were happening in each slide of our scenario. Another aspect of our system we designed based on our scenarios was where other people besides for the primary user might interact with our system. Finally, we created system requirements so that we could take this abstract use case that we designed based on our user research and develop a concrete system design.
</div>
</div>
</div>
<img src="assets/images/useCase1Tutorial.svg">
<img src="assets/images/useCase2SchoolProject.svg">
<img src="assets/images/useCase3HomeProject.svg">
<img src="assets/images/useCase4Fair.svg">
<img src="assets/images/useCase5Publish.svg">
<br><br><br>
<img src="assets/images/systemDiagram.svg">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h3>Concept Prototyping & Refinements</h3>
<div class="pfblock-subtitle">
<h3>Paper Prototyping</h3>
Using low-fidelity paper prototypes, we conducted user studies, analyzing the clarity of the initial layout and tutorial. Each user participated in “Think Aloud” activities, guided by the tutorial text. Users narrated their actions and thoughts as they proceeded through the tasks.
<br><br>
Instead of a script, we created a set of talking points for the team member to follow when conducting the user tests. This allowed the flow of the prototyping procedure to remain casual and conversational.
<br><br>
From these tests, we determined that a guided first experience through the tool would be more useful that a strict tutorial. This shaped the remainder of the design decisions and prototypes created.
<br><br>
Additional considerations developed involved the amount of freedom we allowed users to have, ensuring that they had the choice to do certain tasks and also that every task they did had a distinct purpose.
<br><br>
<strong>Script/Talking Points</strong>
<ul>
<li>Before the tutorial
<ul>
<li>Ask about name and major</li>
</ul>
</li>
<li>The tutorial
<ul>
<li>Explain the general goals of Esporre</li>
<ul>
<li>Online tool</li>
<li>Helps High School student learn about documentation for both personal and promotional process throughout the steps of the project</li>
</ul>
<li>Introduce Think Aloud Activity</li>
<ul>
<li>Interact with the paper prototype, discuss what they are doing and thinking</li>
</ul>
<li>Explain that this is to mock up the tutorial users will use when beginning to use the tool</li>
<li>Provide additional material and guidance as needed</li>
</ul>
<li>After tutorial is complete
<ul>
<li>Ask for overall opinions and feelings</li>
<li>Did it feel like a tutorial?</li>
<li>How was the length?</li>
<li>Was this useful?</li>
<li>Additional thoughts</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<img src="assets/images/paperPrototype.png">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h3>Dynamic Prototypes</h3>
<div class="pfblock-subtitle">
Using medium fidelity digital wireframes, we conducted user studies analyzing the clarity of our icon design and site flow. We followed similar talking points as the Paper Prototype activities, again ensuring a conversational atmosphere. Users went through the screens of the site, interacting with the static screens while talking aloud about their perception of the flow of the website. From this Think Aloud activity, we redesigned certain icons and clarified page layout throughout the tool. We also added the concept of a project pipeline, which we wanted to be a part of the user’s mental model.
</div>
</div>
</div>
<img src="assets/images/wireframes.png">
<img src="assets/images/wireframeMap.svg">
<br><br>
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<div class="pfblock-subtitle">
Using InVision, we created a high-fidelity, interactive prototype, where users could actually click through the site. From this prototype, we found that users were confused by the purpose of certain features of our system. In particular, we found that the regions feature was not clear. When we populated the regions with random images, the users did not understand that regions were meant to categorize the uploaded content. We corrected this by making the sample content in the final dynamic prototype related, thus showing the way the regions feature should properly be used.
</div>
</div>
</div>
</div><!-- .row -->
</div><!-- .container -->
</section>
<!-- Portfolio end -->
<!-- Skills start -->
<section class="pfblock pfblock-gray" id="skills">
<div class="container">
<div class="row skills">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Final Narratives of Use Presentation Deck</h2>
<div class="pfblock-line"></div>
<div class="pfblock-subtitle">
</div>
</div>
<img src="assets/images/launchPage.jpg">
<br><br>
<img src="assets/images/pipeline.jpg">
<br><br>
<img src="assets/images/regions.jpg">
<br><br>
<img src="assets/images/milestone.jpg">
<br><br>
<img src="assets/images/milestoneStory.jpg">
<br><br>
<img src="assets/images/layout.jpg">
<br><br>
<img src="assets/images/publish.jpg">
<br><br>
<img src="assets/images/portfolio.jpg">
</div>
</div><!-- .row -->
<!--
<div class="col-sm-6 col-md-3 text-center">
<span data-percent="80" class="chart easyPieChart" style="width: 140px; height: 140px; line-height: 140px;">
<span class="percent">80</span>
</span>
<h3 class="text-center">Programming</h3>
</div>
<div class="col-sm-6 col-md-3 text-center">
<span data-percent="90" class="chart easyPieChart" style="width: 140px; height: 140px; line-height: 140px;">
<span class="percent">90</span>
</span>
<h3 class="text-center">Design</h3>
</div>
<div class="col-sm-6 col-md-3 text-center">
<span data-percent="85" class="chart easyPieChart" style="width: 140px; height: 140px; line-height: 140px;">
<span class="percent">85</span>
</span>
<h3 class="text-center">Marketing</h3>
</div>
<div class="col-sm-6 col-md-3 text-center">
<span data-percent="95" class="chart easyPieChart" style="width: 140px; height: 140px; line-height: 140px;">
<span class="percent">95</span>
</span>
<h3 class="text-center">UI / UX</h3>
</div>-->
</div><!--End row -->
</div>
</section>
<!-- Skills end -->
<!-- CallToAction start -->
<section class="calltoaction">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<h2 class="wow slideInRight" data-wow-delay=".1s">WANT TO CHECK OUT THE INTERACTIVE PROTOTYPE?</h2>
<div class="calltoaction-decription wow slideInRight" data-wow-delay=".2s">
Check it out on Invision.
</div>
</div>
<div class="col-md-12 col-lg-12 calltoaction-btn wow slideInRight" data-wow-delay=".3s">
<a target="_blank" href="https://projects.invisionapp.com/share/3E5AMAR62#/screens/122256118" class="btn btn-lg">play</a>
</div>
</div><!-- .row -->
</div><!-- .container -->
</section>
<!-- CallToAction end -->
<!-- Testimonials start -->
<section id="testimonials" class="pfblock pfblock-gray">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Final Reflections/Post Mortem</h2>
<div class="pfblock-line"></div>
<div class="pfblock-subtitle">
The strongest aspect of not only our project, but the overall process of our work was our ability to discuss the tasks and work at hand. Whether it was creating prototypes or establishing personas, we all discussed until we found a common ground with which to proceed. Though the type of work was often divided individually, the vision which guided that work was unified.
<br><br>
The most successful aspect of research portion of our project was the second user study. The User Study 2 data and the guerilla research method provided a significant amount of rich data, which really shaped our created personas. In the future, we will probably try to mimic the spontaneity of the guerilla research method. It provided a variety of user types in a small amount of time.
<br><br>
User Studies 1, 2, and 3 certainly provided useful information in creating our design personas which later guided our tool creation process, however, we did not have enough access to the age group that our tool was actually being designed for. Therefore, we entered a problem space for one age group determined by some that are in another. In the future, we may consider taking a step back in the process and revisiting these initial user studies in order to determine that our problem area addresses the exact needs of the group.
<br><br>
The progression of our prototype fidelity, that is beginning with low fidelity, low detail paper prototypes and progressing to high fidelity, high definition interactive prototypes, gave us the freedom to change aspects of the design with ease. The low fidelity choices did not feel monumental and therefore we did not grow attached to the design decisions we made. We could take criticism from both our user test participants and experts and apply them to the next step with ease.
<br><br>
We need more research in the actual ongoing process of using our tool. Right now, we are relying on the minimal feedback we received from the interactive prototypes to guide the next design phases. In the future, we would need a significantly more thorough user test to guide decisions.
</div>
</div>
</div>
</div><!-- .row -->
<div class="row">
<!--<div id="cbp-qtrotator" class="cbp-qtrotator">
<div class="cbp-qtcontent">
<img src="assets/images/client-1.jpg" alt="client-1" />
<blockquote>
<p>Work with John was a pleasure. He understood exactly what I wanted and created an awesome site for my company.</p>
<footer>Pino Caruso</footer>
</blockquote>
</div>
<div class="cbp-qtcontent">
<img src="assets/images/client-2.jpg" alt="client-2" />
<blockquote>
<p>I'm really happy with the results. Get 100% satisfaction is difficult but Alex got it without problems.</p>
<footer>Jane Doe</footer>
</blockquote>
</div>
</div> -->
</div><!-- .row -->
</div><!-- .row -->
</section>
<!-- Testimonial end -->
<!-- Footer start -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p class="heart">
Made with <span class="fa fa-heart fa-2x animated pulse"></span> in Pittsburgh
</p>
<p class="copyright">
© 2017 <a href="http://dzgn.io" style="color:white"> Dzgn.IO</a> | Team: <a href="https://rehanbutt.com/" style="color:white;">Rehan Butt</a>, Lauren Zito & Lucy Pei
</p>
</div>
</div><!-- .row -->
</div><!-- .container -->
</footer>
<!-- Footer end -->
<!-- Scroll to top -->
<div class="scroll-up">
<a href="#home"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll to top end-->
<!-- Javascript files -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.parallax-1.1.3.js"></script>
<script src="assets/js/imagesloaded.pkgd.js"></script>
<script src="assets/js/jquery.sticky.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.easypiechart.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/jquery.cbpQTRotator.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>