Auditoría de accesibilidad completa y corrección de un portal de pacientes de Gastroenterología: 11 pantallas, de escritorio y móviles, según WCAG 2.2 Nivel AA.
Diseño UX
Accesibilidad
Salud
Cliente:
Modmed
Rol:
Diseñadora UX
Fecha:
2025
Duración:
8 meses
No design system, no accessibility
The Challenge
Build an accessible, responsive, yet color customizable design system.
After an extensive WCAG 2.2 Audit, 250 individual issues were found, which originated from:
gGastro's portal lack of design system. Components were pulled from different frameworks with no shared foundations. Because practices could customize portal colors, most components inherited whatever palette the client chose.
No component had been built with accessibility in mind - focus order, aria-labels, meaning.
Fixing an issue on one screen didn't fix it anywhere else. Without a shared component layer, every remediation was a one-off patch.
What was built
Typography Family, Custom and System color palettes, and 15 reusable components.
Estrategia y Definición
Define los perfiles de usuario objetivo y sus necesidades de información a través de diferentes canales de comunicación. Colaboré con el interesado para establecer el alcance del proyecto basándose en las prioridades de los usuarios, los recursos disponibles y las limitaciones técnicas.
Custom and System color palettes
Buttons
Before:
The portal's primary button and links inherited the practice's custom color , creating meaningless color significance and color contrast issues.
After:
Fix standardized buttons and links to a consistent system color palette, aligned with other ModMed products, regardless of practice customization. Color no longer determines what a button o link means — its label, hierarchy and position do.
After and before buttons
Password Input Field
Before:
The strength indicator didn't pass contrast requirements, gave no visibility into what the requirements actually were, and offered no way to see what was being typed and instructions were not semantically tied to the input.
After:
The new field validates requirements in real time, marks each one met or unmet as the user types, and includes a show/hide focusable toggle for the password characters. Description is related by aria-labelledby to the input.
Password input after and before
Typographic Family Hierarchy
Before:
There was no Heading and text hierarchy properly defined and used.
After:
Heading hierarchy and body text standards were defined and documented for the first time. Correct heading structure is foundational for screen reader navigation — without it, assistive technology users can't scan or jump between sections. The standards established consistent sizing, weight, and hierarchy so semantic structure and visual structure match.
Typographic Family
Arquitectura de la información
Diseñé la estructura del sitio equilibrando las necesidades de los usuarios, los objetivos de las partes interesadas y las capacidades técnicas. Se consideró la escalabilidad y la integración con el ecosistema web más amplio de la universidad.
Impact
A new reusable library has been created for developers to use going forward, ensuring the continuity of accessibility for the portal, even when no designer is involved.
100%
Of contrast related issues found in audit remediated.
70%
Of 250 WCAG issues resolved.
15
Components created and updated.
