Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, we are beyond thrilled. We have Karwai Pun here from the UK Home Office, talking about Accessibility Posters. Karwai, thank you so much for joining us. We’re really excited to have you.

Karwai:

Thank you for having me.

Karen:

So this is, I will say, a somewhat unusual session in that we’re going to be here talking about some posters that you’ve created. I’m going to ask you to maybe introduce yourself and give us a little background about who you are and what you do at the Home Office, and then we’ll move into talking about this project, which I just think is wonderful. But first, tell us a little bit about you.

Karwai:

I’m an interaction designer at the Home Office, a government department in the UK that looks into things like immigration, security, and law enforcement. I’m part of a multidisciplinary team that makes public-facing services better for our users; and I’m also part of a small accessibility team within the Home Office that focuses on broad conditions, such as visual impairment, cognitive and motor conditions, and mental health.

Karen:

Can you say a little bit more about this project? Why did you create these? What were you hoping to achieve within the Home Office? And even just maybe for our listeners, give a little bit of background about what the posters are.

Karwai:

So, just to give you a bit of context, the accessibility team that I am a part of is made up of about fourteen user researchers and designers that focus on broad accessibility conditions. I had been paired up with another colleague of mine to focus on autism, and what we do is we take on a broad condition and learn about it through research, personal interviews with users, and training. Our role is to share what we’ve learned about the various conditions with each other in order to pool our knowledge together and gain greater understanding as a whole. So, I wanted to approach the topic of accessibility from a design perspective, and given my focus with my colleague has been on autism, one of the things that I’ve learned about autism is that figures of speech and idioms are very hard to grasp, such as, for example, “It’s raining cats and dogs,” because of the fact that that expression can be taken literally. It’s due to the careful attention to detail of the structural language that some users on the spectrum tend to be focused on. So, that visual of cats and dogs and umbrellas was quite a strong basis to form one of the first principles in the poster that I’ve created for autism.

So then the poster became designing for users on the autistic spectrum, don’t use figures of speech, use plain English, use plain language instead. And then I started looking into other principles that can help users on the spectrum. And just so you’re aware: these posters aren’t meant to indicate that anyone with particular conditions would only require these design principles. Good design principles apply to everyone. It’s just that some of these principles have been selected in order to highlight and promote awareness of different users in our community and their conditions. So after the autism poster, I got together with the rest of my team and we looked into rolling out a series of other posters. The other posters in our series have been designing for users of screen readers, designing for users with low vision, those that have dyslexia, those that have motor difficulties, and those that are deaf and hard of hearing.

Karen:

Let me ask a question that I think many people working in accessibility tend to get, which is, “Why should I care about users that have autism, or maybe users with low vision, if the product that I’m designing isn’t really intended for those users? Why should we even have to make our products accessible?”

Karwai:

Well, good design is accessible design, so we need to factor everyone in our community. We shouldn’t only think about our immediate needs or just users that have 20/20 vision, for example. It is important to be quite inclusive. What we do in the Home Office is to encourage that inclusion, and to value diversity. Our community is diverse, and we should embrace that. Why shouldn’t we?

Ethan:

I couldn’t have said it any better myself. I think that’s beautifully put. Karwai, I’d love to hear a little bit more about maybe the design process for these posters. As you were gathering information, both from your team and from other groups presumably, how did you actually start translating that into a visual design? Were you responsible for that yourself? Were you partnered with other designers? Because they’re quite lovely, and I’d love to hear a little bit more about how they actually came to be.

Karwai:

Oh, thank you. So, I was influenced by mid-century vintage posters, and Penguin book covers, Because I started out with the autism poster, I wanted to create something that was simple, uncluttered. Using the inspiration of the vintage posters and the book covers, it was just to convey something that was unfussy. So, I used a tool called Sketch to generate my ideas, and I used Font Awesome, which is an icon font, to create quite simple visuals for that. The process behind the posters, when it came to the other posters, I got together with the rest of my team and my colleagues and they provided some ideas that they felt were good design principles and things to avoid, that should be factored in from their research into those specific conditions. So, I pretty much laid them out in a Sketch file, and we have a content designer that would review the content, review the copy to make sure that it’s quite concise and simple. Then I would create the poster with the condensed content, review it with the team, and we would go through quite a lot of iterations just to make sure we got the message understood and made sure that it was clear.

Ethan:

The other thing that really struck me when the posters came out was these are also open source resources, as well. The posters are available on GitHub, they’re available in different translations. I’d be curious to hear a little bit about what that process has been like for you as a designer. Are you getting a lot of feedback from these communities that are addressed by these posters? How has that changed the way that you’ve been maintaining the posters? I’d just love to hear a little bit about that.

Karwai:

After the posters were created, we shared them in our Home Office digital blog; we also shared them across government, also on the Government Digital Service blog as well, accessibility blog. We’ve tweeted about them and we’ve put them on GitHub, an online file-sharing community. The feedback we received was just amazing. I didn’t realize the amount of attention it would get. Some of the feedback was suggestions for more posters, such as one for users of voice recognition software, which is what one of the users who had commented uses. Others were just suggestions for more principles to add to the posters. So, there was a web user who is autistic, and she suggested to not have video or audio play automatically when she visits a screen, because there was nothing more distressing for her, due to her over-sensitivity to sound, to have noise come at her unexpectedly. This helps not just for users on the spectrum, but also for users of screen readers as well, because there would be the overlapping of sounds from the screen reader and the autoplay of the video or audio. And for someone with motor difficulties, trying to find the source of the sounds, especially if there’s finicky controls, can be quite a challenge as well. So, this was the kind of feedback that I’ve been receiving, and it’s a lot of food for thought. It was definitely things that made us think, How can we improve upon these posters?

There was also other feedback, as well. There were suggestions to have them translated, which we were more than open to have. And the posters that we have in our GitHub repo, we currently have about six translations—one of them is currently being reviewed at the moment. So, we have German, French, Spanish, Chinese, Dutch, and we’re currently reviewing a Turkish translation. We’ve learned a lot along the way. Some of the guidelines, because they were quite simple and concise, were too simple. So, that’s something that we need to factor into the next iteration. One of them was, on the deaf poster, we had mentioned not to use complicated words, and that was it. But there were some readers who had wanted to ask, “Well, why do you not use complicated words for a deaf user? Is it because they can’t understand them?” That wasn’t what we were trying to get at. What we were trying to explain—which is something that we need to clarify in our posters—is that for a deaf user, they use different means of communication, whether that be lip-reading or signing. Lip-reading complex words can be quite challenging. Signing has its own syntax and structure, and it’s very, very different from the spoken language. So if you try to sign complicated words, it becomes much more difficult to comprehend. So, it’s best to avoid complicated words.

One of the things that we thought to do was to scale these posters up and build them in HTML. We currently have two amazing design interns; we have a new design internship at the Home Office this year, and their assignment and project is to look into these posters and build them in HTML. So, build them responsively. Not just responsively in the sense that they can be viewed on whatever device that the posters can appear on, whether it be mobile, tablet, or desktop, but responsively in the sense that we are responding to all of this feedback and factoring these into the HTML build. So, what’s great about putting them online, building them in HTML, is that… So, for example, seeking more clarity with some of our simple principles, we could have a “read more” or “view more” link that users can click on in order to read more. So, we still can keep the posters quite simple, but if they click on a link, they can read more information or background behind those principles. Another idea that we thought to have was perhaps maybe having all of the design principles upfront and being able to filter them by condition in order to see which ones would impact certain users more so than others. That’s another way of informing people about different users in our community and the different conditions out there.

Karen:

Can you talk about maybe other things that you’re doing at the Home Office to help encourage accessible designs, or work with designers maybe to review their concepts or their work in progress, and give feedback and advice on accessibility?

Karwai:

Within the Home Office, we do have design crits. We view each other’s work. We’re a small community of about fourteen designers or so, working on different services, and we tend to share a lot of what we do, whether they be public-facing services or internal ones, in order to get feedback from some other designers. We also share across government. With other government departments, we have a mailing list where we post ideas, post questions about accessibility issues. And amongst not just designers, but user researchers and content designers too, we conduct talks; we attend talks held by our colleagues. Some of our colleagues would teach us how to use ARIA, or implement ARIA in our HTML builds. And others would show us how to use VoiceOver on Macs, which is a screen reader for Macs.

Ethan:

Karwai, I just have to say that this has been a wonderful opportunity to sort of hear the process around these posters and hear a little bit more about how you work. So in that light, before we let you go, I would love to hear if you have any advice for our audience. If there is somebody who is undertaking their own design research project or about to start a new initiative themselves, do you have any advice that you’d like to share with them that’s come out of the poster design project?

Karwai:

If you have an idea, just go with it, because you never know where it will lead you. And in the process, share what you do with everyone, don’t keep it to yourself. Because the thing with sharing is that you get feedback that you normally wouldn’t have gotten, things get pointed out, mistakes get flagged, and suggestions get made to improve the thing that you’re working on. And just be transparent in the process. It’s okay to make mistakes. I mean, with these posters, I had started out with creating a poster on autism which ended up being rolled out into a series of other accessibility posters, and then we’ve had suggestions on how we can add more principles, add more posters, provide them in better formats… So, sharing the work files—I think one of the things that we learned was that because I’ve used Sketch, Sketch is a Mac-based software, not everyone has a Sketch license and not everyone uses a Mac. So, it’s finding ways of making those posters more accessible to the wider community. I would say create something, share it with the wider community, and the thing that you design becomes more robust.

Karen:

Well Karwai, thank you for taking the time to share with the community here today. I know Ethan and I really just fell in love with these accessibility posters when we saw them, so I hope everyone in our audience did as well. Thank you very much.

Karwai:

Thank you both.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.