Kotak Mutual Funds
Redesign the Mutual Fund Advisor Portal and create a scalable product
Overview
Addressing Accessibility Challenges in a Smart Home Solution Mobile App to Meet EU Compliance
We collaborated on a redesign project with a designer from the MagentaZuhause app, a smart home solution by Deutsche Telekom, after it failed to meet the European Union’s accessibility guidelines during an audit. The audit revealed major accessibility barriers for users with impairments. With a complete overhaul not feasible due to resource limitations, the project focused on targeted redesigns of critical screens and elements to ensure compliance while preserving a seamless experience for all users, including those without disabilities.
My Role
UX Research & Design in a team of 2
Timeline
April 2024 - June 2024 (3 mo)
Scope
5 Flows
|40 Unique Screens
Exploring the Landscape
What is Web Accessibility?
“Web Accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.”
W3.org
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of guidelines designed to make web content more accessible to people with disabilities. Developed by the World Wide Web Consortium (W3C) through the Web Accessibility Initiative (WAI), these guidelines help ensure that websites are usable by everyone, including those with various impairments.
Archetypes
Who are we redesigning for?
- Understanding disabilities is crucial for creating accessible digital experiences. Disabilities can affect how individuals interact with technology, and designing with these considerations in mind ensures that everyone has equal access to online content and services.
- Recognising the various types of disabilities and the challenges they present helps designers and developers create inclusive and user-friendly digital environments.
Project Goal
Design Goals
1.
Achieve Accessibility Compliance: Ensure the smart home solution mobile application meets the European Union’s accessibility guidelines (WCAG 2.1 AA) to pass future audits.
2.
Enhance User Experience for All: Redesign key elements and screens to provide an inclusive experience for users with disabilities (visual, auditory, motor, cognitive).
3.
Maintain Brand and Functional Integrity: Ensure the redesign of accessible elements aligns with the brand’s existing design language and functionality, avoiding disruption to non-disabled users.
Project Constraints
Balancing Compliance and Feasibility
1.
No Complete Redesign: The project must focus on targeted redesigns of screens and elements to address accessibility issues, as a complete overhaul is not feasible due to time and resource constraints.
2.
Time Restrictions: The redesign must be completed within a limited time frame to meet upcoming audit deadlines and regulatory requirements.
3.
Existing Brand Guidelines: The redesign must adhere to the company’s existing brand identity, including visual style, color palettes, and typography.
Process
Design Process Overview
- I worked closely with the designer from the MagentaZuhause team to address the accessibility challenges identified in the audit.
- Our collaborative approach involved extensive research and design efforts to ensure compliance with EU accessibility guidelines while maintaining a seamless user experience.
Research
Analysing Audit Document
- Working closely with the client team, i carefully examined the audit findings and systematically categorized the accessibility barriers.
- To streamline the resolution process, I segregated the issues into three categories: UI/UX-related, development-related, and a combination of both. This allowed us to address design and technical challenges separately, ensuring more focused solutions.
- Additionally, I prioritized the issues based on their severity— classifying them as critical, moderate, or minor —so that the most urgent accessibility barriers could be tackled first.
- This structured approach enabled us to create a clear roadmap for the redesign process, aligning efforts across design and development teams.
Key WCAG Guidelines and Success Criteria
- To ensure compliance with accessibility standards, I conducted a detailed study of the European Union's Web Content Accessibility Guidelines (WCAG 2.1).
- These guidelines serve as the foundational framework for creating inclusive digital experiences, specifically targeting users with visual, auditory, motor, and cognitive impairments.
Design Execution
Refine and improve Accessibility
After the audit review, I gathered the screens with identified issues and began the iteration process, keeping the WCAG guidelines in mind.
1. QR Code scanner not feasible for all users
After discussing the issue with the product team, I began working on an achievable solution. By adding an alternate login/invite method, users can manually add entries, which also improves compatibility with screen readers.
2. The color of the lamp can only be perceived or adjusted via the visual impression
3. Sliders require complex pointer operation
I focused on creating solutions that not only make tasks simpler to perform but are also compatible with screen readers. I researched best practices for both color selection and slider design.
I carefully considered each design decision with all user bases in mind, aiming for a solution that is straightforward and accessible for screen readers while aligning with the overall design language
4. Schedules: Time period not easy to record
The existing flow for this section was complicated, with a disorganized structure and missing key information, which led to confusion.
My primary goal was to streamline the flow through multiple iterations, retaining only relevant information while readjusting familiar screens to ensure they were accessible for screen readers
5. New messages/news only marked graphically
The issue with the screen was that the only indicator for a new notification was a visual highlight, which is not accessible to all users. I improved accessibility by adding a simple label and establishing a proper annotation order for screen reader.
Annotation
Enhancing Screen Reader Accessibility
- For the screen reader annotation exercise, I conducted extensive research by reviewing multiple resources on accessibility best practices and consulting with an accessibility expert.
- Additionally, I collaborated with the development team to identify areas where proper labelling and logical reading order were missing or incorrect.
- After pinpointing these gaps, I implemented clear, descriptive labels and ensured a well-structured annotation flow, enabling screen readers to accurately convey the content to users with visual impairments.
Takeaway
Reflection
Accessibility is not a choice; it’s a necessity.
Empathizing with users is crucial for a product designer, and this project tested that at every step. I learned to keep all users in mind while designing, and studying accessibility revealed user pain points and struggles I hadn’t previously considered or fully understood. This project exposed me to an important and often overlooked aspect of design.
Function over form
Throughout the redesign process, I was compelled to iterating on designs that would be accessible to all users. I dedicated time to brainstorming concepts and discussing potential solutions with the client. Eventually, I focused on simpler solutions that would pass the accessibility test while also aligning with the client’s business goals and remaining feasible for development.
You made it till the end of the case-study!