-
Notifications
You must be signed in to change notification settings - Fork 0
/
cafe.html
318 lines (271 loc) · 25.2 KB
/
cafe.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
<!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="I used participatory design methods to co-design a website and brand for a new local community arts nonprofit. As the organization grew, so did my efforts to scale up the website with the help of AIGA D.C. and my increased proficiency as a full stack designer.">
<meta name="author" content="Josh Kim">
<meta property="og:title" content="Pro Bono Nonprofit Website Redesign" />
<meta name="keywords" content="Josh Kim, ux, design, research, inclusive, pro bono, nonprofit, user experience, portfolio, accessibility">
<title>Co-designing a nonprofit website | Josh Kim is a humanity centered accessibility strategist, educator, and design researcher</title>
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jk.css" rel="stylesheet">
<!-- Fonts from Google -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Libre Baskerville:wght@400&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Skip link for keyboard users -->
<a class="skip-main" href="#main">Skip to main content</a>
<!--Navigation -->
<header class="header">
<div class="container">
<nav class="jnav" aria-label="main">
<a href="index.html">Josh 内藤</a>
<span class="divider"></span>
<ul>
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<!--end of container -->
</header>
<!-- Banner -->
<main role="main" id="main" tabindex="-1">
<article class="content">
<div class="container">
<!-- Intro -->
<div class="row ">
<div class="col-lg-8">
<h1><span class="h-desc">Community Art for Everyone</span> Co-designing a nonprofit website</h1>
<p>I used participatory design methods to co-design a website and brand for a new local community arts nonprofit.</p>
<aside role="note">
<p><strong>UX Designer</strong>, May 2019 to April 2020</p>
</aside>
</div>
<div class="col-lg-10">
<figure><video class="ft-img" controls loop class="stickybox" muted aria-label="The CAFE website featuring a colorful brick motif.">
<source src="img/thumb/cafe-th.mov" type="video/mp4">
</video></figure>
</div>
</div>
<div class="row ">
<div class="col-lg-9 col-xl-8">
<h2 id="designing-for-good">Designing for Good</h2>
<p>“Can I really say I’m designing for good at work?” I asked myself that alot two years into my job at Deloitte Digital. I joined the D.C. branch in hopes I could work on meaningful projects that could help people in need— but, two years in, I realized that the whole bottom line dilemma of big consulting wouldn’t make that so simple. <del>Who wouldn’t feel ethically queasy over working for <a href="https://www.nytimes.com/2018/07/12/business/deloitte-ice-contract-uproar.html">a company that does work with ICE?</a></del></p>
<p>To ease my cognitive dissonance, I decided to do a probonothon for a local nonprofit in need of a website. (I'll cover the ethical grey area of "for good" hackathon projects later in this article). I had the confidence I needed to operate solo thanks to lessons learned from <a href="perfectbrew.html">a failed attempt at redesigning a cafe's website with a team</a>, so I was eager to get started.</p>
<figure class="picture-caption">
<iframe title="Perfect Brew WAAD" width="100%" height="350" src="https://www.youtube.com/embed/DbODcd-EGN4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption>I made the rookie mistake of going all out over a simple cafe website redesign. My ragtag team of volunteers burned out real fast in our overbaked affinity mapping activity. This time, I would do it solo from research to dev.</figcaption>
</figure>
<p>Community Art for Everyone, or CAFE, immediately caught my eye as the perfect place to start. CAFE is a local nonprofit organization that provides free community art events to disadvantaged communities. I had known the owner for a while, loved the work that was being done, and knew she was interested in creating a website and brand in hopes of expanding her efforts even more.</p>
<h2 id="planning">Planning a Probonothon</h2>
<p>If it wasn't obvious already, a probonothon is basically the same concept of a hackathon: create something in under 24 hours-- but specifically for the purpose of helping someone else.</p>
<h3>But first, is this ethical?</h3>
<p>Before starting, I spent some time thinking of the ethical implications. As I mentioned earlier, <a href="https://design-justice.pubpub.org/pub/yvwnnz7b/release/1">there’s a big grey area when it comes to hackathons</a>. They’re usually hosted in privileged design sites with environments <a href="https://www.pbs.org/newshour/arts/what-its-like-to-be-a-young-girl-in-the-male-dominated-field-of-tech">that cater specifically to white and east-Asian men without disabilities</a>.</p>
<p>That being said, when these hackathons are organized for the sake of designing for good, they usually produce <a href="https://nextcity.org/daily/entry/to-truly-be-just-design-challenges-need-to-listen-to-communities">technically brilliant design interventions that are mismatched</a> for their intended (and often uninvolved) users and clients. </p>
<figure class="picture-caption">
<img src="img/cafe/hackathon.jpg" style="width:100%;" alt="A group of white men working on a bright red table with black laptops and sticky notes." />
<figcaption>Google up "hackathon" and you'll find spaces full of male white and east-Asian developers.</figcaption>
</figure>
<h3>Preparing Together</h3>
<p>To avoid the trap of creating a mismatched solution, I met with CAFE’s director ahead of time and facilitated a participatory design workshop. We worked together to map out her vision for the organization and thought about how that might manifest through a brand and website (if it was needed at all).</p>
<figure class="picture-caption">
<img src="img/cafe/planning.png" style="width:100%;" alt="An oak table in a cafe layered with sticky notes." />
<figcaption>I facilitated several "mini" affinity mapping sessions to better understand the director's vision and expectations. This set the stage for a collaborative relationship.</figcaption>
</figure>
<p>Once the workshop came to a close, we mutually set a date to meet again to kick off the probonothon. The goal? Create CAFE's website in a day. Why just a day?</p>
<ul>
<li>Post preparation, we agreed that CAFE's needs would not require a dynamic or domain-complex website.</li>
<li>The director had an upcoming proposal that could be significantly enhanced with a brand and website.</li>
<li>I knew I would risk either procrastination or an overbaked process if I gave myself too much time.</li>
</ul>
<h2 id="12-hours">Creating a Website in 12 Hours</h2>
<p>I wanted this probonothon to be a collaborative process, but I also didn’t want it to be a nightmare for the director. For obvious reasons, it’s unreasonable to ask anyone to work on anything for more than 8 hours.
<p>Luckily, collaboration in this case wouldn’t have to extend out to development. I knew I could conduct the dev work alone at night provided we could co-design a decent prototype during the day.</p>
<p>We started with lean research. I called several designers I knew who worked in the nonprofit industry while the director conducted competitive research based on nonprofits similar to CAFE. I also asked her to save the ones she liked aesthetically as a makeshift mood board.</p>
<figure class="picture-caption">
<img src="img/cafe/research.jpg" style="width:100%;" alt="A loose leaf sheet of notebook paper with short highlighted anecdotal phrases." />
<figcaption>I took notes using pen/paper and highlighted any key points that came up throughout my interviews with nonprofit experts.</figcaption>
</figure>
<p>Based off of our research, we sketched out paper components and stitched them together to form a working information architecture and low-fidelity prototype. We used customers at the coffee shop (with permission from the owner) to conduct informal usability tests which guided our iterations.</p>
<figure class="picture-caption">
<img src="img/cafe/prototype-1.jpg" style="width:100%;" alt="Several sheets of loose leaf paper strewn across a table. A torn sheet has a website drawn on it with a marker." />
<figcaption>Our sketched up design system was wonderful for rapid prototyping.</figcaption>
</figure>
<figure class="picture-caption">
<img src="img/cafe/working.jpg" style="width:100%;" alt="A picture of me drawing a paper prototype with my finger pointing at referenced research." />
<figcaption>We were lucky to grab a big table.</figcaption>
</figure>
<p>With our drawn out wireframes, I began to create a working prototype using a bootstrap template I found online that best matched the websites the director had picked earlier in the day. While I put together the landing page together, the director wrote content.</p>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/original.png" style="width:100%;" alt="A newspaper blog template with lightly styled cards." />
<figcaption>The template we chose to work off of.</figcaption>
</figure>
<p>Upon completion of the landing page, we were mutually satisfied with the progress made within our daytime working session. I would handle the rest of the pages at night on my own with the content the director had written. Several hours later, the website was live.</p>
</div>
</div>
<div class="row ">
<div class="col-lg-12">
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/first.png" style="width:100%;" alt="A clean white website with pictures of children at a chalk art event." />
</figure>
</div>
</div>
<div class="row ">
<div class="col-lg-9 col-xl-8">
<h2 id="branding">Branding Up with AIGA D.C. </h2>
<p>Over the course of a year, CAFE had made significant strides as a nonprofit organization with two major collaborations with the Fairfax County Parks Authority. I also made strides as a human being and found myself volunteering at more events with CAFE until I ended up joining the board.</p>
<figure class="picture-caption">
<img src="img/cafe/volunteer.jpg" style="width:100%;" alt="A group of people holding hands in a Korean ring dance" />
<figcaption>There's nothing more rewarding than giving back to your community.</figcaption>
</figure>
<p>In anticipation of bigger things in 2020 (pre-pandemic), I registered CAFE for <a href="https://dc.aiga.org/event-internal/createathon-dc-2020/">AIGA D.C.’s annual Createathon</a> in hopes of giving our brand a much needed refresh (no thanks to my mediocre visual design skills). We were partnered up with a team of fantastic designers led by the incredible <a href="https://meganlearn.com/">Megan Learn</a> and the rest was history. I’ll let their godly work do the talking.</p>
<figure class="picture-caption">
<img src="img/cafe/collab.jpg" style="width:100%;" alt="A zoom call with five people on the line. I'm looking awkward as I talk to the others." />
<figcaption>Megan's team masterfully saw CAFE's vision through from start to finish.</figcaption>
</figure>
</div>
<div class="col-lg-12">
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/miro.png" style="width:100%;" alt="New brand guidelines for CAFE featuring a logo with colorful bricks forming a C." />
</figure>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/guidelines-1.jpg" style="width:100%;" alt="An online whiteboard full of various logos of CAFE." />
</figure>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/flyer-2.png" style="width:100%;" alt="A colorful flyer juxtaposed against a Korean woman dancing in black and white." />
</figure>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/new-website.png" style="width:100%;" alt="The new CAFE website which used the new colorful brick motifs." />
</figure>
</div>
<div class="col-lg-9 col-xl-8">
<p>Thanks to their incredible brand guidelines, I was able to give the website a much needed update as well. I created new iconography, designed a new animated jumbotron, and jazzed up the style.</p>
</div>
</div>
<div class="row ">
<div class="col-lg-9 col-xl-8">
<h2 id="accessibility">Accessibility Remediation</h2>
<p>Some time later in 2020 I read an article from Smashing Magazine titled <a href="https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/">Designing With Reduced Motion For Motion Sensitivities</a>. Around this time, I was studying up on my front-end skills to improve my capabilities as an inclusive designer. Needless to say, my heart dropped when I realized I had seriously fucked up with CAFE’s website (and my portfolio too).</p>
<p>If you’re not familiar with why this is a problem, Facundo Corradini wrote an article on his <a href="https://alistapart.com/article/accessibility-for-vestibular/">experience with animations while having a temporary vestibular disorder</a>.</p>
<figure>
<blockquote cite="https://alistapart.com/article/accessibility-for-vestibular/">
<p>I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.</p>
</blockquote>
<figcaption>Facundo Corradini</figcaption>
</figure>
<p>Beyond having triggering animations on CAFE’s website, there were a host of other accessibility defects as well due to my thoughtless decision to use an online bootstrap template. I decided to quickly remediate the more critical issues ASAP.</p>
<h3>Scanning for Issues</h3>
<p>I started by running an axe scan on all the pages of the website. As anticipated, there were a ton of issues including:</p>
<ul>
<li>Low contrast</li>
<li>Missing alt text</li>
<li>Missing document language (fuck me)</li>
<li>Jumped and misordered headings</li>
</ul>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/cafe-axe-1.png" style="width:100%;" alt="A screenshot of my browser after conducing an Axe scan with focus over a heading with low contrast." />
<figcaption>Axe caught 19 issues on the landing page alone. Ouch.</figcaption>
</figure>
<p>I also knew that my code looked like a whole bucket of div soup. It was in desperate need of landmarks and proper HTML5 semantics.</p>
<h3>Prioritizing Fixes</h3>
<p>Given my limited time, I decided to prioritize the issues I would tackle. I started with reducing motion to mitigate potential harm. This was relatively straightforward thanks to Scott O’Hara’s awesome article <a href="https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html">Reduced Motion Auto-Play Video</a>.</p>
</div>
<div class="col-lg-12">
<figure class="picture-caption">
<video aria-describedby="reduce" controls class="stickybox-nm" muted>
<source src="img/cafe/reduce-motion.mov" type="video/mp4">
</video>
<figcaption id="reduce">If a user has reduced motion selected on their OS, the background animation will now stop. Nifty!</figcaption>
</figure>
</div>
<div class="col-lg-9 col-xl-8">
<p>I then began work on improving keyboard and screen reader navigation by fixing heading levels and adding assistive technology shortcuts.</p>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/headings-2.jpg" style="width:100%;" alt="I highlighted the code of the footer's h3 About CAFE which shows a class of f-h5." />
<figcaption>To remediate skipped headings in the footer I used a custom heading class <code>f-h5</code> to retain the visual appearance of an h5 while retaining the semantics of a <code>h3</code>. A new visually hidden <code>h2</code> of "Footer" provides a buffer.</figcaption>
</figure>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/skip.jpg" style="width:100%;" alt="A colorfully styled button titled Skip to Main Content on the about page." />
<figcaption>To improve the keyboard experience I added a skip to main link on tab on all pages.</figcaption>
</figure>
<p>Finally, I fixed button color contrast, added a <code>lang=“en”</code> to the landing page, and wrote alt text for all images on the website to provide a more accessible experience.</p>
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/axe-scan-2.png" style="width:100%;" alt="An axe scan revealing 0 defects." />
<figcaption>On a second run through with axe tests I was able to remove all violations.</figcaption>
</figure>
<p>This small effort, while meaningful, is still far from OK. In the future I'll still need to make more improvements to reduce the div soup (like using more lists).
</div>
</div>
<div class="row ">
<div class="col-lg-9 col-xl-8">
<h2 id="conclusion">Conclusion</h2>
<p>Reflecting back on this pro bono work, I’ve learned a number of things which I can easily list out for anyone else interested in doing something similar:</p>
<ol>
<li>Think carefully about the domain of work and your own availability before you pick up a pro bono initiative. If it’s relatively simple, like CAFE, you might want to consider operating solo. Trying to recruit a team of volunteers who have real life obligations can become a nightmare deep into a project. Alternatively, consider recruiting short term volunteers for a sprint of specialty work (like branding).</li>
<li>Co-design with the people you’re providing a service to. By being an open collaborator and not an expert hermit, your solution will have a better chance at being adopted and used.</li>
<li>If you don’t have a lot of time and need to use a template to make a website, make sure to double check that it has been accessibly designed by running a quick axe scan or wave report. It’ll save you a whole lot of tech debt in the future.</li>
</ol>
<p>What I can’t describe so easily in words is how meaningful this kind of work really is… if it can be considered as work at all. Over the past two years volunteering with CAFE, I’ve made precious memories and friendships that will last me a lifetime. I’ve also been motivated to volunteer more which led me to the U.S. Digital Response (which led me to my current job at Ad Hoc). </p>
<p>There aren’t many things more rewarding in life than giving back what you can to the world. You won’t regret it for a minute.</p>
</div>
<div class="col-lg-8">
<figure class="picture-caption">
<img class="stickybox-nm" src="img/cafe/volunteers.jpg" style="width:100%;" alt="A group of CAFE volunteers standing in front of a chalk art wall." />
</figure>
</div>
</div>
</div>
<!--Container-->
</article>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<h2 class="sr-only">Footer</h2>
<div class="row">
<div class="col-4 col-md-2">
<h3>SITEMAP</h3>
<ul role="list">
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>CONTACT</h3>
<ul role="list">
<li><a href="resume.html">Resume</a></li>
<li><a href="mailto:[email protected]">Email</a></li>
<li><a href="https://www.linkedin.com/in/joshkimux/">LinkedIn</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>A11Y</h3>
<ul role="list">
<li><a href="accessibility.html">Statement</a></li>
<li><a rel="external" href="https://www.a11yproject.com/spotlight/josh-kim/">Spotlight</a></li>
<li><a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/next">Webring</a></li>
</ul>
</div>
<div class="offset-0 col-sm-6 offset-md-1 col-md-5 offset-lg-2 col-lg-4">
<h3>HAIKU</h3>
<ul>
<li class="espresso">Need more espresso</li>
<li class="depresso">This site gives me depresso</li>
<li><a href="portfolio.html">Despite progresso</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="js/jk.js"></script>
</body>
</html>