Asset Management App
In the project to enhance accessibility within our checkout process, I tackled significant WCAG compliance challenges identified by an audit from FUNKA. To address these issues, I began by mapping the functionality and UI of various implementations, which allowed me to categorize issues and develop strategic design solutions. Collaborating with a cross-functional team, I optimized input fields, improved error messaging clarity, and enhanced focus state and navigation for interactive components. These efforts not only ensured our checkout process met accessibility standards but also helped elevate the team’s understanding and practices around accessibility.
Challenge
The project aimed to make the checkout process WCAG compliant following an accessibility audit from FUNKA. The primary challenge was addressing the widespread accessibility issues identified in the audit, amid an organizational environment with limited maturity in accessibility practices. This required both technical solutions and educational initiatives to elevate team understanding and approach.
Approach
Assessment & Mapping: Initiated by mapping functionality and UI across various implementations, categorizing elements from user entry to purchase completion. This phase was necessary due to minimal initial insight into different merchant environments.
- Collaboration: Worked within a cross-functional agile team—including product owners, developers, lead developers, system architects, and myself as the UX designer. Engaged in weekly planning and backlog meetings, and specialized discussions focused on resolving specific issues with multi-perspective insights.
- Categorization & Solution Development: With FUNKA’s detailed report highlighting non-compliance points, I organized and categorized issues to identify overarching design solutions. These were crafted to address and resolve multiple issues simultaneously.
- Education & Training: Facilitated team training sessions to bolster knowledge and application of accessibility principles, ensuring alignment across all phases of design and development.
Outcome
Design Solutions:
- Input Field Optimization: Enhanced input fields with proper labels, placeholder texts, and hint texts to improve accessibility.
- Error Messaging: Redesigned error message placements for clarity and perceptibility, incorporating color, text, and icons to indicate issues.
- Focus State & Navigation Improvements: Ensured interactive components were tabbable in a logical order, conforming to universal usability standards.
Through systematic categorization and strategic design solutions, the checkout process was successfully aligned with WCAG standards, delivering a user-friendly and accessible experience. The project also fostered a deeper organizational understanding of accessibility, laying a foundation for future development endeavors.
