Touchscreen Kiosk AccessibilityDesign
Innovative project to make the price estimate process at company's smartphone-recycling kiosks WCAG 2.1 accessible and Section 508 compliant
Team
1 Section 508 Subject Matter Expert (SME (me)), 2 Developers, 1 R&D Engineer
Client
ecoATM
Methods
User-Centered Design Principles, Usability Studies, Prototyping, Iteration
Tools
Figma, WCAG & Section 508 Guidelines, ARIA, ANDI
Overview
Accessibility in design is not just a priority; it's a passion of mine. I believe in creating products that everyone can use, regardless of physical or cognitive ability. Designing for inclusivity opens doors for millions of people who may otherwise face unnecessary barriers. With this mindset, I took on the challenge of transforming ecoATM’s flagship touchscreen kiosk into a digitally accessible product, ensuring it met federal Section 508 compliance and Web Content Accessibility Guidelines (WCAG 2.1).
The Challenge
ecoATM kiosks sit in most Walmarts and buy used smartphones on the spot. The original process could take up to 10 minutes, asked subjective questions, and required users to physically connect their phones to the kiosk with a cable that frequently broke. My goal was to streamline the price estimate process while improving the kiosk’s accessibility for users with various impairments, including those with visual, mobility, and cognitive challenges. I called my solution Quick Offer.
Accessibility Considerations
Physical Impairments Some users had difficulty interacting with the physical cable and touchscreen interface, particularly those with mobility limitations or limited hand strength.
Visual Impairments The original design relied heavily on visual assessments of users’ smartphones, had a lot more small text to read, and did not provide an audio alternative, making it difficult for users with low vision or blindness to engage.
Cognitive Load Users with cognitive impairments faced challenges navigating the long and complex workflow of the price estimate process.
Simplified Menu Screen for Quick Offer (After)
My Process
Before jumping into design, it was crucial to understand the WCAG 2.1 and Section 508 requirements, which ensure digital content is presented in ways that all users can perceive, operate, and understand. To guide the design process, I conducted research to understand the specific accessibility needs of ecoATM users, particularly those with disabilities. This involved:
User Feedback The Customer Service and Product teams provided verbatim comments from people with mobility and vision impairments to identify pain points they experienced when interacting with touchscreen kiosks or other similar interfaces.
Competitor Analysis Examining how international competitors handled kiosk accessibility and identifying gaps that could be addressed in our design.
Accessibility Personas Developing personas of users with various disabilities—such as someone using a wheelchair, a person with low vision, or a user with cognitive impairments—helped me keep their unique needs at the forefront of design decisions.
Design Decisions for Accessibility
Visual Design
High Contrast & Legible Fonts: I applied high-contrast colors to key buttons and text to meet the WCAG 4.5:1 contrast ratio requirement, ensuring that users with low vision or color blindness could easily distinguish elements.
Large Tap Targets: Buttons were designed to be larger than typical touchpoints, meeting the recommended minimum size for touch interactions. This helped users with limited dexterity, ensuring they could easily activate buttons with minimal effort.
Navigation & Interaction
Keyboard Accessibility: I ensured that all kiosk interactions could be navigated using a keyboard (or equivalent assistive technology), making the system accessible for users with motor impairments who cannot use a traditional touchscreen.
Clear, Consistent Layout: The design was kept simple and consistent, with intuitive navigation paths to minimize cognitive load for users with learning disabilities or dementia. This aligns with WCAG’s principle of making interfaces easy to understand and navigate.
Accessibility Features
Screen Reader Support: By integrating ARIA (Accessible Rich Internet Applications) labels, the kiosk interface was made compatible with screen readers like JAWS and VoiceOver, allowing users with visual impairments to receive spoken feedback as they navigated through the system.
Alternative Input Options: For users in wheelchairs, I introduced the ability to control the kiosk using large lower screen buttons that were easier to reach.
Quick Offer’s Price Estimate (After)
Continuous Improvement
Accessibility is an ongoing process, not a one-time project. As ecoATM rolls out new features, I advocated for continual testing and improvements based on real user feedback and evolving accessibility standards. I also emphasized the importance of keeping up with updates to WCAG and Section 508 guidelines to maintain compliance and ensure the product continues to serve all users effectively.
Outcome
Through this process, we transformed the ecoATM touchscreen kiosk into a fully accessible product, compliant with both WCAG 2.1 and Section 508. By focusing on the needs of people with visual, physical, and cognitive disabilities, we created a more inclusive and user-friendly experience. The improvements made a real impact, expanding ecoATM’s user base and demonstrating that accessibility leads to better, more effective products for everyone. They also improved the price estimate process for people without disabilities by making it shorter, more accurate, and (almost) touch-free.
