2023

Villaverde Distrito Deportivo

Rediseño UX/UI de la web deportiva del distrito de Villaverde (Ayuntamiento de Madrid). Un portal accesible para promover una vida activa entre los ciudadanos.

Rol User Experience Designer
Cliente Ayuntamiento de Madrid
Duración 5 meses
Stack
  • Figma
  • Adobe XD
  • WCAG
  • Design Thinking
Ver prototipo original

Resumen

Villaverde Distrito Deportivo (VDD) es el portal deportivo del distrito de Villaverde. Su objetivo: animar a los residentes a estar más vinculados al deporte mediante promoción de eventos, planes de nutrición y entrenamiento, información sobre instalaciones y normativas.

El rediseño tenía que cumplir tres requisitos no negociables: accesibilidad total (WCAG), arquitectura de información clara para vecinos de todos los perfiles, y un sistema visual coherente que pudiera servir de precedente para otros distritos.

El problema

  • ¿Cómo puede una persona del distrito estar al día de las novedades deportivas locales?
  • ¿Cómo se podría desde el Ayuntamiento promover una vida más sana y activa?
  • ¿Cómo podría un ciudadano saber a qué lugares puede acudir para practicar su deporte favorito?
  • ¿Es posible tener una web deportiva local que cumpla las normas de accesibilidad?

Objetivos

  • Promover una vida más activa entre los ciudadanos.
  • Crear una comunidad deportiva local.
  • Unificar en una única web todo lo relacionado con deporte y nutrición del distrito.
  • Cumplir con normativas de accesibilidad y sentar precedente para otros distritos.

Fase de investigación

Evaluación heurística

Analicé la web existente mediante principios heurísticos clasificados en categorías: identidad, lenguaje, rotulado, estructura y navegación, layout, búsqueda, multimedia, ayuda, accesibilidad y control. Los problemas detectados y las soluciones propuestas quedaron documentados en una tabla de análisis que sirvió como backlog del rediseño.

Las conclusiones clave fueron: mejorar la visibilidad del estado del sistema, la coincidencia con el mundo real, la consistencia y estándares, la prevención de errores, y ofrecer ayuda y documentación.

Encuestas a usuarios

Envié un formulario (Google Forms) a residentes de Villaverde para conocer sus hábitos deportivos, de salud y su relación con el producto actual. Algunos insights clave:

  • Público adulto: más de la mitad de los encuestados es mayor de 45 años.
  • Viven acompañados: un 88% vive con más gente.
  • Mayormente activos: un 67% practica deporte al menos tres veces a la semana.
  • Prefieren actividades grupales: un 84% las prefiere frente a las individuales.
  • Poco alcance actual: más de la mitad de los encuestados asegura no conocer VDD.

Benchmarking

Comparé VDD con otros dos distritos deportivos para situarla en su marco competitivo. Las conclusiones guiaron varias decisiones de diseño:

  • Movilización en redes sociales para engagement y promoción de eventos.
  • Reestructurar la arquitectura: añadir tags a noticias, usar keywords, eliminar subcategorías innecesarias.
  • Incluir fotografías representativas de las instalaciones.
  • Añadir vías de contacto activas (WhatsApp, correo, teléfono, chatbot).
  • Reforzar misión, visión y valores con foco en inclusividad.

Card sorting

Para definir la nueva arquitectura de información realicé un card sorting con usuarios del distrito. Los resultados me permitieron generar un árbol de contenidos alineado con los modelos mentales de los ciudadanos y con los intereses de los stakeholders.

Mapa de stakeholders

Definí una matriz de influencia × interés con todos los actores implicados: Junta Directiva de VDD, trabajadores, vecinos de Villaverde, Gobierno de Madrid, escuelas, gimnasios, proveedores, medios locales y profesionales de la salud. Esto me ayudó a priorizar qué información destacar y a quién.

User personas

Construí tres arquetipos basados en los resultados de las encuestas:

  • Paco Camacho, 50 años. Disfruta del deporte en compañía y al aire libre.
  • Cecilia Martínez, 35 años. Se ejercita con regularidad. Le interesan los deportes de fuerza y consulta rutinas online.
  • Alberto Fernández, entrenador personal con conocimientos de nutrición.

User Journey Map

Mapeé el recorrido de cada persona hasta completar sus objetivos clave. Me sirvió para identificar puntos de fricción y oportunidades de mejora que ni la evaluación heurística ni las encuestas habían detectado por sí solas.

Fase de diseño

Librería y sistema de diseño

Creé una librería de componentes reutilizables en Figma: tokens de color y tipografía, botones con todos sus estados, cards, inputs accesibles, navegación y layouts responsive. Todo documentado para que el equipo pudiera mantenerlo.

Wireframes de baja fidelidad

Primer bocetado rápido para validar la arquitectura antes de invertir tiempo en alta fidelidad. Iteré sobre los wireframes con feedback del cliente antes de pasar a visual.

Alta fidelidad y prototipo

Prototipos navegables en Figma cubriendo los flujos críticos: búsqueda de instalaciones, consulta de eventos, inscripción a actividades y acceso a planes de nutrición/entrenamiento. Con estados de hover, foco, error y éxito, y revisión WCAG nivel AA.

Aprendizajes

Fue mi primera colaboración con una administración pública y aprendí que los tiempos de decisión y las restricciones normativas (accesibilidad, identidad visual oficial, coordinación con varios departamentos) son un tipo de complejidad distinta a la del sector privado. La investigación previa fue lo que hizo posible defender decisiones de diseño con datos en cada reunión con stakeholders.