SODIS - Rediseño web accesible

Rediseñé el sitio web de SODIS Perú desde cero, transformando una estructura rígida en una experiencia clara, accesible y orientada a la acción.

El trabajo combinó rediseño UX/UI, prototipado en Figma e implementación, con foco en mejorar la comprensión del contenido, la navegación y la accesibilidad para todos los usuarios.
Rol: UX/UI Designer
Tipo: Rediseño
Métodos:
  • Arquitectura de información
  • Evaluación de flujos
  • Prototipado

PROBLEMA

El sitio presentaba barreras significativas de accesibilidad y usabilidad que afectaban directamente la comprensión del contenido:

  • Contrastes insuficientes (ej. texto claro sobre fondos claros)
  • Tipografía poco legible (pesos muy delgados y tamaños reducidos)
  • Animaciones automáticas que generaban distracción
  • Formularios sin etiquetas visibles
  • Navegación y componentes inconsistentes
  • Jerarquía visual poco clara

Enfoque

Enfoqué el rediseño en hacer que la información sea clara, accesible y fácil de recorrer, alineando la experiencia digital con el propósito inclusivo de la organización.

Accesibilidad como base estructural

Claridad en la organización del contenido

Decisiones de diseño

Mejora de accesibilidad y legibilidad

Problema

Los usuarios seguían el orden del menú principal, pero la estructura no facilitaba encontrar contenido clave.

Decisión

Rediseñé la arquitectura de información para alinearla con ese comportamiento y mejorar la orientación dentro del sitio.

Solución
  • Reorganización del contenido según prioridad de uso
  • Jerarquía clara en navegación principal
  • Acceso directo a servicios, proyectos y contacto
ANTES
Webpage section titled 'Recursos' with icons and links for Publicaciones, Documentos de Interés, Videos, Biblioteca virtual, and Artículos under the SODIS logo and navigation menu.
DESPUÉS
SODIS website Recursos page with filter options and three resource cards titled Guia de recursos ante la privación de libertad, Servicios e intervenciones en situaciones de crisis o emergencias en salud mental en Lima, and Personas con discapacidad en el Perú.
ANTES
Two young men with glasses holding a sign that reads 'vivir como personas' on a webpage of SODIS titled Áreas with a section about full legal capacity for people with disabilities.
DESPUÉS
SODIS website section showing key action areas: inclusive education, independent living, equality and non-discrimination, and legal capacity, each with a brief description and icon.

Accesibilidad como base del diseño

Problema

El sitio no reflejaba el enfoque inclusivo de la organización.

Decisión

El sitio no reflejaba el enfoque inclusivo de la organización.

Solución
  • Contrastes adecuados entre texto y fondo
  • Tipografía legible y escalable
  • Navegación compatible con lectores de pantalla
  • Botones e íconos claros y fáciles de identificar

Consistencia visual y experiencia moderna

Problema

El diseño anterior era inconsistente y no representaba la evolución de SODIS.

Decisión

El diseño anterior era inconsistente y no representaba la evolución de SODIS.

Solución
  • Paleta de colores alineada a la marca
  • Sistema de componentes reutilizables en Figma
  • Iconografía clara y consistente
  • Interfaces más limpias y actuales
Webpage section with red card titled 'Vida independiente' about independent living rights for people with disabilities, news article preview dated November 11, 2023, a resource guide on social protection and disability in Peru, and directory contact info with a woman's photo and name Liliana Panizo, Director.

Resultados

  • Acceso más rápido a servicios, recursos y proyectos
  • Reducción de fricción en la navegación
  • Experiencia más accesible e inclusiva
  • Mayor alineación entre diseño y propósito inclusivo
  • Percepción más moderna y confiable de la organización

Reflexión

Cuando la estructura, el lenguaje visual y la accesibilidad trabajan juntos, la experiencia no solo se vuelve más usable, sino también más alineada con el propósito del producto.