The project was part of an assignment for the Inclusive Product Management Fellowship Program and was suppose to create a mid-fidelity wireframe and deliver it a period of 4 days.
Later, I applied these learnings to make the Chimple app accessibile
📋 Process
Understaing Visual Impairement - I learned about visual impairment and its various types & studied the WCAG (Web Content Accessibility Guidelines) for creating accessible designs.
Secondary Research/Desk Research + Primary Research -I conducted phone interviews to understand visually impaired user's needs firsthand and also did desk research to get more points & users experiences shared by indivisuals online.
Design, Iterate & Repeat- Post above, I designed solutions based on research insights and kept iterated as and when needed.
👓 Understanding Visual Impairment
👩🦯 Data on scale and impact
💬 Primary Research
For primary research, I asked questions like how they shop, how they read and navigate digital spaces, and what challenges they face daily.
I wanted to understand what makes a website or product easy or difficult to use, what tools help them, and what improvements they wish existed. I also asked about small struggles that sighted people might not notice, like recognizing products or using apps.
India’s accessibility laws aren’t strictly enforced, so visually impaired users rely on Swiggy and Blinkit for essentials with GPay for quick payments. But these apps aren’t fully accessible, making them hard to use in e-commerse shopping.
Aishwarya
Aishwarya lost her vision in her early 20s due to a brain tumor and has experienced life both as sighted and blind
Experience
Uses Zepto & Swiggy Instamart to go grocery shopping.
Buys clothes from physical stores with someone who tells her the description about the clothes.
Uses both mobile & web browser.
Prefers web browser as it has good structure & organization
Challenges she faces
Not able to buy clothes from online websites as it does not give her any description to visualize the clothes.
Doesn’t find the apps to be accessible for shopping.
Multiple payment gateways confuses her as it takes a lot of time.
Prefers GPay as it's single-click to do payment.
What she needs?
She needs detailed description of the products to visualize them better—describes clothes in detail (color, neckline, textile, size).
She needs to know the color, neckline, sleeve length, and pattern details.
Search feature is very important to her—keep search on top and in every page.
She shops & segregates clothes on the basis of event/occasion—create a section that categorizes clothes by occasion.
Simran
Simran has albinism and nystagmus, which affect her vision and make tasks like reading difficult without magnification
Experience
She can’t look at the screen for very long.
Endless scrolling tires her and makes browsing difficult.
Bright screens & sunlight cause eye strain, making it hard to use devices in certain environments.
Has difficulty reading very small and cluttered text, which affects navigation and readability.
Needs to zoom out while shopping because she pays attention to details.
Akshat
Akshat, a class 5 student, helps his dad, who teaches Braille but relies on Hindi voice assistance on his phone and avoids desktops. His preference for Hindi over English highlights the need for localized accessibility solutions.
Experience
Is in class 5, and assists his dad in daily activities
Dad teaches brail but doesn't use desktop or monitor
Dad uses voice assistance in Phone
Dad is reluctant in learning laptop or monitor for navigation
Dad prefers hindi over english and doesent like english voice assistance
🖥️ Secondary Research
Figure: Desk Research
🗒️ Learnings & Inspirations
Learnings
For learning, I explored websites with an accessibility score of 100, like Gov.UK, Scope, H&M, Amazon, and Everbite, to understand key accessibility elements. I also used screen reader mode and voice-over mode on both laptop and mobile devices to experience how visually impaired users navigate digital spaces.
I realized that for visually impaired users, using a product isn’t just a visual experience but also a deeply auditory experience.
Screen readers, voice-over modes, and sound cues help them navigate websites, apps, and devices. Instead of visual layouts, they experience content linearly through speech output, making elements like clear structure, alt text, and keyboard navigation crucial for accessibility.
Inspiration
High contrast makes designs bold, while whitespace keeps them clean. Structured layouts improve clarity and flow and simple, intuitive navigation enhances usability.
💻 Designing Hello
Font & Color Guide
Figure: Font & Color Guide
Component Guidelines
Website Layout
Screen Reader Specification for Voice Over
Key Features with WCAG Guidelines
Consistent Navigation
To Ensure that repeated components occur in the same order on each page of a site.
It is helpful for users with cognitive limitations, low vision and intellectual disabilities as it becomes easier to predict where they can find things on each page.
Highlighted Components for Voice Over States
Components with high contrast to make users more aware of where they are in the screen
States to help users navigate and understand where they are while moving through keyboard
Voice over specs - Hearing nautral tone with action
Voice over can sound very unnatural. Making voicever text as close to humans natural way of speaking is ideal.
It ensures user knows if any action can be performed now.
Image Specification
Always have a contrasting background for the object.
Keep the image focused on object as much as possible.
Break image and text for clean visual seperation, if image and component background is same.
Alternate text for images
This text is read by screen reader users.
Images that don’t convey any content and are used for decorative purpose should not be announced by the screen reader.
Always NAME image description for voice over
👩🦯 Reflection & Future Steps
This mid-fidelity wireframe was a starting point for designing accessible interfaces for visually impaired users. While I couldn’t test it due to Figma’s limitations and time constraints, it helped me understand key accessibility challenges and design considerations.
I later used this as a base to make Chimple accessible as a part of IPMF for visually impaired children, implementing key features to enhance usability.
This project reinforced the importance of accessible design and helped shape a more inclusive Chimple experience.