A universal movie experience
UX Designer, UX Researcher
Class project (team of four), 4 months
Sketch, Balsamiq Mockups, JustInMind, Principle, Illustrator
Visually impaired theater guests who use Video Description devices
- Overview -
Imagine listening to the iconic Rocky theme song but not associating it with Sylvester Stallone’s training montage. Audio and video work together to create an immersive cinematic experience. When one piece is missing, you risk degrading the integrity of the whole movie. Unfortunately, this is the reality for people with moderate to severe visual impairments. These guests use Video Description assistive devices in movie theaters and the entire process of acquiring, using, getting help and returning these devices is rigged with problems.
CinemAll is a mobile application that aims to address these problems and instead of having to rent used theater equipment, users can now leverage their own devices and headsets to more closely replicate the standard movie-watching experience.
Select your movie
Users will be select the movie theater either by entering details or scanning the ticket.
Test the audio before movie starts
Users will be able to play some audio to test the quality and importantly to get used to the interface.
Tap to synchronize audio with video
Users will be able to synchronize the video descrition audio with the in-theater audio with simple tap.
Easy to get help
Users can request assistance from theater staff using the app.
- RESEARCH -
Understanding the problem space
We conducted observations, semi-structured interviews, field visits and also conducted walkthroughs
the movie watching process to understand the problem space. All four of the team members visited
different movie theaters,
two of us watched a movie using a Descriptive Video (DV) device and the other two talked to the
manager and theater
associates to gain insights from them on the process.
We also dived into the online blind community by visiting government websites, existing solutions and user reviews of them, and online message boards
Following themes emerged
What's the process really like ?
We wanted to understand how users go about using the descriptive video devices and the different decisions they had to make along the way. We conducted a task analysis and then created a journey map
- Insights -
Finding the key user needs
In a group session, we analyzed our notes from all the previous formative research on an affinity diagram. This helped us categorize our notes to identify key user needs.
I want to be better prepared before I go to the movie theater
I wish it was easier to acquire the appropriate DV devices in theater
I wish there is better way to manage when device malfunctions
- Ideation -
Once we identified the key user needs, our next goal was try to come up with design ideas that
these needs. We came up with 60+ concepts and refined them into 18 ideas.
We were struggling with how to narrow down to around 2-3 ideas to focus on. That's when I found out about the feasibility vs user-imapct chart which helped us make the decision. We wanted a way where we could maximize the benefits for the user but also keep costs relatively low for the providers to encourage them to adopt the solution
We narrowed down our ideas to 3 design alternatives
This solution aimed to cut out interaction with theater associates, who are often times under-trained and cause unnecessary frustrations for visually impaired moviegoers. Additionally, we envisioned the kiosks to be a universal solution and a one-stop shop for all moviegoers to purchase or pickup tickets and retrieve assistive devices. While we are focused on the visually impaired, this solution could also have a broader adaptation for those who need different types of assistance, such as hearing devices.
In-theater Service App
This solution aimed to be low cost, as theaters won’t have to replace their devices. Here, instead we will pair users with devices before they arrive at the theater, therefore alleviating frustrations of interacting with under-trained staff.
Audio Streaming App
This solution aimed to cut down on the learning curve by using the device users already have with them, their smartphone. Users won’t need to lug around additional clunky devices. This solution will also cut out the need to interact with theater associates who often provide incorrectly configured devices for the users.
- Design -
We demoed these 3 ideas to the class and also got feedback from GT AMAC-Accessibility Solutions and
Research Center, Center for the Visually Impaired (CVI)-Atlanta. Based on the feedback,
we decided on we decided to move ahead with Idea #3: Audio Streaming App and also include
some features of the Service App.
We were reassured from experts and target users that smartphones with screen-reader functionality are used by visually impaired users and hence decided to go ahead with the mobile app idea.
User flow diagram
We created a user flow diagram to layout how we invisioned users would navigate our application.
First we had to choose the fidelity of the prototype. We needed the fidelity to be high enough, that users could get feedback from the interactive elements. We also had to constantly keep in mind that we were designing for a special population. This would come to affect eveything from the colors we used, to the font size, and everyting in between.
Choosing colors and contrast
Because our users are visually impaired, we did some preliminary testing to confirm that our colors and contrasts meet widely-accepted guidelines. We used the WebAIM web app to check our contrast ratios. We considered a 4.5:1 contrast ratio as passing based off of the w3 recommendations for accessibility. Red was used because it has the longest wavelength, and provides the least stress on the eye when switching between it and dark contexts. Additionally, we made sure to add patterned backgrounds to all clickable elements to double-encode the information so that users with poor color perception can easily distinguish different elements on the screens. Lastly, we made the text and buttons large to allow for user error when aiming, which might be more common among our users.
Looking closely at screens
These are some of the key design decisions I took based mostly on the data we gathered and my intuition as a problem solver.
We needed to have the screen-reader functionality in the prototype for the user testing session. But
because there was no prototyping tool
that we found that could do that. I came up with the idea of using JustInMind's audio playback
functionality to mimic the
screen-reader functionality with varying interactions for triggering audio and selection.
Unfortunately my JustInMind free version expired hence I recreated the prototype in Invision (without the audio).
What difference did we make ?
Classic before-after storyboard to highligh how we changed the overall experience.
- Evaluation -
Putting our design through the ultimate test
We used a combination of expert and user testing in order to test the performance of our application design. Within these categories we used techniques including cognitive walkthroughs, unstructured interviews, benchmark tasks, the SUS Scale, and a post-task questionnaire in order to get different types of feedback by means of both quantitative and qualitative measures.
Please find the detailed user feedback per screen here
- Reflection -
This project took us through the entire design process -- from the finding an interesting problem space and identifying user needs to validating our solution with user testing. Here are some of my thoughts on the journey.