A Powerful Design Tool
Problem:
Despite millions of people living with disabilities, 97.3% of the world's top websites aren't fully accessible. The inadequate design impacts those with disabilities but also translates to an inferior site design for everyone.
Solution:
Slack invites its designers to experience the frustrations users with disabilities face daily, so they put accessibility at the forefront of their designs.
Skills: Experiential Design, UX Research, UI Design, Prototyping, Accessibility
Programs: Figma, Photoshop
Client Bio
The Slack messaging app was created to connect employees and encourage them to express their ideas. Accessibility and usability is at the forefront of Slack’s design team. So when designer Hubert Florin asked, “If it’s okay for some people not to see a part of your site or your design, then why is that design element there in the first place?” the design team sprang into action.
First, the team refined Slack’s color palette from 130 colors to 18 to meet contrast standards. To improve usability, the team implemented accessible colors, tab-through options, keyboard shortcuts, and so much more. Slack is a leader in the industry in its commitment to accessibility in web design.
Project Objectives & Project Scope
At this year's AIGA conference, Slack put visual designers in the frustrating situations that individuals with disabilities face every day on the web. By gamifying the experience and taking the user through the problem and allowing them to create the solution, Slack aims to put accessibility in the forefront of every designer's mind.
Using large format touch-screen kiosks and vintage arcade games with poor contrast colors, we will ask designers to achieve a high score on the game. After experiencing frustration and defeat, we will teach the user about accessibility and ask them to make the design more usable.
Then, we will test the new design for accessibility and share the accessible designs on a larger screen. We expect to display many design solutions with accessible design.
Creative Direction
OS: 49” K-Table Kiosk
UI Trend: Claymorphism
Approach: Have users experience a less-accessible interface to empathize with those with disabilities. Use gamification to make the experience approachable and memorable.
Target Audience
For the project, we will focus on new and established designers in the industry aware of accessibility but who often ignore it in favor of their design objectives. The target audience will range in age between 25 to 65 years old. They enjoy learning about design trends and innovations but sometimes need a push to use them in their designs.
Personas and User Stories
To help our fellow designers understand the needs of users with disabilities, we took into consideration their different motivations for attending the conference as well as varying levels of design and accessibility experience. We used the personas to help make the interaction more memorable and worthy of sharing after the conference ended.
User Flows
Because the program sought to lead users through a story-like scenario, the user flows for the interaction were more straightforward than in typical design instances, which require lots of options and interactions. The user flow follows one of two paths: starting the gameplay with an ideal contrast scenario or a bad contrast scenario.
The user flows helped ensure every page had a way for the user to exit or step back and that the interaction would follow an engaging story path the user could complete in a few minutes.
Wireframes
The low-fidelity wireframes defined the layout system and accounted for negative space. They helped define the design spaces that were heavy with illustrations and the pill space structure of elements. We also designed extra large headers to capture the attention of potential users navigating the convention space.
Style Guide
The visual direction for this project was based on Slack's design system and leveraged the design trend of claymorphism; we hoped this was a fun way to entice designers at the convention into our kiosk and that the game would make the serious subject more digestible.
UI Screens
We created a fun and exaggerated UI, so designers would understand the absurdity of leaving accessible decisions to the end of a project. With a nod to the game Space Invaders, the design incorporates space elements, 3D characters, and stickers you might find in an arcade. Interaction was key to the success of this project, so the design includes lots of "touchable" elements like card flips and color pickers.
Accessibility Audit
Conducting an accessibility audit for a project focused on accessibility was critical. My accessibility audit used two Figma plug-ins that focus on accessibility:
The Color Blind widget to run all my screens through a color-blind test.
The Able widget to check my contrast levels.
Based on the test results, the image below shows the slight variations I made to the background to improve accessibility. In future interactions, I will tweak some of the color combinations to accommodate smaller screens including tablets.
Try it Yourself
Although designed for a kiosk feel free to experiment with the prototype from your home computer.