Elixir
Designing an inclusive property management tool by bringing accessibility up to WCAG 2.1 AA standards, ensuring equal usability for realtors, agents, and tenants.
+42%
Contrast Compliance
Form Efficiency
CLIENT
HomeServices
Of America
ROLE
Sr. UX/UI Designer
PLATFORM
Desktop,
Tablet
& Mobile
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.
BEFORE & AFTER
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.
MY APROACH
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 & 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 & 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.
