How might we help people with disability to be involved in the theatrical production process?
Realwheels Production Website is a remote collaboration and centralizing website based on the theatre production process that is made with accessibility in mind.
Successful run, it began with one remote participant, now up to and over 16 remote participants at a time.
Our client's organization made the transition into remote rehearsal under coronavirus pandemic, while the other organizations have postponed it.
3 months
Valentina Forte-Hernandez, Rosa Cebolla Perpiña, Luisa Martinez Riaño, Lucas Romanini, Cara Meyers
Research, Wire-framing, Mock-ups, Usability Test, Video Editing
User Interview, Survey, Contextual Inquiry, Secondary Research, Affinity Diagram, Remote unmoderated usability testing, Sketch, Principle, Adobe Effect
We followed User Centered Design process by gaining insights from interviews, surveys, contextual inquiry and secondary research. Then we synthesized the research results as a direction to brainstorm ideas and design solutions by sketching fidelity prototypes. As the global pandemic situation happened, we conducted remote unmoderated usability testing and iterated the feedback we received.
Realwheels Theatre is a Vancouver-based theatre production organization that produces performances that deepen the understanding of the disability experience. They have created a unique production process that prioritizes inclusivity, but there are still potential participants who have not been able to find a way to be involved.
This spring, they are planning to create a new large-scale community show integrating music. So, Realwheels tasked us to search for incorporating more participants into their performances.
Thus, our design objective was : How might we help people with disability to be involved in the theatrical production process?
We started the research by interviewing two participants, one eager to join it a long time ago but first time to try it, we wanted to know what prevented her from joining. Then we wanted to know the experience of previous participants, thus we interviewed one participant who already has two years of experience, and sent out a survey to 8 participants to discover what makes them feel not included during the rehearsals. We also attended rehearsals to observe participants in the dynamic workflow of the theater process.
Have trouble getting to the venues
We identified 6 different types of disabilities including blindness, low-vision, muscular dystrophy, locomotor disability, hearing impairment and speech and language disability. People with mobility impairment have to rely on a power chair or cane, while the people with visual impairment have to use a cane, and sometimes the handydart is not always on time. Long periods of commuting time significantly toned down their engagement to join, while normally rehearsals are held twice a week.
Practice what they learned is difficult
After learning from the rehearsals, participants will spend a lot of time on practicing what they have learned at home, but sometimes they can’t remember the teaching content, the scripts or the feedback they received. Though they want to take notes or record, due to the limitation of disability, it’s very inconvenient for them.
Need to previously informed by the rehearsal agenda
Schedule’s agenda is various with the process of rehearsals, not all the participants have to attend every rehearsal, sometimes participants spend 2 hours on transportation cutting from the three hours rehearsal time with only 20 minutes of their own part to practice. Knowing previously the details of each rehearsal agendas can let them allocate their time with artistic leaders.
The habit of using a digital product is different
As the people with disabilities use digital devices in a different way, we did secondary research about accessible design and technology to learn their habits. We found that Web Content Accessibility Guideline 2.0 set a milestone for design principles. We also conducted contextual inquiry with one of our users to see how people with visual impairment navigate a website and app by Screen Reader. Here are some general accessibility design principles that we concluded:
Based on the research, we think that to attract more new potential participants and to remove the barriers that tone down users’ enthusiasm on theater production we should provide an inclusive platform that users can access and practice remotely, and get notifications for their scheduled rehearsals.
We listed all the potential solutions and sketched some ideas based on Users’ pain points, and discussed the ideas and then used affinity diagrams to select the four feasible solutions.
Based on the features, we started to develop prototypes to present our functionalities.
Design Challenge #1
How can we let people with different types of disability communicate online comfortably?
We drew a flow to analyze how the people with different types of disability can receive information from one another, we figured out that if we provide text input and output we can ensure people with different types of disability can communicate together. So we identified that we should provide chat logs and transcripts to ensure accessibility for hearing difficulties.
Also, to provide better user experience on inputting information for the people with visual and mobility impairment, we provided voice input on commenting files and search bars.
Design Challenge #2
How to create an accessible "table"?
As for listing the upcoming dates, locations, and agendas for the upcoming rehearsals, we were thinking of designing a table to list these information. But based on our research, we learned that there are differences between the visual order and the screen reader order. The left one is what visual readers read a table, the right one is what screen readers read. More specifically, if screen reader users want to know the specific agenda in a table, they have to hear the screen readers to read from the beginning of a table again.
Thus, as for making the table more accessible, we designed the calendar by using Card design, thus screen reader users can use Tab key to jump from one HTML element like heading to the other HTML element, the other heading.
Other than that, the production dates, which are the rehearsal dates that participants need to go to the theater physically, should be easily recognized by users. Thus we have to think about how to let both visual readers and screen readers easily read that.
When designing this feature, I had a small difference of opinion with the other two designers in the team. While they thought we should use different colors to highlight the production dates by presenting two rows of cards on the page(left one), I thought it is better to use a checkbox to view production weeks only when users think it’s necessary(right one). Eventually we had a small user testing and learned from users the checkbox will make it more clear for them and it's user-friendly for screen readers to navigate.
Remote Participants are able to have live video calls for rehearsal, a theatrical liaison will be responsible for facilitating the call. Participants can share screens when they want to show their performances.For the people with hearing difficulties, we provided chat logs and subtitles to make them feel included.
This is where participants can review the recordings and notes of the rehearsals, thus they don't risk forgetting about the teaching content on rehearsals and can practice it wherever and whenever they want.At the same time, they can upload their individual performances and receive feedback from the artistic leaders and their peers.
Participants can keep track with the upcoming dates and agendas of the rehearsals and direct the location to Google Map.They can view directly the production dates, which are the rehearsals they have to attend physically by clicking the checkbox. This can minimize the scrolling required.
All the users can put their contact information and bio to let their peers know more about them.Participants can keep in touch with the community members.Artistic leaders can know more about the participants when they join the show.Realwheels staff don't need to collect the contact information one by one by receiving emails.
I was responsible for designing the style guide for the site. When I created the style guide, the priority for me was to ensure the accessibility of all the information. Here are several important points.
All color choices follow the W3Cs guidelines. Ensuring all foreground and background colors have at least a 4.5:1contrast ratio.
All typography on the site must have a minimum font size of 18pt. It is recommended that font weights are semibold and bold when possible to maximize readability.
All the buttons' clickable areas should be over 44px, and the gap between buttons over 12px.
It is not advisable to solely rely on colors to convey meaning. For different status of buttons, use other design elements to represent.
Also, two visually challenged users mentioned that they prefer to use dark mode because of the high contrast, so we decided to have a dark mode version.
In order to test the accessibility of the site, we also used some disability simulators such as Funkify and Nocoffee to test the site.
We conducted remote unmoderated tests due to the global special pandemic period. The team created different tasks and scenarios which were related to a different page of the website, and we also created a survey to get follow-up feedback, the goal of the test is to see if the website was accessible for the participants with different types of disability and if the navigation was clear for all the users.
"Instructions were very well outlined and everything on the web was easily identifiable."
"It was self-explanatory and easy to use."
Overall, we got positive feedback, there are two issues to fix:
1. Incorporate a " Search" bar for the files page so users can search efficiently.
2. Provide notification sound for the chat log, so people can be informed on time when having rehearsals.
It was the first time to design a product with accessibility in mind, I learned a lot and realized that designing for accessibility is not that hard. There’s a misconception that making a website accessible requires a team to take heavy amounts of design and engineering work, but the truth is that fixing features takes extra effort when people tend to put accessible design last on their list. As a designer, I learned that if we can always take people with disability into consideration of creating personas at the earliest stages of the design process, then it will not result in the overwhelming stress for the team to comply with the accessibility requirements at the very end.
