-
Notifications
You must be signed in to change notification settings - Fork 0
/
bfh.html
240 lines (193 loc) · 15 KB
/
bfh.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
<!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>JCPaton Learning - Projects</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/resume.min.css" rel="stylesheet">
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none">JCPaton Learning - Projects</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/niff_logo_icon_192.png" alt="Logo. J C Paton Learning is writen on a white background in a light purple. Museums, Heritage and Libraries is writen underneath in light green, dark green and dark purple respectively.">
</span>
</a>
<button class="navbar-toggler" type="button" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html#about">About</a>
</li>
<!--<li class="nav-item">
<a class="nav-link" href="index.html#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#education">Education</a>
</li>-->
<li class="nav-item">
<a class="nav-link" href="index.html#skills">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#interests">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#awards">Blog</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0">
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="Brief">
<div class="mt-5">
<div class="row justify-content-end">
<div class="col-lg">
<h1 class="mb-5">Benjamin Franklin House - Discovery Room Games</h1>
<!--<a class="btn btn-light js-scroll-trigger" href="#Brief" role="button">Brief</a>
<a class="btn btn-light js-scroll-trigger" href="#Diary" role="button">Project Diary</a>
<a class="btn btn-light js-scroll-trigger" href="#Research" role="button">Project Documentation</a>
<a class="btn btn-light js-scroll-trigger" href="#Budget" role="button">Budget</a>
<a class="btn btn-light js-scroll-trigger" href="#Outcomes" role="button">Outcomes</a>-->
<h2>Project Brief</h2>
</div>
<!--<div class="col-sm-3"><img class="img-fluid mx-auto float-right" src="img/Screenshot_BFH.png" alt=""></div>-->
</div>
<div class="row justify-content-end" style="margin-left: 0">
<div class="flex-column">
<h4 style="color: #6BD4D0">Project Type:</h4>
</div>
<div class="col-lg flex-column">
<p>Digital</p>
</div>
</div>
<div class="row justify-content-end" style="margin-left: 0">
<div class="flex-column">
<h4 style="color: #6BD4D0">Audience:</h4>
</div>
<div class="col-lg flex-column">
<p>KS2, Formal Education</p>
</div>
</div>
<div class="row justify-content-end" style="margin-left: 0; margin-bottom: 20px">
<div class="flex-column">
<h4 style="color: #6BD4D0">Aims:</h4>
</div>
<div class="col-lg flex-column">
<p>Graphical & function update of exisiting concept, improve accessibility, future-proofing.<br></p>
</div>
</div>
<div class="row justify-content-end">
<div class="col-lg flex-column">
<p>This was a very personal project for me as I was an Education Volunteer with <a href="https://benjaminfranklinhouse.org/">Benjamin Franklin House</a> when I came up with a proposal to revamp their DiscoveryRoom Games - though a major cross-country housemove, a few tech hiccups and some changes of direction would make it a touch more complicated than planned!
<br>
<br>
The Discovery Room games support the House's object handling sessions which are part of the education offer, part quiz part interactive activity, they invite students to explore objects from the handling collection to answer questions and explore their purpose.
<br>
<br>
Based on our experiences as volunteers using them during Education sessions, we knew there were a few changes we would love to see and a few bugs to be fixed as the games were starting to show their age a touch. They were a great tool to use during our object handling sessions and the students loved them, but we found ourselves avoiding certain games in order to run our sessions to time, and developing speed-running skills to-boot to reset any level that students hadn't had time to finish before the next group arrived.
<br>
<br>
About the same time, the House was just finishing part of an HLF project which had added some amazing images designed by <a href="https://www.kremenadimitrova.com/">Kremena Dimitrova</a> to their education offer, so it seemed like an excellent time to take up the challenge of fixing up a few of those bugs and to take the opportunity to bring everything in line with the new look!
<br>
<br>
From the beginning of the project I was able to sit down and work with a few different members of the education team and my fellow volunteers at BFH to come up with a project brief that covered the areas we'd really like to see addressed:
<br>
<h4>To be fixed:</h4>
<ul>
<li><b>Accessibility</b> - new fonts, font sizes, and contrasting colours that made the games more accessible.</li>
<li><b>Function</b> - a few of the games just didn't work, or didn't fit with how the sessions worked.</li>
<li><b>Usability</b> - both the volunteers leading the sessions and the students participating found some of the UI and functioning of the games hostile, so we wanted to improvethe user experience for both sides.</li>
<li><b>Accuracy</b> - between questions the game would display factoids, a few of which hadunfortunately fallen prey to the "half-life of facts", we wanted to address that and use some more "shelf-stable" information.</li>
<li><b>Learning Outcomes</b> - to improve the learning outcomes of the quizzes and interactive levels.
<li><b>Hardware</b> - we wanted to address some ageing hardware issues and ensure the longevity of the project.</li>
</ul>
<br>
As always things are never quite that simple! But by working closely (remotely) with Eleanor, Education Manager at BFH and the Education volunteers we managed to achieve those goals.
</p>
</div>
<div class="col-sm-3"><img class="img-fluid mx-auto float-right" src="img/BFH_original.png" alt=""><i>Out with the old...</i></div>
</div>
<div class="row justify-content-end">
<div class="col-lg flex-column">
<p>
Addressing the first area - <b>accessibility</b> - was probably the easiest, the new look for the education sessions, with bright bold colours and collage-based practice, lent itself very well to the development of a style for both the quiz and gameplay sections of the software which employed a bold dyslexic friendly font and high contrast colours, which, paired with a pleasantly off white parchment-style background, hugely increased on-screen readability. Matching the games up to Kremena's style also allowed us to streamline the look of the software overall and increase the parse-ability of what was going on the screen (and let us leave behind some time consuming animated screen transitions – with a time-limited session, stealing a minute back is worth its weight in gold!).
<br>
<br>
Which leads us on to <b>functionality</b>, there were a few elements in the previous software that needed changing for some time, both small (those tedious transitions) and somewhat bigger (those habitually avoided games). Taking a careful look at how the games and quizzes functioned mechanically was part of our larger goal to improve the <b>learning outcomes</b> and ease a few pain-points when running sessions.
<br>
<br>
</p>
</div>
<div class="col-sm-3"><img class="img-fluid mx-auto float-right" src="img/Screenshot_BFH.png" alt=""><i>...in with the new!</i></div>
</div>
</div>
<div class="row flex-container" style="justify-content: center">
<div class="col-sm-3"><img class="img-fluid mx-auto" src="img/BFH_fail.gif" alt="">Soft fail-state - very on brand!</div>
<div class="col-sm-3"><img class="img-fluid mx-auto" src="img/BFH_inkwell.gif" alt=""><i>Inkwell</i></div>
<div class="col-sm-3"><img class="img-fluid mx-auto" src="img/BFH_bones.gif" alt=""><i>Keep trying!</i></div>
</div>
<div class="row justify-content-end">
<div class="col-lg flex-column">
<p>
<br>
<br>
We started by introducing a holding mechanic as part of a new soft fail-state (above left) in the quiz sections, this allowed us to introduce object handling prompts to help students engage with the objects and to counter problems that we'd noted as volunteers with students brute-forcing (press every option until you win!) their way through the quiz levels. These pauses leave room for the students to stop and think about the objects in their hands and give them guided questions to help shape their investigations of them.
<br>
<br>
When it came to the more game-like levels, the changes we made game to game varied, from small improvements like introducing a counter in the Ink Drop level (above centre) which let students see their progress better and split their playtime between pairs more easily, to major mechanical changes for the Bone sorting game (above right), which introduced both in-game feedback and a second-chance mechanic which allows students to discuss and re-try their sorting decisions, rather than just receive the arbitrary Game Over the previous version gave them if they made even 1 mistake!
<br>
<br>
Of course, some games needed more practical work than pedagogical - it was not without some small personal satisfaction that I tackled the mechanical issues of our one, ritually avoided, unplayable level, though through the process it was interesting to divine exactly what had gone awry with the original.
<br>
<br>
<b>Usability</b> wise one of the key things I was keen to add was a "reset to start" function, it was one thing I particularly noticed as a volunteer, with limited time to run our sessions we were often left with half-finished games running when students moved on or had students who had started the wrong game for the object they had with no way to exit or restart - the only way out was through! We had all become pro-level speed-runners to move sessions along after these hiccups. Because of this, the number one usability change we added was a secret reset gesture that returns the game to the home screen. Paired with the newly streamlined UI it will make everyone's life a little simpler.
<br>
<br>
<b>Hardware</b> was a more challenging part of the project than anticipated, with compatibility and stability issues galore. Sometimes it really can feel like technology is against you but, working closely with BHF and their IT support, we were able to fight back. Originally we'd planned to develop the game to use the existing PC hardware in the Discovery Room, but the more we investigated the worse this solution started to look, future-proof it was not, and though we'd begun creating a custom Linux distro to try and get the best performance from the system possible, nobody was comfortable vouching for the hardware's longevity. So we pivoted production to creating an app that would work stably with a set of Android tablets BFH already had on hand. By choosing to pivot to the Android app we would have the flexibility we were looking for to be able to upgrade the OS and be compatible with newer devices. This kind of future-proofing was very much a core aspect of the project when we started, but I don't think any of us expected quite such a significant switch of platform to be part of the proceedings!
<br>
<br>
<br>
</p>
</div>
<div class="col-sm-3"></div>
</div>
<div class="row justify-content-left" style="margin-left: 0; margin-bottom: 20px">
<div class="flex-column">
<h4>Testimonial:</h4>
</div>
<div class="row justify-content-end" style="margin-left: 0; margin-bottom: 20px">
<div class="col-lg flex-column">
<br>
<br>
<blockquote><p style="color: #5D6369;">Jenni has done a wonderful job of upgrading of our Discovery Room games which are a vital component of primary school visits to Benjamin Franklin House. Visually, the games are much more colourful and the graphics have been simplified. Functionality has also been improved which allows for students to engage with the games more independently. Throughout the development process, Jenni was a pleasure to work with and always responsive to feedback. She showed a real attention to detail and we are delighted with the final product. I would highly recommend Jenni to museums, heritage sites or libraries who are looking to develop engaging digital content.</p><cite>~ Márcia Balisciano, Benjamin Franklin House</cite>
</blockquote>
<br>
<br>
<br>
</div>
<div class="col-sm-3"><img class="img-fluid mx-auto float-right" src="img/BFH_pack.jpg" alt="" width="100%"></div>
</div>
</div>
<hr class="m-0">
</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>
<!-- Custom scripts for this template -->
<script src="js/resume.min.js"></script>
</body>
</html>