SERIESSoDA Series Perspectives on leadership, design, culture and emerging trends from the Society of Digital Agencies; a global community of pioneering and renowned agency founders, creative visionaries and technology disruptors. Learn more.→ XD Ideas / Perspectives / SoDA Series / More Inclusive Design Systems Lead to Better ExperiencesMore Inclusive Design Systems Lead to Better Experiences Mason Magyar Dec 6, 2019We work diligently to ensure good experiences. As consumers of technology, we know all too well how it feels when devices and technology frustrate us. Apps don’t behave as expected, or it’s hard to complete a simple form fill because the interface elements are crowded together. That frustration compounds when you face challenges due to a disability. Whether it’s from getting older or living with a neurological condition such as Parkinson’s disease, our everyday user challenges become exponentially worse when we battle two fronts: interface and disability.Disabilities affect a staggering number of people. According to the U.S. Census Bureau, 27.2 percent of people living in the United States had a disability in 2014. These are our friends, neighbors, coworkers, family members, customers—and eventually all of us in some way, because no one gets younger and more agile as time passes. Our role as designers is to build better and more human-centered experiences that are inclusive of all people.When we design for disability first, you often stumble upon solutions that are better than those when we design for the norm.Elise Roy — TED talk, When We Design for Disability, We All BenefitAccessibility and Design SystemsDesigning for accessibility can and should be so much more than color contrast ratios and type sizes. At our best, we’re creating and solving problems. When we treat accessibility as a requirement box to check, we can miss opportunities to design better products and services, period.If the role of a design system is to provide a company with the tools to build consistent digital experiences, what would it mean if a design system were built to be inherently inclusive? That’s a win-win. Design systems that establish an inclusive experience and contain patterns that are accessible keep bad practices from propagating across the organization’s digital experiences.Here are some examples and trends of inclusive approaches that could be integrated into the design systems we create.Establishing a Culture of InclusivityAccessibility should be ingrained within the organization at its core. Many companies are putting more emphasis on diversity and inclusion in their hiring practices. This shift creates a better environment and elevates the work within our design systems and the teams that use them. If your team has someone who has a disability, the designs produced will almost certainly be better because that person is helping solve a problem from a different perspective.Another way companies build accessibility into their culture is by creating visual reminders and communication tools within their design systems. Sainsbury’s Luna Design System includes posters for teams to print and hang around their workstations and collaboration spaces that communicate various accessibility themes. By including the posters within the design system, the organization’s commitment to inclusivity is reinforced.Sainsbury’s Luna Design System uses accessibility posters to reinforce inclusive design.Component-Specific GuidanceMore design systems are striving to include component-specific documentation that outlines any accessibility implementation considerations within the component library. Previously, design systems only signaled that the design system components were WCAG 2.0 AA compliant by including a note or section with a general statement about the accessibility of the design system. Including component-specific guidance will help ensure that accessibility is top of mind when implementing the experience and its components of every project.An example from the U.S. Web Design System showing accessibility implementation guidelines for components.U.S. Web Design System’s guidelines show various button components that include appropriate states for accessibility.Designed and Coded for AccessibilityBy providing color contrast and typography accessibility guidance, you’ll meet core accessibility requirements; however, this doesn’t ensure consistency. If design system components are coded with baked-in accessibility considerations, those components are more likely to be properly implemented. Aria tags and customizable states are included in code snippets to enable users to customize the components without compromising accessibility. This approach can also create linkages between design and development for an easier handoff.Shopify’s Polaris Design System includes accessible and customizable coded components.New Shoes for the Cobbler’s ChildrenHave you ever heard the saying, “The cobbler’s children have no shoes”? We can get so busy making things for others that we lose sight of our own team’s needs. But could the tools we use to create accessible systems be more accessible themselves?A team at IBM built a tactile component library of real-world objects — felt, paper and glue, toothpicks, and other textures — to enable a development partner who has low vision to experience and feel the arrangement of the components and give the design team specific feedback on interfaces being built with design system components. Creators of design systems should not only consider the accessibility of the components being built for the user’s experience but also treat users of the design system tools with the same consideration. This will ensure that all types of design system users can easily create with the design system components regardless of physical or cognitive impairments.IBM’s tactile component library.Taking Keyboard Navigation a Step FurtherFor users with a sight or motor function impairment, navigation with a mouse can be difficult or impossible. Giving users the ability to navigate with their keyboards is a core accessibility consideration. Standard keyboard navigation is achieved with a combination of standard keys such as the tab key, arrow keys, the space bar, enter or return, and escape. This allows most users to navigate through the page in a relevant hierarchy and flow — if the page is designed correctly.Some companies take it a step further with keyboard commands for certain features within the experience. Looking at an application like Slack reveals that key commands can be built into design system components within the interface to call up specific functionality. This enables users to shortcut directly to a feature without needing to tab through the parts of the experience that are not relevant to their current task.Using Voice and SoundVoice user interfaces (VUIs) can help those with disabilities navigate user interfaces more efficiently. VUI guidelines and patterns can be defined within an existing design system to supplement more traditional design patterns and components, or they could be established as a set of patterns created for a specific usage or tool. VUI components can include triggers, leading cues, feedback, error states, and ending cues. Voice interfaces can also have supplemental visual UI components that need to be defined and made accessible for other types of users, not just the sight-impaired.Sound is becoming increasingly more prevalent as a tool to build experiences. Our design systems should include sound-based attributes to enable those without sight to gain the same utility as sighted users, including the ability to respond. For sighted users, the sound provides an additional layer of sensory interaction and feedback that reinforces specific patterns or actions within a brand’s experience.Apple’s Voice Control Interface assigns each UI component a number to increase speed and accuracy when using speaking commands.Experiences That Mutate Promising explorations in experience design could potentially change the paradigm for design systems and the experience for all users. An example: mutative design. Though a few years old now, Project Phoebe shows the potential that technology has to respond to users’ physical needs. Mutative design could enable systems to adapt to individual users. Their demographics, interests, learning style, and abilities or capabilities could all factor into the best possible permutation of the experience.As the system learns about the user, the core experience and UI adjust based on attributes or considerations. For example, the interface for a user with low vision might adjust the color palette and type size to create a more pleasant high-contrast instance of the experience. In the near future, this approach shows great promise for creating design systems that enable a more fluid but consistent experience for all users.It is clear that there is a concerted effort in our profession toward becoming more inclusive. Designers play a large role in this, and we should seize any opportunity to innovate and build better products, including opportunities created by accessibility requirements. Companies need to ingrain it into their culture. We must create better components and documentation, and use new methods of interaction such as conversational interfaces to ensure that our design systems start with inclusivity at their core. Inclusive design thinking can lead to a much more positive and seamless experience for all users.This article was produced in partnership with Ogilvy as part of their design system series. SoDA Series Design Systems Words by Mason Magyar Mason is currently a Principal Experience Designer at Ogilvy in Denver and has devoted 18 years to creating meaningful interactions and leading design teams to help make digital tools and services for human beings. His focus has been working within the financial services, energy, and aerospace fields for both B2B and B2C clients like Willis Towers Watson, PWC, Mikimoto, Yingli Solar, and Cessna Aircraft. →Get XD Ideas delivered weekly to your inbox. Free. Sign UpRelated Content → SoDA SeriesIn Conversation with Wesley ter Haar By Tom BeckWesley reflects on 20 years of MediaMonks and what it takes to build a creative, data-driven culture. SoDA SeriesThree Key Learnings from 2020 that Have Set Up Digital Agencies for a Better 2021 By Tom BeckSeven design leaders from the Society of Digital Agencies (SoDA) discuss their key learnings from last year. User TestingUsability Metrics: Measuring UX Design Success By Muditha BatagodaMeasuring usability will help designers understand the numerous improvements that need to be pursued. Social ImpactDesign for Social Transformation Requires More Than Good Intentions By Design Justice NetworkDesign practices too often support systems of oppression—the Design Justice Network works to address this challenge.