D E S I G N I N G T O W A R D S A C C E S S I B I L I T Y
I N R E A L - T I M E C O N V E R S A T I O N S
UI Design Audit
— Onboarding, User Flow, User Testing, Sketches, Mockups, Interaction Design
〰️ C o n t e x t 〰️
About
Ava is a speech-to-text iOS app (voice recognition), enabling deaf and hard of hearing people access and be included in real-time oral conversations.
Use scenarios
This app could be used during a meeting with colleagues, a drink with friends, a family dinner at home.
〰️ C h a l l e n g e 〰️
Revamp the overall experience of the app, and especially when 1. Interacting with the speech-to-text feature for the first time and when 2. Inviting guests to join a conversation
〰️ P r o c e s s 〰️
Putting myself in the shoes of the user
— What's the experience of not having full (to none) hearing capacities, in my everyday life and when interacting with others?
From my own experience, as I have 100% hearing loss myself on one side, I know there is a variety of hearing loss profiles. The spectrum could range from having one fully capable ear out of two, 30% on both side, or 0%.
— What’s and when it’s particularly challenging?
Particularly challenging when singing under the shower in the morning? No. When attending a fast-paced and stressful professional meeting? Yes. The stress and stakes involved would turn the experience into an urgent need.
— What are the possible stigma and frustration about it?
Hearing loss is an invisible disability.
Real-time information are commonly provided orally. E.g. Airport flight announcements.
People aren’t often likely to repeat, slow down or articulate their wording better. Organizations aren’t often inclined to change the acoustic of a conference room, the ambient noise of a bar, or the rules of taking in real time notes during a meeting.
Overall the environment and behavior towards hearing accessibility are at stake.
User flow
— Existing state
Detailed the journey of a new user downloading the iOS mobile app for the first time
1. Onboarding process
2. Solo use
3. Multiple users
—Analysis
Below, I identified in RED What are the possible roadblocks/ frustrations, in ORANGE What needs to be improved soon, in GREEN What’s particularly well executed.
1. Get the app - invite-only beta access
2. Open app, create account
[3. Test the app with myself - solo use] missing - lack of clear visual feedbacks: call to actions, microphone activation, and empty states 😫
[3bis. Test the app with a friend - solo device] nothing encourage that 😫
4. Invite a friend the guest invitation process requires a lot of determination 😫
5. Friend circle back to 1.
6. Friend does 2.
[7. Test the app with a friend - multiple devices and users] works great! 👏
Onboarding for both users and guests: long, complex, not data-friendly 😫
As a person with a hearing disability you want to be sure an app like Ava is working accurately before advocating about it to your coworker.
User scenarios
Engagement on the website: new visitor, recurring user, invited user
Hearing loss: can handle an oral conversation with few weaknesses (comfort), can barely handle an oral conversation (must-have), can’t handle an oral conversation at all (basic need)
Job to be done
🗣 👤👥
As a person who can handle an oral conversation with few weaknesses, I want to be more comfortable during meetings with my teammates, so that I won’t miss any important information.
As a person who can barely handle an oral conversation, I want to be able to catch up what is said during a meeting and understand who’s talking about what.
As a person who can’t handle an oral conversation at all, I would like to interact with my teammates.
Analogies, Patterns, Mental Models
How other apps, dealing with voice recognition, represent their main call-to-action?
Short answer: rounded, centered, obvious
What're their visual feedbacks to express that the microphone is active?
Short answer: interactive animation!
Interactive animation:
〰️ D e l i v e r a b l e s 〰️
Homepage + Solo use
✔︎ Clear call-to-actions,
✔︎ Visual feedbacks
✔︎ Empty states
✔︎ Activity indicator: microphone activated
Sketches
Wireframes
Prototype in action
Usability testing
Feedbacks and observations emphasized additional use cases:
- pause, resume and stop a conversation
- ease the understanding of write-to-text vs. voice-to-text only
Sketches for new iteration
Note: This was beyond the scope of my analysis
New UI element: the floating button to wrap core actions into one call-to-action
#materaldesign
〰️ T a k e a w a y s 〰️
This app definitely implies a minimalist, yet interactive, user interface. It was a lot of fun to look at the design patterns that could apply for the basic and more advanced use cases.
〰️ B e h i n d t h e s c e n e 〰️
This analysis was part of a short-term collaboration with the Ava team, including Pieter Doevendans, Co-founder & COO.
Trello, Sketch, Photoshop
📌 Remote + San Francisco Bay Area
