Elixir
<!--
Work info
-->
Client:
HomeServices Of America
Industry:
Real Estate, B2C, WCAG
Role:
Sr. UX/UI Designer
Year:
2023
Platform:
Desktop, Tablet & Mobile
Project Overview
Designing an inclusive property management tool by bringing accessibility up to WCAG 2.1 AA standards, ensuring equal usability for realtors, agents, and tenants.
Problem
Low Contrast Ratios: Text and UI didn’t meet WCAG 2.1 AA contrast guidelines.
Keyboard Navigation Issues: Users couldn’t complete flows without a mouse.
Unclear Forms: Labels and inputs weren’t accessible for assistive tech users.
Poor Screen Reader Support: Buttons and components lacked ARIA roles and labels.
Solution
Design System Updates: Rebuilt core UI components to meet WCAG 2.1 AA standards.
Form Improvements: Added clear labels, error feedback, and better instructions.
Keyboard-First Design: Ensured all elements were usable without a mouse.
ARIA Enhancements: Added roles, landmarks, and alt text.
Color Adjustments: Improved contrast ratios for legibility
My Contribution
Led full accessibility audit using Lighthouse, Axe, and Wave.
Conducted manual testing with NVDA, keyboard-only nav, and high-contrast mode.
Collaborated with developers + QA to implement and test changes.
Created accessibility documentation and guidelines for future features.
Updated the design system to bake in inclusive, accessible components.
Results
Before: Users with disabilities couldn’t navigate the platform—forms were unclear, keyboard navigation was broken, and screen readers failed on key flows.
After: A fully accessible, WCAG 2.1 AA–compliant platform with clear forms, full keyboard support, stronger contrast, and robust screen reader compatibility
After
Before and after example showing how adding alt text makes images accessible for all users.
My Approach
Discovery Phase
Accessibility Audit: Used automated tools and manual testing.
Expert Input: Consulted accessibility specialists and reviewed WCAG guidelines.
Insights: Found pain points in navigation, forms, and contrast.
Design and Development
Design System: Rebuilt components for compliance and scalability.
Forms: Improved labels, error states, and instructions.
Navigation: Added clear focus states and keyboard support.
ARIA Roles: Improved semantics for screen reader clarity.
Color Contrast: Adjusted palette for compliance and readability.
Testing and Iteration
User Testing: Ran flows with screen reader + keyboard users.
QA Partnership: Verified compliance before release.
Documentation: Built ongoing accessibility standards for the team.
CONVERSION RATE OPTIMIZATION (CRO) IMPACT
The accessibility redesign transformed Elixir from a functional but limited tool into an inclusive, conversion-focused platform:
Keyboard Navigation → Engagement: Enabling full keyboard flows improved completion rates for core tasks by +42%.
Contrast Compliance → Clarity: Adjusted color ratios across the UI increased legibility and reduced errors in forms.
Form Improvements → Efficiency: Clear labels and feedback sped up time-to-complete, improving user confidence and reducing drop-offs.
ARIA Enhancements → Trust: Screen reader support created a smoother experience, encouraging more users to stay and complete actions.
Design System → Long-Term ROI: Baking accessibility into the design system ensures every new feature supports compliance and usability without extra cost.
Business ROI: By meeting WCAG 2.1 AA, Elixir expanded its reach to a broader audience, reduced abandonment rates, and positioned itself as a reliable, inclusive property management platform.
The CRO takeaway: Accessibility isn’t just about compliance—it drives engagement, efficiency, and trust. By making Elixir inclusive, we turned usability challenges into measurable business wins.
