HandiSport Mallorca
De una web informativa a una experiencia pensada para encontrar y gestionar actividades adaptadas
HandiSport Mallorca conecta a personas con determinadas necesidades de accesibilidad con actividades deportivas y turísticas adaptadas. El proyecto consistió en replantear una web muy desactualizada y convertirla en una experiencia responsive que acompañara al usuario desde el descubrimiento de una actividad hasta la solicitud y gestión de su reserva.
- Rol
- Product Designer UX/UI
- Tipo
- Proyecto freelance
- Producto
- Web app responsive
- Plataformas
- Desktop + Mobile
01 El punto de partida
Una web con información, pero sin un recorrido claro
Cuando me incorporé al proyecto, la web de HandiSport funcionaba principalmente como un repositorio informativo. La sección de actividades era especialmente larga: cada propuesta aparecía una detrás de otra, con grandes bloques de texto, poca jerarquía visual y sin herramientas que ayudaran a encontrar una actividad según las necesidades de cada persona.
La reserva tampoco formaba parte de un flujo evidente. El CTA aparecía al final de la página y no quedaba claro que fuese una acción de reserva; desde ahí, el recorrido acababa derivando hacia un formulario de contacto genérico. Otras áreas de la web mantenían una estructura similar, con mucho espacio vacío, información difícil de escanear y poca consistencia entre secciones.
El reto no era únicamente actualizar la estética. Había que convertir una web informativa en un recorrido comprensible desde “quiero encontrar una actividad” hasta “quiero solicitar mi plaza”.
02 Construir una base más clara
Trasladar la identidad de HandiSport a una interfaz coherente
No necesitábamos crear una identidad nueva. HandiSport ya tenía una marca reconocible alrededor del naranja; el trabajo consistió en trasladar esa identidad a una interfaz más consistente y sencilla de mantener.
Trabajé con una base de Material Design y un tema de Flutter para definir una paleta tonal, roles de color y una jerarquía tipográfica común. Montserrat se utilizó principalmente en titulares y elementos de mayor jerarquía, mientras que Roboto se aplicó a contenido, labels y textos funcionales.
Más que crear un sistema nuevo, necesitábamos una base suficientemente sólida para que toda la experiencia hablara el mismo lenguaje.
No construí un Design System completo. El objetivo fue establecer suficientes reglas compartidas para que formularios, filtros, cards, estados, galerías y herramientas de gestión se sintieran parte del mismo producto.
También trabajé en la estandarización de textos y copies para reducir inconsistencias y facilitar el trabajo conjunto con desarrollo.
03 Encontrar actividades según cada necesidad
Convertir la accesibilidad en parte del descubrimiento
Una de mis principales aportaciones UX fue plantear que las necesidades de accesibilidad no aparecieran únicamente como información dentro de la ficha de una actividad, sino que también pudieran utilizarse para encontrar actividades compatibles.
Junto con Samuel definimos las categorías que contemplaría la plataforma:
Acceso auditivo · Apoyo cognitivo · Acceso visual · Acceso de movilidad · Acceso sensorial.
Desde el Perfil, el usuario puede añadir las necesidades que le corresponden o indicar que no tiene discapacidad. A partir de esa información diseñé la opción de autofiltrado, pensada para reducir el esfuerzo de volver a seleccionar los mismos filtros cada vez que se consulta el catálogo.
El autofiltrado se acompañó de una explicación accesible desde la propia interfaz. El objetivo era que el usuario entendiera que la plataforma utilizaría las necesidades guardadas en su Perfil para mostrarle actividades adaptadas a ellas, y que pudiera ir directamente a configurarlas si todavía no lo había hecho.
En la sección de Actividades añadí además una pequeña guía del recorrido para reducir dudas:
Autofiltrado , Reserva , Solicitud.
La misma lógica continúa dentro de cada actividad. Los chips vuelven a mostrar para qué necesidades está adaptada antes de que el usuario llegue al CTA “Reservar mi plaza”. Así, la compatibilidad de la actividad permanece visible durante el recorrido y no depende de recordar el filtro aplicado anteriormente.
La accesibilidad dejó de ser únicamente una característica de la ficha y pasó a formar parte de la forma de descubrir el contenido.
04 De la reserva a la gestión
Diseñar el recorrido después de encontrar la actividad
Solicitar una plaza no siempre significaba reservar para una única persona. El formulario debía adaptarse también a grupos y permitir registrar las necesidades de cada participante de forma independiente.
Cuando aumenta el número de asistentes, aparecen bloques por persona. Cada uno permite indicar quién participa y qué necesidades de accesibilidad tiene. Los acordeones ayudan a mantener el formulario manejable incluso cuando la reserva incluye varias personas.
Las necesidades no pertenecen únicamente a la reserva: pertenecen a cada persona que participa en ella.
Una vez enviada la solicitud, el usuario puede consultar su evolución desde Mis reservas. Diseñé una jerarquía visual distinta para estados como Pendiente, Confirmada y Caducada, además de filtros para acceder a otros estados como Rechazada o Cancelada.
La misma solicitud tiene una vista complementaria para el equipo de HandiSport. Desde la gestión interna, una solicitud pendiente muestra la información necesaria para revisarla y permite aceptarla o rechazarla.
05 Dar autonomía al equipo para mantener el contenido
Diseñar también para quien gestiona la plataforma
La experiencia no terminaba en la parte pública. HandiSport necesitaba herramientas para mantener actividades, solicitudes y contenido desde la propia plataforma.
En la creación de actividades, el administrador puede definir título, subtítulo, descripción, contenido, necesidades de accesibilidad compatibles, notas y galería. Asociar esas necesidades en el momento de crear la actividad es lo que permite que posteriormente aparezcan como chips, filtros y criterios del autofiltrado.
También diseñé el flujo de creación de artículos para que el equipo pudiera mantener contenido editorial desde la plataforma. El formulario permite preparar título, subtítulo, descripción breve, contenido y galería, además de seleccionar portada y describir las imágenes.
Para que la publicación no dependiera de disponer siempre de la misma cantidad de material gráfico, diseñé cuatro variantes de layout según el número de fotografías disponibles:
3 fotos · 4 fotos · 5 fotos · +5 fotos.
Cada variante reorganiza el contenido y mantiene su adaptación a mobile, de forma que el equipo pueda publicar piezas diferentes sin romper la coherencia general de la web.
El producto debía ser claro para quien reserva, pero también fácil de mantener para quien publica y gestiona el contenido.
06 Resultado + alcance
Una experiencia conectada entre usuario y gestión interna
El diseño final amplió el alcance de la antigua web hasta cubrir buena parte del recorrido completo: descubrir actividades, comprobar sus necesidades de accesibilidad, solicitar plazas, consultar estados, gestionar reservas y mantener actividades y artículos desde la propia plataforma.
El trabajo se planteó de forma responsive para desktop y mobile y se desarrolló en colaboración estrecha con el equipo técnico. Samuel centralizaba la comunicación con HandiSport y trabajé especialmente con Daniela, frontend, compartiendo diseños, recursos visuales, fotografías, copies y criterios necesarios para trasladar las pantallas a producto.
Mi participación terminó con la entrega de los diseños. No realicé entrevistas ni tests con usuarios reales y no dispongo de métricas posteriores que permitan atribuir resultados cuantitativos al rediseño.
El principal cambio fue pasar de mostrar información a construir un recorrido: encontrar una actividad adecuada, solicitarla y poder seguir su gestión dentro del mismo producto.