Listener
UX/ UI Design - Desktop - Design Challenge
Designing with accessibility and inclusivity in mind
Project Overview
To prototype an accessible login pattern of a website for the visually impaired/ blind using Adobe XD.
My Role
UX/ UI Designer —
Research, User Interviews, Wireframing, Interaction + Visual Design, User-Testing, Prototyping
Challenge
Adobe issued a challenge to showcase their voice prototyping feature to emphasis designing with accessibility in mind. First place receives a full year of creative cloud, second and third will receive 6 months of creative cloud.
Duration
September 2020 - 3 Weeks
Tools
Adobe XD
Research
Market Research
First I dove in to youtube, and watched as many videos as I could about blind accessibility. One that really gave a lot of insight was a Buzzfeed video that show cased how blind users use iPhones, as well as other accessible products. The entire video was blind accessible, and I used it as a blueprint to help me along the rest of my process.
User Research
For you user research I had to get a bit creative as I don’t know anyone to interview that is blind. However I did realize that I that didn’t have to limit my scope to individuals who are completely blind, so I used myself as a user since my vision is extremely poor without my glasses or contacts.
I tried using my phone and laptop without any visual assistance. I noted color contrast, and had to use auditory cues to know when actions leads to either successes or failures.
I used Apples Voiceover feature on my laptop and noted how it functioned.
User Persona
Taking the research I’ve collected I made to a simple user persona to help guide me during my ideations.
Design
Ideations
Mind Map
To start Ideating, I began to brainstorms was to use the voice feature and what manner to showcase it. I my concepts in to a mind map to get all the information in clear view.
MOSCOW Method
From the mind map I separated the ideas in to levels of priority by using the MOSCOW method. I wanted to keep the log in as simple as possible as to best show case the voice feature
Mid-Fi Wireframes
With my ideations in mind I jumped to Mid-Fi wireframes as I already knew that I need to make a simple login sequence, and need to as to in to account my research and ideas.
Testing
I wanted to make sure to test the prototype before the presentation so I conducted 4 test interviews.
Unfortunately, I was not able test on actual blind users, so I decided to modify the process. To test on non-blind users I had them cover their eyes or block their screens over a zoom call while I monitored.
I was able to gain a couple interview and grabbed some good insights.
Visual Design & Interface
UI Inspiration & Design System
Though it wasn’t detailed in the challenge I decided to go the extra mile and work my creative muscles on the UI.
I got the colors and inspiration from a gif I found; it was a man walking with a boombox that looked like a book. I decided to showcase the figure in my design and create illustrations based on the style for the different screens.
I created these retro-futuristic landscapes and buildings that played of the bright and contrasting colors. Keeping in mind that the greater the contrast the easier to read.
Presentation & Takeaways
And The Winner Is…
With all my tweaks and adjustments complete, I submitted my presentation and prototype and eagerly awaited the results. Cut to the day of the challenge meetup and I get an email notifying me that I am a finalist and need to hop on a zoom call two hours before the meet up!
During the finalist meet up they asked the three finalists to walk us through our prototypes and they would then let us know the winner during the actual meetup.
The winner was called and it unfortunately it wasn’t me, but I did come in second place and won 1 year of creative cloud!
What I learned
This project really gave me amazing insight on what accessibility really is, and how our own perspectives can be very short sighted.
Accessibility isn’t just making sure fonts are sized at a certain point, or that certain colors have contrast. You have to take all that in to consideration and put an emotion behind it. Things like sound clarity and tone, play a huge role in perception especially when you see with sound.
There are many more factors that go in to design that effect emotion, and accessibility is an amazing way in understanding those factors.
