INTEGRATING A NEW ACCESSIBILITY FEATURE
🙋♀️ My Role:
end-to-end product designer
🧰 Tools:
AdobeXD, Figma, Maze
⏳ Project Duration:
5 weeks
BACKGROUND
WeChat is one of few social apps that connect people overseas with people in China.
While the primary features are forms of communication, such as text messaging, video chatting, and voice messaging, there is more to WeChat. It also consists of other features such as feeds, public channels/accounts, and mobile payment.
CHALLENGE
my grandma can’t hear clearly when I video-call her
Even when I speak loudly and close to my phone, it is hard for us to communicate without anyone sitting next to her to repeat what I say into her ear.
From these experiences, I thought: how might we make the video call experience easier and more accessible to hearing impaired users?
OBJECTIVE
incorporate closed captions feature following accessibility guidelines
RESEARCH & STRATEGY
understand and resolve the disconnect involving users with hearing disability during video chats
The World Health Organization estimates there are 360 million people worldwide who suffer from disabling hearing loss. That’s more than five percent of the world population, and about 42 million more people than the entire U.S. population as estimated by the census bureau in 2014.
With 1 in 3 people video chatting at least once a week, video calls are quickly becoming an equal channel to voice calls.
It was essential to conduct competitive analysis and get insight on what makes other platforms on the market successful.
Although popular platforms perform closed captions, few have more in-depth features such as customization and multiple language options.
Competitive analysis as of April 2021
what do others say when facing the same problem?
I conducted an online survey with 9 participants to understand their experiences with video calling and closed captions.
“When it’s hard to communicate, sometimes I use hand signals and other times just move on to the next subject...or spend many times repeating hoping the other side understands”
— James, Survey Participant
frustrations typically occur during the engagement stage
Based on the survey results, I created a Customer Journey Map to visualize where pain points occur.
Frustrations occur when user interactions begin and communication becomes more difficult. The solution to this is to enable the app’s closed caption feature.
Once closed captions are implemented, the video chat experience improves. Further recommendations in this stage include customizing font size and closed caption position to read/see better.
FEATURE GOAL
improve chat experience for a super app that lacks accessibility features
Based on research, I determined that users need the option for a closed captions feature on the WeChat app.
This feature integration would result in an increase in number of uses of hearing impaired users and improve overall user engagement.
WIREFRAMES & SOLUTION #1
To add the new closed captions feature, I worked with the existing patterns of popular video chat platforms, which was to place the closed captions settings and related features nested in the menu button on the home screen. However, after bringing this design into usability testing, I learned that it caused confusion for the users due to the hidden placement and requirement of too many clicks.
USABILITY TESTING & SOLUTION #2
adding a new feature in the existing patterns did not work well
task
Find, enable and adjust closed captions feature
success metrics
100% Test Completion Rate
85.7% Net Promoter Score
# of users
7 WeChat users (13-65 yrs old)
The designs required revisions from V1 to V2. In the first version, similar to other services (e.g., Zoom, Microsoft Teams, etc.), I placed the closed captions feature behind a menu. However, user testing proved that this did not work well and resulted in confusion due to the feature being hard to find and requiring too many clicks.
On the second version, the user flow was improved, priorities were re-evaluated, and the home screen was redesigned. The home screen now displays an independent closed captions button, providing a more convenient way for the user to access.
The updated designs also include minor changes with refined design, including:
INSIGHT 1
clearer indication & simpler navigation of closed captions feature
INSIGHT 2
increasing font size customization for better accessibility
INSIGHT 3
better differentiation between “font” and “font size”
REFLECTION
key takeaways & next steps
For this project, I made sure to understand accessibility guidelines to back up my design choices. Although adding a closed caption feature seemed very straightforward, I learned through usability testing that, instead of trying to fit new features into existing design patterns, sometimes more changes need to be made to showcase the features and create a more direct navigation.
The next phase of this app would dig deeper into accessibility. This will include the feature where one user can request to take control and enable features for the other user. This would be helpful for older users who cannot navigate the app as well. But of course, this will need to be built out and tested to be verified if it is necessary.
-
![]()
Meal Buddy
Meal Buddy is an app that will help prevent food waste by showing you what you can do with the random leftover food in your fridge and pantry. It also features organizational tools, environmental-friendly tips, and social aspects.
-
![]()
Glow-Up
Glow-Up is a cosmetics e-commerce website. Their main goal is to create a seamless transition from online to in-person experiences.
-
![]()
NY-Based Social Enterprise
Comprehensive resource for patients and providers.
