Accessible Figma Redesign
Re-designing Figma to better fit the needs of blind and low vision designers based on Co-Design
My Role
UI Designer, UXR assistant, co-design facilitator
Timeline
12 Months
Tools & Methods
Figma, Figjam, Premier Pro. Co-design, Usability Tests, Lit Review, Storyboarding, Digital ethnography, among others.
Introduction
We all hope to live in a more inclusive world. There are hundreds of resources for designers to create for disabled individuals, but there are few resources assuming disabled individuals are designers themselves. Why is that? Well, in part, many of the tools designers use are inaccessible to begin with. This project looks specifically at Figma, and re-designs it to fit the needs of Blind and low-vision designers.
Problem
One of the largest problems within Figma is understanding spacial relations between elements in the design. Where things are, how big/small they are, where things are in relation to one another, etc.
Imagine trying to make a UI, but even for something as simple as a text box, when you put it down, it does not tell you where it is, how big it is, or how to fill it in! This is what Figma is like for Blind and Low Vision designers.
What can be done?
Through this project, we introduce features into Figma in order to communicate spacial relationships to screenreader users.
This can be done by translating visual feedback into other senses. For example, linguistic descriptions, audio representations or haptic representations can be used.
State of Accessibility
The cycle for BLV UX designers with regards to inaccessible tools and their position in the industry.
Study
Co-design
- 6 research sessions
- 15+ participants
Usability Testing
- 1 usability test for digital authoring tools
- 3 participants
Digital Ethnography
- 16 online, publicly available interactions were analyzed
- 33 responses
Solutions
Emerging Solutions - Haptics
In an early session, we had participants plan out a grocery store layout and explore ways of navigating it and representing it. This was a group co-design session with both blind and low vision participants who came up with the idea of breaking down the grocery store into a grid so it could be navigable cell by cell.
Participants stated:
“Was the entrance or exit either this way or that way? So, work out how many squares are long and how many squares down? So that can be like our start and finish point. Okay. And that will be on our legend as a C six”.
Final Solutions
To solve the issue of understanding spacial relations in Figma, we added 4 features:
From Grids to Spreadsheets
In the same way sighted designers use grids for layouts, screenreader users can navigate and fill in their design using spreadsheets! This provides spacial awareness.
Shortcuts and Controllers
Blind users often utilize shortcuts, however these are difficult to remember. We came up with a controller that has buttons representing the shortcuts.
A Tactile Representation
We made it so that when you create a design, and you want to check how the layout is looking, you can print out a tactile representation using a Cricut!
A personal or AI helper
This is a proposed partnership with an existing service called Be My Eyes. It's a free service with two functions. One is a personal volunteer, and the other is an AI assistant that can decribe things back to you.
Diagram on Figma issues for screen-reader users, supporting evidence and specific implementation in Figma re-design.
Prototype Walkthrough
Branding
For the logo, we re-designed the existing Figma logo. We decided to mainly reflect the grid prototype, so the logo itself is made using a grid.
The colour scheme is made of colours that are more accessible for colourblind individuals. Namely, it is meant to be accessible for red-green colorblindness which is the most common type of colourblindness.
Digital Ethnography
Co-Design Sessions
Affinity Mapping- Data Analysis
Empathy/Persona mapping
User Journey mapping
Ideation
Task Flow Analysis
High Fidelity Prototyping
For more information /documentation feel free to contact me.
This project includes work with Karoline Bordeau, Lindsay Walkingshaw, Sylvia Jones, Peter Coppin, Alvaro Quevedo, Tamara Crasto, David Barter, Stephen Murgaski, Robert Ingino, and Zainab Husain.