-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcivic.html
396 lines (353 loc) · 22.3 KB
/
civic.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158755807-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-158755807-1', { 'anonymize_ip': true });
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Civic Tech Projects</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="css/style-pages.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400|Open+Sans:600,700&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/e2ccdfd65b.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="nav-container">
<nav class="nav-logo">
<ul>
<li><a href="index.html" class="logo">Elysa Smigielski</a></li>
</ul>
</nav>
<div class="navtoggle" id="myNavtoggle">
<nav class="nav-links">
<ul>
<li><a href="https://elysasmigielski.com#projects" class="a2">Projects</a></li>
<li><a href="about.html">About & Approach</a></li>
<li><a href="#contact" onclick="menuContactToggle()">Contact</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="menuToggle()"><i
class="fas fa-bars"></i></a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<h1>Code for Atlanta: Public Comment Transcription</h1>
</div>
<div class="row bar2">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-12 debug-outline">
<img src="img/civic/logo.png" class="img">
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 debug-outline">
<h3 class="white-text">My Role</h3>
<p class="white-text">Qualitative Methods. Content Strategy. Emergent Themes Coding. Information
Architecture.
Wireframing. Coordinating
with Wordpress Developers</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 debug-outline">
<h3 class="white-text">Project Duration </h3>
<p class="white-text">Project Dates: June 19, 2020 - Present <br> My Involvement: June 25th, 2020 -
Present </p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-12 debug-outline">
<h4>The Project Framing</h4>
<p>Due to the Covid-19 lockdowns, the City of Atlanta (City) was no longer holding its public
meetings in
person. In order to collect mandated public comment for its public meetings, the City started
collecting public comment via voicemail. The City ran into a myriad of technical issues:</p>
<ul>
<li>The phone servers that were storing the public comment voicemails were becoming full, and
the IT
Team was having to manually move the data to another server. </li>
<li> The City collected over 50 hours of public comment on a single issue, and did not have a
solution for
quickly analyzing and creating summary documentation of
all the comments. </li>
</ul>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 debug-outline">
<a href="img/civic/agenda.png" target="_blank" class="hover"> <img src="img/civic/agenda.png"
class="img"></a>
</div>
</div>
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-12 debug-outline">
<h4>The Team's Technical Approach</h4>
<p>There were a handful of active volunteers on the ATL Scribes team: a policy director, three
software engineers, a data scientist, and two web developers. These team members advocated for
and built automated solutions that largely viewed the data as categorical and binary.
</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 debug-outline">
<h4>The Team's Technical Solutions</h4>
<ul>
<li>Helped the City create a plan for updating capacity of the phone server system</li>
<li>Integrated Otter and Twilio into the voicemail collection process, to transcribe the
voicemails</li>
<li>Created a mechanical turk app, where volunteers could manually edit and tag the binary
(for/against) statement of the transcribed
voicemails</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 debug-outline">
<p><img src="img/civic/excel.png" class="img"> </p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 debug-outline">
<p><img src="img/civic/otter.png" class="img"> </p>
</div>
</div>
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<h2 class="center">My Qualitative Approach</h2>
<br>
<br>
<div class="row bar-sm">
<div class="col-lg-2 col-md-2 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 debug-outline">
<h4>Advocating for the Rich Data</h4>
<p>The team had already started tagging the data when I first came aboard. The categories they
were
coding from the data included: caller name, location, and for / against the issue. While
these
categories were important, they excluded the "rich data" that was included in some of the
calls:
the caller's ideas for alternate solutions, the caller's reasons for their fears and
frustrations with the issue at hand. <br> <br>
Additionally, public comment periods are not a vote. If our time only tabulated how many
people
were for an issue and how many against, we would be framing the results like a vote. I
voiced
that it was imperative that we collect and represent all of the sentiments that are offered
on
these voicemails, thus requiring the addition of the qualitative approach.
</p>
</div>
</div>
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 debug-outline">
<h4>Emergent Themes Coding</h4>
<p>As part of the process of advocating for collecting the rich data, I took the voicemail text, as
transcribed by Otter, and read through it line by line. I created
a
code book by pulling out the emerging themes from the voicemails.
</p>
<br>
<h4>Descriptive Analysis</h4>
<p>Since did not want to convey the resulting data as a tabulated vote, I avoided doing any
quantitative analysis to present my results. Instead, I used the desrciptive analysis method to
present the three major themes that emerged from the data.
</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 debug-outline">
<p> </p>
</div>
</div>
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 debug-outline">
<a href="img/civic/exec.png" target="_blank" class="hover"> <img src="img/civic/exec.png"
class="img box"></a>
</div>
</div>
<div class="row">
<div class="center">
<svg class="chevron" enable-background="new 0 0 100 100" id="Layer_1" version="1.1"
viewbox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 " /></svg>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 debug-outline">
<h4>Tagging for Themes in the App / Tool</h4>
<p>I was able to use the results of my emergent themes method to advocate for the addition of a
"rich data" tagging feature in the mechanical turk tagging tool. This feature would provide the
volunteer with a space for tagging all of the additional comments that a caller made, beyond
their location and stance information. This tagged data could then be read, collated, and
treated as qualitative data in the analysis stage.
</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 debug-outline">
<p> <img src="img/civic/tag.png" class="img box"></p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 debug-outline">
<h4>Content Strategy and Wireframes</h4>
<p>The team decided to create a website as the entry point for the volunteer tagging tool. I took
the lead devising a content strategy and site map for the site, and used data gathered from
interviews with the City Council as a basis for my research. I respected the teams' desire to
get a website up and running quickly, and noted that I can gather more research in an evaluative
study.<br> <br> I created wireframes in Figma, and coordinated with our two Wordpress developers
to get the site ready for volunteer users.
</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 debug-outline">
<p> </p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 debug-outline">
<p> <img src="img/civic/map.png" class="img box"></p>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 debug-outline">
<img src="img/civic/frames.png"
class="img">
</div>
</div>
</div>
</main>
<footer id="contact">
<div class="container">
<div>
<h2>Get in Touch</h2>
</div>
<div>
<!--Social Media Icons-->
<a href="https://www.linkedin.com/in/elysa-smigielski-692b4a16/" target="_blank"> <svg class="svg"
height="512" id="Layer_1" version="1.1" viewbox="0 0 512 512" width="512" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs12" />
<g id="g5891">
<rect height="512" id="rect2987" rx="64" ry="64" width="512" x="0" y="5.6843419e-014" />
<g id="g9-1" transform="matrix(1.5537946,0,0,1.5537946,-140.87332,-132.64552)">
<rect height="166.021" id="rect11" style="fill:#ffffff" width="55.194" x="129.957"
y="200.35699" />
<path
d="m 157.927,120.303 c -18.884,0 -31.222,12.415 -31.222,28.687 0,15.93 11.963,28.687 30.491,28.687 h 0.357 c 19.245,0 31.224,-12.757 31.224,-28.687 -0.357,-16.272 -11.978,-28.687 -30.85,-28.687 z"
id="path13-0" style="fill:#ffffff" />
<path
d="m 320.604,196.453 c -29.277,0 -42.391,16.101 -49.734,27.41 v -23.506 h -55.18 c 0.732,15.573 0,166.021 0,166.021 h 55.179 V 273.66 c 0,-4.963 0.357,-9.924 1.82,-13.471 3.982,-9.911 13.068,-20.178 28.313,-20.178 19.959,0 27.955,15.23 27.955,37.539 v 88.828 h 55.182 v -95.206 c 0,-50.996 -27.227,-74.719 -63.535,-74.719 z"
id="path15" style="fill:#ffffff" />
</g>
</g>
</svg></a>
<a href="https://github.com/elysa-ux" target="_blank"> <svg class="svg" height="1024" width="1024"
viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
</svg></a>
<a href="https://medium.com/@elysasmigielski" target="_blank"> <svg class="svg" height="100%"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm149.439,390.919l0,-5.04l-23.389,-22.963c-2.065,-1.573 -3.089,-4.161 -2.661,-6.721l0,-168.719c-0.428,-2.561 0.596,-5.148 2.661,-6.722l23.95,-22.962l0,-5.041l-82.912,0l-59.105,147.438l-67.227,-147.438l-86.975,0l0,5.041l28.012,33.744c2.751,2.478 4.154,6.119 3.781,9.802l0,132.595c0.815,4.782 -0.692,9.669 -4.06,13.161l-31.514,38.224l0,5.04l89.356,0l0,-5.04l-31.513,-38.224c-3.394,-3.485 -4.995,-8.34 -4.342,-13.161l0,-114.673l78.433,171.098l9.103,0l67.367,-171.098l0,136.376c0,3.639 0,4.34 -2.382,6.719l-24.229,23.524l0,5.04l117.646,0Z" />
</svg>
</a>
<a href="https://twitter.com/elysa_smi" target="_blank"> <svg class="svg"
enable-background="new 0 0 48 48" id="Layer_1" version="1.1" viewbox="0 0 48 48"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="24" cy="24" r="24" />
<g>
<g>
<path
d="M36.8,15.4c-0.9,0.5-2,0.8-3,0.9c1.1-0.7,1.9-1.8,2.3-3.1c-1,0.6-2.1,1.1-3.4,1.4c-1-1.1-2.3-1.8-3.8-1.8 c-2.9,0-5.3,2.5-5.3,5.7c0,0.4,0,0.9,0.1,1.3c-4.4-0.2-8.3-2.5-10.9-5.9c-0.5,0.8-0.7,1.8-0.7,2.9c0,2,0.9,3.7,2.3,4.7 c-0.9,0-1.7-0.3-2.4-0.7c0,0,0,0.1,0,0.1c0,2.7,1.8,5,4.2,5.6c-0.4,0.1-0.9,0.2-1.4,0.2c-0.3,0-0.7,0-1-0.1 c0.7,2.3,2.6,3.9,4.9,3.9c-1.8,1.5-4.1,2.4-6.5,2.4c-0.4,0-0.8,0-1.3-0.1c2.3,1.6,5.1,2.6,8.1,2.6c9.7,0,15-8.6,15-16.1 c0-0.2,0-0.5,0-0.7C35.2,17.6,36.1,16.6,36.8,15.4z"
fill="#FFFFFF" />
</g>
</g>
</svg></a>
<a href="mailto:[email protected]"> <svg class="svg" enable-background="new 0 0 32 32"
height="32px" id="Layer_1" version="1.1" viewbox="0 0 32 32" width="32px" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M28,5H4C1.791,5,0,6.792,0,9v13c0,2.209,1.791,4,4,4h24c2.209,0,4-1.791,4-4V9 C32,6.792,30.209,5,28,5z M2,10.25l6.999,5.25L2,20.75V10.25z M30,22c0,1.104-0.898,2-2,2H4c-1.103,0-2-0.896-2-2l7.832-5.875 l4.368,3.277c0.533,0.398,1.166,0.6,1.8,0.6c0.633,0,1.266-0.201,1.799-0.6l4.369-3.277L30,22L30,22z M30,20.75l-7-5.25l7-5.25 V20.75z M17.199,18.602c-0.349,0.262-0.763,0.4-1.199,0.4c-0.436,0-0.851-0.139-1.2-0.4L10.665,15.5l-0.833-0.625L2,9.001V9 c0-1.103,0.897-2,2-2h24c1.102,0,2,0.897,2,2L17.199,18.602z"
id="mail" />
</svg></a>
</div>
<p class="center">Copyright Elysa Smigielski 2020</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>