User Research
Product Design
Interaction Design
Individual project
8 weeks
Figma, VSCode
To enhance the accessibility of Instagram Reels for users with visual impairments by improving the visibility and customization of text descriptions.
Focus on accessibility improvements without altering Instagram’s core design principles or disrupting the existing user interface.
Instagram Reels, with its vast user base, poses challenges for people with visual impairments, particularly around text descriptions. Initial user feedback highlighted issues with readability and the need for improved contrast and customization options.
I redesigned the text descriptions with customizable features such as text size adjustments and dark mode, addressing these concerns.
👎 Little to no contrast in text.
👎 Text and video overlay each other, not friendly for general vision/reading issues, people with dyslexia & dyspraxia.
👎 No clear indication of additional content, making it unclear for users whether there is more information in the description.
✅ Add a "Show more" feature for additional content.
✅ Improve text-video contrast for better visibility.
✅ Offer adjustable text size options.
✅ Introduce Dark mode for customizable text settings, enhancing accessibility for users with visual limitations.
One of the major challenges during this project was identifying and addressing the diverse needs of users with varying degrees of visual impairment. During user testing, it became clear that while some users struggled with reading small text, others found it difficult to locate dark mode within the app.
To overcome this, I:
These solutions improved the overall accessibility, making Reels more inclusive for users with disabilities.
In the Discover and Define phase, I conducted a thorough Literature Review to understand the challenges faced by visually impaired users. I also performed a Competitor Analysis of Pinterest, Tumblr, and LinkedIn to explore how other platforms address accessibility.
I started asking myself:
“How might we enhance the visibility of text Instagram Reels to be more accessible for people with vision issues?”
To tackle the problem statement above, I developed several wireframes inspired by these platforms. However, early designs didn’t fully meet user needs—text contrast in some layouts wasn’t strong enough, and navigation of accessibility features remained unclear.
Iterating based on user feedback, I improved:
I selected three competitor social media apps—Pinterest, Tumblr, and LinkedIn—to investigate their approaches to accessibility and identify any challenges they may face.
In this first design iteration, I simplified text options with icons for text size and dark mode, placing them on-screen instead of in settings. However, the layout felt confusing, and the icons were too large, distracting from the video description content.
In the next iteration, I added a three-dot menu for text size and dark mode options, creating a more organized layout. However, this extra step could be challenging for visually impaired users, as the menu icon might be hard to spot.
After multiple iterations, I positioned the text size and dark mode icons at the top-right of a white text description box, ensuring clear readability and preventing text from blending with the video background, unlike the original transparent design.
Light Mode
Dark Mode
The high-fidelity prototype was created in Figma.
The web app version of the design was built using HTML, CSS, and JavaScript in VSCode.
The final design featured:
I created an interactive prototype in Figma and made a step further to code a web app version.
Then I conducted user testing with participants who had various visual impairments. The results were overwhelmingly positive:
