This webinar was created in partnership with Social Impact World, a community for social impact leaders dedicated to turning the corporate world into a force for good. The presentation deck is accessible to the public. If you're interested in increasing accessible and equitable design into your digital product or service, we'd be happy to learn more about what you're working on, and connect you to experts and best practices. Contact us to be in touch with a team member.
Jesse James
Today we will share with you our own journey through the process of how we learned how to create a more equitable, accessible process. Today, we're going to look at common misconceptions that might block somebody from getting into this work, and some examples of how we're able to find success.
I'm the Design Director of Operations here at Exygy. My focus is on design systems, which means creating the building blocks that the rest of the team uses in order to design and build products. These design systems aim to deliver consistent user experiences for as many people as possible. Some of the products that I've been lucky enough to work on over the course of the last few years are Bloom Housing, which is an affordable housing platform in the Bay Area, and also a redesign for the City of Oakland that focuses the whole website around city services, and how those can better meet its residents. And today, as far as inclusive design, I'm going to focus on the parts that have to do with web accessibility.
Ana Bel Campos
Hi, everyone, I'm Ana Bel Campos, the Director of User Experience Design here at Exygy. As a user experience designer, I always like to say that my main goal is really deeply understand users' context and goals, their needs, and motivations, their behaviors, and making sure that whatever product, program, or service that we are designing not only meets them where they are, but does so in an inclusive, equitable, and accessible way. Some of the projects that I have been working on recently are a resource hub for the gender equity unit at the Johns Hopkins Bloomberg School of Public Health. also conducting a user needs assessment for the climate change and adaptation website of the Office of Planning and Research of the State of California. And today, I'll be covering talking a little bit more and higher level inclusive and equity design practices.
Let's talk a little bit about the state of things in design and more generally, in the product development world today. What are some of the processes that we're used to using? Some of you probably have seen some version of this, but human-centered design processes are the most adopted processes in industry today.
There are a couple of specific moments where users are invited to participate. They might be invited in the beginning, as objects of the research. They might also be invited back to test out a couple of solutions. And then at the end of collecting some metrics to understand their behavior, or how they actually use the product. But that means that the users are again, involved in some places, mostly to share and validate solutions, then they are really invited to think about the solutions with designers. So it's important to notice how the premise of the human-centered design process is that the roles of the designer and the users are very different.
The designer is normally removed from the problem, right? Not in all products, but in a lot of them. They don't experience the problem that they're trying to solve. So they need to understand and empathize with and study users. But then they are the ones that are actually the experts to solve the users problems. And then the users are the ones that experience the problem, and they need to share and help, because they can't really solve the problem themselves.
Already you can see that there are some limitations to human-centered design. And the first obvious one is that the users are not active decision-makers in that process. Design decisions are made usually by designers, or some of them, product people or engineers. But normally designers in the product development industry, they're often of a similar race, similar history, similar gender, socioeconomic class, and education level — so it's not a very diverse group of people making decisions for everyone else. It might also lead to reproducing some inequitable power relationships if the designer again is the one that is the expert — that needs to research the user — then they carry the power of asking the questions, writing interviews, synthesizing the results, and coming up with solutions. This then leads to a result in the products that are still created from the designer's point of view. And they might be carrying biases that not only come from biases that the designer carries but also come from the process of not having a very diverse group of people designing for everyone.
The human impact of social issues calls for an intentional process. Because we work in the social impact space, we design digital experiences that touch the lives of brilliant, vulnerable communities of a lot of people. It becomes really important that we question a little bit of that process as kind of that "ultimate" design solution. When we try to create or incorporate a process, there is the intention of equity and being more inclusive and equitable. And that's where inclusive design comes into the picture.
Microsoft has this definition that we really like about inclusive design, that it enables and draws on the full range of that human diversity. But so what is inclusive design?
Inclusive Design extends on three main principles:
Recognize exclusion. Mapping out who's being left out of decisions and solutions and creating opportunities to include them in the process.
Invite people with lived experiences to the table. Empowering historically and presently excluded populations to co-create solutions in a way that is accessible and fair.
Design for the margins. Designing for people most at the margins first will result in designs that benefit everyone.
Recognizing exclusions: we all know that implicit biases, power dynamics, and invisible structures like timeline, budget, and profitability — all impact the decisions that we make about our design processes, and who we invite to it. Are we going to do user tests? Do we have time to do research? Who are we actually testing with? Who was invited was not? All of those decisions depend on kind of stronger forces that is not just us. And if we're on autopilot, and we don't really think about those decisions, we might actually bias the final product of our designs. It's important to pause, reflect, and question which voices are we living out of our design process.
This is a really great visualization from an organization called Equity Meets Design. Look at your team and your research participants, at your stakeholders, look at your users and visualize which of these categories are unbalanced right now. Do we have more people with light or dark skin? Do we have more males or females? Do we have more college-educated people? More English first speakers? And so on and so forth. Visualizing power helps us be a little bit more intentional about who we need to invite to the process. And we'll have deeper examples of how that comes to play in that design process.
The second principle is to invite people with lived experiences to the table. So when designers make decisions by themselves, even if they have proper research, the solutions are still biased by their context and mistakes or points of view. But there's really no way to create a design solution that is completely unbiased, right, especially if there are one or two designers that are similar working on it. So by inviting end users to co-create solutions, together, those with lived experiences can create solutions that work better for themselves. And when we invite people with lived experiences to co-create with us, we shift that human-centered design power dynamics.
Designers are then not the only decision makers and problem solvers. They've moved from being the experts to being facilitators and maybe translators, as well. They support users to solve the problem themselves and for themselves, and the designer can then like, again, support a process and facilitate the process, or translate that to more of a digital solution. Inclusive Design, and equity design, also believe that people can solve their own problems and as designers, you empower them to do so. They should be invited to make decisions or solutions that impact their lives.
The third design principle is the idea of "designing for the margins." If we want to design for inclusivity, we need to design first for those who have the biggest barrier to access. If we design for them, we can then design for everyone else.
Jesse James
In the early 70s, in Berkeley, a group of residents who used wheelchairs decided to take action about a clearing urban design issue. At the time, there was no easy way for someone in a wheelchair to simply move from a sidewalk and into the street in a downtown environment. So the group took it upon itself to buy some cement, and physically create a ramp that would ease their transition from the sidewalk into the street. The experiment ended up becoming so popular that a couple of years later, in 1972, the city adopted this practice into law. And now we have these things called "curb cuts" within every major city in the US.
The resulting phenomenon became known as the "curb-cut effect." And this is when a feature that was originally designed for a community with a really specific disability eventually comes to serve a larger and larger group of people. And the original curb-cut effect, something that was designed to help wheelchair users can now be utilized by people such as parents with strollers, delivery drivers, cyclists, and people using skateboards.
This fast-forwards us into web accessibility. As product designers, our goal is to deliver consistent user experiences for everybody. What I want to spend some time talking about today is how we design products and services for people with disabilities. And like the original curb cut effect, how doing so, we end up creating benefits for everyone.
So what is accessibility? And who is it originally designed for? There are four categories of disability: visual, hearing, physical, and cognitive. Each of these disability types requires a different set of design principles in order to deliver improved experiences to meet the specific needs in each of those communities. What is the range of experiences that we are trying to serve? How large is the group affected by permanent disability? And what can we do as designers to meet the needs specifically of each of those groups?
In my experience, working with people with visual disabilities has shown me that having a visual disability doesn't mean that you're blind. This is a spectrum of experience, and a range of visual disabilities can range from mild to moderate, and eventually, only some instances to complete blindness. When you define visual disabilities that include all of these experiences from low vision to anything like colorblindness, the number of people affected in the world grows to 28% of the population. For people with visual impairments, designers can focus on things like content and structure. Contrast means maintaining a minimum text size, ensuring that there's sufficient color contrast. And then when it comes to structuring, it's important to create clean and consistent layouts that users can freely zoom in and out of, depending on their ability.
Like people with visual disabilities, people with hearing loss can have lived experiences along the spectrum from mild to profound. And when you include all of these auditory disabilities across the spectrum, the number of people affected is as high as 5% of the world's population. We need to focus on things that provide alternate feedback when there's audio present. A common example of this is the closed caption on the video.
Physical disabilities can include another wide range of limited mobility and dexterity experiences. And when you consider this full range of disabilities, the number of people affected in the US alone is 18%. The primary design principle that helps meet the needs of this community is operability. And this is something that can be addressed by designing for folks who don't necessarily use a mouse and keyboard like traditional means of operating computers, and any other form of assistive technology.
Finally, we have cognitive disorders. These are can be defined as anybody who might have a range of experiences that affect memory, learning, and concentration, and this community represents 8 million people in the US. And for these individuals, principles of organization and presenting things as simple tasks, step-by-step processes, all of those things are gonna allow people to focus on the task at hand, and actually have safer and more consistent experiences.
If we take a step back, and remember the curb-cut effect, we can start to see how accessible websites and the products that we develop can work better for everyone — not just for folks with permanent disabilities. Microsoft's own work in this area points out that at some point in our lives, everyone is going to benefit from the principles that we just outlined. That's because over time and in our daily lives, we each experience what is referred to as either temporary disabilities, or situational limitations.
Examples of temporary disabilities can include anyone who's sprained their wrist, broken their arm, anyone who's forgotten their glasses, or contact lenses; all of those constitute temporary disabilities. Situational limitations have grown over time, the more dependent we are on our phones, and we're moving in and out of environments. These experiences can range from just walking outside into bright sunlight, you're looking at your device, you walk outside, and all of a sudden having the experience of a drastic change in the light or by a loud car driving by or being in a place where you can't sort of access your full faculties. In each of these instances, the affordances that we put in place for people with permanent disabilities, and making for improved experiences for all. So the number of people that end up benefiting if we focus on the margin grows and grows over time.
A couple of examples of modern curb-cuts that I just wanted to point out are dark mode on your browser. It seems like every website and every app, and every operating system now has a dark mode. Originally, that was designed for people with visual impairments, who needed high contrast in order to read and digest content. And now it's something that we see is commonplace. Next, our phone alerts and the haptic and like the way that your phone vibrates or buzzes; vibrating was originally a part of the accessibility features on your phone. People use it now to know when their phone goes off in silent mode, and it was originally intended for deaf people to know that their phones had a new notification. Finally, you have voice assistants, such as Siri and Alexa. So these share their history with text-to-speech, which was an accessibility feature on many devices and programs that was simply put in place to get information without physically typing. Now, again, that's commonplace in these devices that many many people have in their homes.
3 Ways to Get Started with Inclusive Design
So I think I know what folks might be thinking at this point. That's just the like, a lot of stuff, right? Ana Bel started with this history of inclusive design best practices: ways in which during the discovery process, we can invite others to the table and reflect on our own biases. Then we took a look at accessibility, which again is a very technical process. Some of the things I outlined, may seem very complicated and in truth, they are complicated. And we also talked about these various spectrums and experiences that actually could eventually include everybody at some point in their life. So some of the things you might be feeling are apprehension.
First of all, this problem just seems way too big, right? Between equity and inclusiveness and meeting the needs of people with various forms of mobility and disability... That's a lot of stuff to take in. So where are you supposed to get started? Why would anyone listen to me? I'm not an expert. So why is a designer just anyone entering into this field or process? How do I know if I'm even doing this right? Who's checking me? And then finally, as complex as all this is, there's no way I can do all this myself, right? How am I going to be able to make sure that I can manage all these moving pieces, and make it all work?
The good news, hopefully, this makes you feel better, is we felt exactly the same way. Even with our history, with working in social impact, working across traditionally marginalized communities, and meeting the legal requirements for accessibility, we are at the same crossroads. If we wanted to grow and meet our aspirational needs, and we needed to get through some of these blockers. The good news is we came up with solutions for each of these sticking points. And as a team, we were able to get unblocked, and we'll sort of step through each one by one.
The first: starting small. So you can always take a pause, you can always step back, and define what it is that you're trying to accomplish, and reposition yourself to the problem in a new way.
As we approach it from an accessibility perspective, the first thing we want to do is start by creating a single source of truth for all of the information that's sort of coming into us. What that means is that we need a way of receiving the feedback that's coming in from various resources and made with various degrees of accuracy, and centralizing that into a place where it begins to prioritize what we're going to work on first. We started this process with a tool called Wave, which is a browser plugin. And this is something that anybody on the team can use at any level of maturity of the application. And with any level of technical ability, all you have to do is enter a web URL. And with one click, you get a summary report of all the accessibility issues that are present on the site. What's great about the tool is it does this in a way where it wants to educate you, right, it just doesn't give you a bunch of high-level information. There's information about each issue, where it comes from, and how it kind of trickles up to the original WCAG guidelines. And it also highlights what's really critical, versus things that are sort of like nice to have, and have lower importance.
The second piece is writing all of this stuff down in one place. An example of this that's in the screenshot is is the audit that we conducted for the City of Oakland. And what this does is to organize everything. It provides your team with transparency and coming up with a roadmap of how you might eventually prioritize these efforts in a way where you're meeting the most immediate needs first.
Ana Bel Campos
From a higher level of inclusive design practices, one of the things that we started to implement when thinking about starting small is this reflection period before projects. And more specifically, when research starts.
You have the audience that we're working with, and map out who's most on the margins in order to prioritize them. For example, one of the projects I'm working on right now is a nonprofit that has a program to help formerly incarcerated people reenter society. One part of the solution that we were designing is a portal where program participants will be able to track where they are in the program, what's happening next, see their progress and accomplishments, etc. So before we actually go into designing, we wanted to conduct research to understand the needs of this audience when it comes to a digital portal. But before even putting together a research plan, we started on reflecting on who small flat margins for that audience are formally in books.
So maybe people that have spent a long time in jail might face bigger barriers with technology, right? Or people that have just recently been released might also face some challenges, maybe some senior citizens, maybe folks that did not have a college education or simply have low technology knowledge and abilities. Once we map that out, we then ask the clients how to regroup people with characteristics to make sure that we are hearing from them who has bigger barriers to overcome. So it helped us prioritize who are we actually conducting research with.
Jesse James
Next up is addressing the idea that you may not be an expert. The truth is you probably are not and you don't have to be, right? So at this point, if you haven't already, you should probably be reaching out and establishing relationships with the communities that you're hoping to serve. And as Ana Bel said earlier, they don't just have to be observers of this process, you can invite them to the table and start establishing deep deeper working relationships.
On the accessibility side, the truth is assistive technology is complex regardless of your ability. So the people who do use this on a daily basis, people with permanent disabilities have to take classes on how to learn it. And sometimes that process can take a considerable amount of time. As designers and technologists, we ourselves can't just pick up these tools and expect that we're gonna be able to use them with the subtlety and skill of someone who has lived experience.
We maintain relationships with partners who, for them, this is their daily life. For the City of Oakland project as well as for Bloom affordable housing, we've worked with Lighthouse for the Blind and Visually Impaired in San Francisco. Lighthouse provides us with two primary services. One, they do accessibility reviews. We work with people on their team who have visual disabilities. They come in and move through our products and highlight what is happening for them and what types of issues we should be prioritizing. Often there's a big difference between what an automated tool is gonna tell you and what is true for someone with a lived experience. The second piece is usability testing. We do usability testing, it's part of our process, but what we're trying to get better at is opening up usability and testing to include folks with assistive technology.
So Lighthouse connects us with folks who are not experts. These are just people who have to use some form of assistive technology and then that with that represents a skill level from beginner to someone who has more moderate experience. And what this does is gives us more honest and accurate feedback, the same way we try to go out of our way when doing other forms of usability testing to make sure we include people who just have either limited access to the internet or limited digital literacy. Eventually it just gives us a full spectrum of feedback that makes for better products.
While designing a portal for formerly incarcerated reentry program participants, we didn't want to go to our corner and think about a solution for them. Again, our team doesn't have the lived experience, and they have the lived experience. So we wanted to invite them to be part of that creative process and design with us. So a couple of things that I wanted to share that were helpful in that process of co-creation with the community:
Bringing in a liaison between us and the community to help us design the co-creation workshop. They helped us design the workshop, but mostly we had a lot of like sessions with this person to help review the workshop agenda, reveal the plans that we had, materials we got a lot of like really good feedback on activities being accessible, and is the language respectful, are there any needs of the community that we might not be seeing, or that we might not be aware of? How can we communicate things in a really like clear, simple way? Which tools should we use for a co-design workshop? Know that a lot of times there's like tools out there like Miro that might still be a barrier for some communities. So understanding which, which two was like a better, a better tool, for your audience. That person can kind help and can also go back to the community and build a little bit of credibility for us as we are entering that community as well.
We also created a co-design session where everyone was invited not only to contribute with ideas or vote on ideas, but also choose ideas. To make sure that the session was as accessible as possible through this audience we first created, we first actually used Google slides because that was something that everyone was more familiar with than any other tool. We went with that tool and we also created this little toolkit that you can see here at the bottom with really simple shapes and visual elements that might, that may you might see on a digital product.
Participants had already diverged and converged, and they had one or two ideas they were really excited about. We wanted them to talk more about it and visualize it. So as they were discussing what that idea might look like, a designer was responsible for moving elements around a screen to create some sort of low-fidelity wireframe based on what they were discussing. So in that way participants were actually almost behind the solution and the designer was their tool. That really made it possible for participants to create and visualize a design. So their role was “solution creators,” and the designer was a tool that they used to create a design.
You can't do it yourself. This should be good news. So on the accessibility side of things, we thought we needed somebody who was gonna drive as much of this work themselves and they needed to have a complex skillset. But instead, we realized that in order to be successful we were going to need to make this a shared responsibility across the whole of the team. So this is how we are trying to do this on the Bloom affordable housing platform. We look at each of the stages of the process, there's actually something that everyone on the team can do to participate in the accessibility process.
So in the beginning, reach out to our partners and ask them how you might solve for the specific space like applying for affordable housing in the design process. Your visual designers can test for things like color contrast. Stories are being written by your product team. They can bake accessibility needs into the acceptance criteria, which is the rules with which the stores are being tested next. Then they move into development. Your engineers can use automated tools to check for any low-hanging fruit that is detectable by software. As you move into testing, you can engage with your accessibility partners to conduct those expert reviews. And finally, a partner should be able to connect. That partner should be able to connect you with users and help you conduct usability tests where you, you have folks who are using assistive technology, and taken together this should produce a more balanced design process which ultimately leads to more delightful user experiences for everyone.
Timelines, budgets, profitability — those are all structures that allow biases to hide. So being more intentional and allowing time for reflection and thinking. In what way might this design create bias, or leave someone out of this experience?
Jesse James
Inclusive design is something that should be a shared responsibility with everyone picking up some piece of this process. Just to re-reiterate, we're not the experts here. We're on this journey with you. We keep learning, we keep experimenting and for this reason, we're always keeping an eye out for resources to share with you.
Key Resources for Inclusive Design
Inclusive Design Orgs and Resources
Create Reaction Lab: Creative Reaction Lab is a youth-led, community-centered movement of a new type of Civic Leader: Redesigners for Justice.
EquityXDesign: A free, online introductory course by Equity Meets Design.
Equity Design Collaborative: The Equity Design Collaborative was formed in 2017 by organizations and individuals from across the U.S. practicing Equity Design.
WAVE Web Accessibility Evaluation Tool: WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.
Color Contrast Checker: Check the contrast between different color combinations against WCAG standards.
What’s a Rich Text element?
H1 example
H3 example
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Share
No items found.
Digital Craftsmanship for Healthy & Resilient Communities
.png)
