-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·680 lines (649 loc) · 35.5 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
<!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="">
<title>Quatropolis</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 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=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency.min.css" rel="stylesheet">
</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">CS 377I Project 3: Navigating Complexity</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="#motivation">Gameplay</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Process</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#challenges">Challenges</a>
</li>
<!--<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">Process</a>
</li>-->
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-heading text-uppercase"></div>
<!--<div class="intro-lead-in"><br/><br/>a game of local politics and housing policy</div>-->
<!--<a class="btn btn-primary btn-xl text-uppercase" href="https://cs-377i-fake-news.firebaseapp.com/demo/" target="_blank">view our simulator</a>-->
</div>
</div>
</header>
<section id="statement">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Tabletop games can model complex systems and allow players to try on a persona for a short period of time.<br/><br/>We built Quatropolis, a four-player game centered around real-world issues, to help players understand something that affects all of us: housing policies and local government decision-making.<br/><br/>Through resource acquisition, collaboration, debate, voting, and even deceit, players gain an understanding of how four parties - renters, landlords, private interests, and government institutions - each affect local policy.</h2> <br/>
<!--<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>-->
</div>
</div>
</div>
</section>
<!-- Motivation -->
<section class="bg-light" id="motivation">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Gameplay</h2>
<h3 class="section-subheading text-muted">In Quatropolis, there are four players: a landlord, a renter, a private corporation, and a city official. Each player starts the game by drawing two objectives and one enemy, kept secret unless the player decides to disclose them. Their goal is to achieve their objectives, ideally by as wide a margin as possible, while preventing their enemy from achieving their enemy's objectives.
<br/><br/>This sequence of events makes up a single "issue cycle", of which there are 7 over the course of the game. Each "issue cycle" is centered around a particular issue card, and each player has different strengths and weaknesses they can exercise over the course of this cycle.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Resource Acquisition</h4>
</div>
<div class="timeline-body">
<p class="text-muted">There are two types of resources in Quatropolis: money and influence. Each can be used to vote on issues, but different players acquire and spend them in different ways at the beginning of each cycle.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Issue Debate</h4>
</div>
<div class="timeline-body">
<p class="text-muted">After everyone has received their resources for the cycle, an issue card is revealed, which will have some impact on Quatropolis' four states (rent, public amenities, property tax, and population), and thus be favorable or disfavorable depending on players' objectives. It is up to the players to debate the issue and attempt to win over the others!</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Resource Funneling</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Before voting occurs, players who aren't allowed to spend money on elections (the landlord and the tenant) have the option to give their money to those who can (the city official and the private corporation), if they think those powers will use the resources in ways that help them.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Voting</h4>
<!--<h4 class="subheading">Prototype Development</h4>-->
</div>
<div class="timeline-body">
<p class="text-muted">Finally, everyone votes on the issue at hand in a semiblind vote. A majority of resources spent on one side or the other wins, and the game states are updated accordingly.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4><br>Repeat!</h4>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid -->
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Process</h2>
<!--<h3 class="section-subheading text-muted">a deeper look into the skills and techniques we used</h3>-->
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/q1.0.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>P2: Quatropolis 1.0</h4>
<p class="text-muted"></p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/research.png" alt="">
</a>
<div class="portfolio-caption">
<h4>Research</h4>
<p class="text-muted"></p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/revise.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Rules Revision</h4>
<p class="text-muted"></p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/testing.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Testing and Refinement</h4>
<p class="text-muted"></p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/brand.png" alt="">
</a>
<div class="portfolio-caption">
<h4>Rebranding</h4>
<p class="text-muted"></p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/process/final.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Final Result</h4>
<p class="text-muted"></p>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="challenges">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Challenges</h2> <br/>
<!--<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>-->
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-clock-o fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Production Timeline</h4>
<p class="text-muted">From the beginning, we knew we had to make intentional decisions about how we used our time. We knew we wanted to make major improvements to the physical game prototype itself, but we also wanted to revisit some of the fundamentals of gameplay and redesign the game's aesthetic - and since print shops and game production sites require turnaround time, we couldn't do everything we wanted in just a few weeks.</p>
<p class="text-muted">We ended up taking a middle ground: we invested most of our time in improving gameplay and aesthetic design, but were able to produce a prototype close to the quality we were looking for by making and purchasing pieces ourselves à la carte (and rushing a Kinko's order!).</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Game Mechanics and Playtesting</h4>
<p class="text-muted">One of the biggest challenges we faced was making sure that we had correctly accounted for all the possible states of the game, to avoid any unwinnable states or other undesirable behavior, in the context of limited testing opportunities.</p>
<p class="text-muted">Because our game currently takes an hour to play - and doing so for the first time takes even longer - it was difficult to find volunteers willing to playtest our game all the way through. Instead, we were forced to test different "playable slices" on different groups of people. Combined with the playtesting we did in P2, we did feel like we had enough information to make the decisions we needed to make about game mechanics, but it would have been much better if we could have found volunteers who we didn't know who were willing to sit through the entire game during week 9 of the quarter in particular.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-list fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Extracting Feedback</h4>
<p class="text-muted">Our team had a strong vision for the types of conditions under which our game would truly shine. Our game has great potential for strategic play - we observed this when Kylie, a past collaborator, made some interesting strategic decisions during a playtest - but it is hard to do so without more familiarity with the game than any of our other playtesters had. In addition, we had limited time, attention, and emotional investment during our playtests. This made it hard to necessarily feel like we were getting the right kind of feedback from our testing. It was also hard to be sure which feedback we got was relevant to the onboarding process, and which was relevant to the fundamental game mechanics. We ultimately solved this problem by triaging feedback, but testing with more familiar audiences and under conditions more similar to ideal gameplay would have been helpful.</p>
</div>
</div>
</div>
</section>
<!-- Process -->
<!--<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Process</h2>
<h3 class="section-subheading text-muted">a week-by-week breakdown of our work</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Week 1</h4>
<h4 class="subheading">Preliminary Research</h4>
</div>
<div class="timeline-body">
<p class="text-muted"></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Week 2</h4>
<h4 class="subheading">System Modeling</h4>
</div>
<div class="timeline-body">
<p class="text-muted"></p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Week 3</h4>
<h4 class="subheading">Ideation</h4>
</div>
<div class="timeline-body">
<p class="text-muted"></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Week 4</h4>
<h4 class="subheading">Prototype Development</h4>
</div>
<div class="timeline-body">
<p class="text-muted"></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Final
<br>Prototype
<br>Demo</a></h4>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>-->
<!-- Team -->
<section id="team">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Team</h2><br/>
<!--<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>-->
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
<h4>Stefan Swaans</h4>
<p class="text-muted">Class of 2018, B.S. Computer Science</p>
<p>Gameplay Mechanics Lead</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/stefanswaans/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
<h4>Julia Daniel</h4>
<p class="text-muted">Coterm, M.S. Computer Science</p>
<p>Research and Documentation Lead</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/jnudaniel/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
<h4>Miguel Taruc</h4>
<p class="text-muted">Class of 2019, B.S. Computer Science</p>
<p>Graphical Design Lead</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/miguel-patrick-taruc-92084a128/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<!--<div class="col-lg-8 mx-auto text-center">
<p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
</div>-->
</div>
</div>
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted">Special thanks to Kylie Jue for her contributions to the original iteration of Quatropolis.</h3>
</div>
</section>
<!-- Footer -->
<footer class="bg-light" >
<div class="container">
<div class="row">
<div class="col-md-5">
<span class="copyright">Created by Julia Daniel, Stefan Swaans, and Miguel Taruc</span>
</div>
<div class="col-md-3">
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="https://cs377i.stanford.edu/" target="_blank"><strong>CS 377I: Designing Systems for Humans</strong></a>
</li>
</ul>
</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 class="text-uppercase">P2: Quatropolis 1.0</h2><br/>
<p>Coming out of P2, we were excited about our game's potential and knew we wanted to keep working on it and improving it. Much of the current structure of gameplay was already in place at the end of P2: we had 4 roles, 4 game states, objectives, 7 issues, and 2 types of resources. We knew that the game had potential, so we identified a few key areas to try to improve.</p>
<img class="img-fluid d-block mx-auto" src="img/process/q1.0.jpg" alt="">
<p>From the image above, it is clear that one key potential area for improvement was in the physical production value of the game. Voting was done using coins and macaroni into plastic cups, and instead of game cards we had post-its and half-sheets of paper. The game was certainly playable, but it was neither durable nor aesthetically cohesive. Furthermore, the lack of denominations in counting money (represented, counterintuitively, by macaroni) slowed down gameplay.</p>
<p>This leads to another point: we received feedback that the game was slow, confusing, and sometimes frustrating. We needed to find ways to speed up gameplay, clarify rules, and increase excitement and replayability. This would require better physical game items as well as rules modifications.</p>
<p>Finally, we wanted to reassess whether we wanted to take the message of the game in any new directions. In P2, we had originally conceived of the game as illustrative of the process of gentrification, but that focus became less clear over the course of the game's development. We wanted to go back to the drawing board a bit and do some intentional research and decision-making around our game's theme and intended teachings.</p>
<ul class="list-inline">
<li><a href="res/q1.0.pdf" target="_blank">View our full documentation for P2's version of Quatropolis</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</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 class="text-uppercase">Research</h2>
<!--<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>-->
<br/><p>We knew we wanted to make an intentional decision about the complex issues our project was attempting to tackle. We conducted primary and secondary research in two main overlapping areas - tenants' rights and Bay Area gentrification - with the goal of identifying particular concepts and dynamics we wanted to build into the game.</p>
<img class="img-fluid d-block mx-auto" src="img/process/research.png" alt="">
<p>We interviewed two Bay Area residents, one South Bay renter in her twenties who had some experience in community organizing and one renter in his forties who had lived in a variety of Bay Area locations. Our conversations with them about the effects of the tech industry, local politics, and various movements working for housing justice allowed us to think more concretely about the phenomena we were attempting to model in some form through Quatropolis.</p>
<p>We also conducted secondary research into the history of redlining and housing justice movements in the Bay Area. We vaguely knew before working on this project about the fraught history and racialized class dynamics around housing policy in this area, but reading specifically about local practices of redlining (see image above) and the ways local politics and business affected tenants' and landlords' experiences provided a fascinating historical perspective.</p>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</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 class="text-uppercase">Rules Revision</h2><br/>
<img class="img-fluid d-block mx-auto" src="img/process/ideation-fixed.png" alt="">
<p>Although our research proved helpful in setting the intention for our game, we ultimately decided that there were enough structural issues with the gameplay that adding entirely new aspects wasn't feasible within our short timeframe if we wanted to ultimately have time to produce a physical copy of the game. We turned our attention toward improving the gameplay, and have attached below a full description of that process and decision-making.</p>
<ul class="list-inline">
<li><a href="res/revision.pdf" target="_blank">View our full description of revisions</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</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 class="text-uppercase">Testing and Refinement</h2><br/>
<img class="img-fluid d-block mx-auto" src="img/process/testing.jpg" alt="">
<p>Playtesting was an important part of our process, but a challenging one. Because Quatropolis is relatively complex, it takes a little while to explain the whole game, and there are some elements of strategy that are hard to incorporate without some experience playing so were hard to test for with new players. In addition, the game itself takes a long time, particularly for new players, so due to time constraints we were forced to test using "playable slices". We certainly gained good insights from them, but it would have been nice to be able to observe full playthroughs with more experienced players. One thing that was quite helpful was watching Kylie, who was in our team during P2, because she did think strategically about the game and had valuable insights about replayability.</p>
<p>We have described in more detail the process and results of our playtesting in the revisions document (linked again below).</p>
<ul class="list-inline">
<li><a href="res/revision.pdf" target="_blank">View our full description of revisions</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 5 -->
<div class="portfolio-modal modal fade" id="portfolioModal5" 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 class="text-uppercase">Rebranding</h2><br/>
<img class="img-fluid d-block mx-auto" src="img/process/brand.png" alt="">
<p>We redesigned both the printed and 3D physical items to facilitate gameplay and add cohesion. We designed and printed issue cards, role cards, enemy cards, objective cards, and a master game states tracker. We also purchased sturdy buckets for voting, personal containers for resources, a die, markers for the game states, and coins and poker chips for money and influence.</p>
<p>With more time, we would have liked to build or order a custom, branded game box (mockup above) to contain everything, but this would not have been printable within our timeframe, so we settled for sprucing up an existing box we had using vinyl lining for a neutral, professional feel.</p>
<ul class="list-inline">
<li><a href="res/cards.pdf" target="_blank">View our full set of cards and printed game items</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6 -->
<div class="portfolio-modal modal fade" id="portfolioModal6" 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 class="text-uppercase">Final Result</h2><br/>
<img class="img-fluid d-block mx-auto" src="img/process/final.jpg" alt="">
<p>Our final product is a sturdy, fun, and educational game that incorporates earning, collaborating, debating, deceiving, and voting. We hope that by playing this game, people will learn about and empathize with the various forces that affect housing policy and local government.</p>
<ul class="list-inline">
<li><a href="res/manual.pdf" target="_blank">View our final Quatropolis instruction manual</a></li>
</ul>
<!--<ul class="list-inline">
<a class="btn btn-primary btn-xl text-uppercase" href="https://cs-377i-fake-news.firebaseapp.com/demo/" target="_blank">view our simulator</a>
</ul>-->
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close</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>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
</body>
</html>