Contexto.
LaComu es una plataforma de Barcelona, ganadora del Premio Princesa de Girona Social 2026, que conecta a vecinos, entidades y administración en un mapa del barrio. El equipo ya tenía la app funcionando; me pidieron mejorar el diseño de la parte pública y la experiencia en el móvil antes de una reunión con la dirección. Trabajé sobre una copia de su frontend y entregué los cambios por pull requests a su repositorio.
Mi papel: diseño y desarrollo front-end de la mejora, de la auditoría a la entrega. Duración: octubre de 2026.
Límites fijos: el logo de tres nodos, el verde de marca, los textos y las rutas no se tocan. El proyecto es de LaComu: no publico su código y aquí solo cuento mi contribución.
El problema.
La presentación y la app vivían en la misma carcasa, la marca apenas se veía y había 39 fallos de accesibilidad. En el móvil, el mapa y las listas costaban de usar.
Lo que decidí, y por qué.
01
Separar la presentación de la app
- problema
- Portada, Sobre y Contacte se mostraban dentro de la app, con su lateral y su barra inferior. Parecía un solo producto sin cara propia.
- decisión
- Una capa pública con su propia cabecera y pie. Las rutas siguen siendo las mismas, así que no se rompe ningún enlace.
02
La marca como estructura, no como adorno
- problema
- Secciones de tarjetas iguales; el logo y el verde no contaban nada.
- decisión
- Cabecera flotante, hero en el verde de marca y una escena del barrio que, al hacer scroll, une a vecinos, entidades y administración con el trazo exacto del logo y se convierte en él. Trece ilustraciones de marca, una por idea, en lugar de iconos genéricos.
- por qué
- El logo ya dice «comunidad conectada»; la escena lo cuenta en vez de repetirlo.
- detalle técnico
- GSAP con ScrollTrigger: animación fijada en escritorio y ligada al dedo en el móvil, sin fijar, para no pelear con el scroll. Con «reducir movimiento» todo queda estático.
- revisión
- El equipo vio que la escena se perdía contra el fondo en claro y oscuro. La puse sobre una tarjeta propia en verde claro, igual en los dos temas, y de paso encontré y arreglé que los hilos no llegaban a pintarse.
03
Accesibilidad: de 39 fallos a 0
- problema
- 39 fallos en 158 elementos: contraste bajo, botones que solo aparecían con el ratón, zonas táctiles pequeñas, páginas que se salían de la pantalla en el móvil.
- decisión
- Enlace para saltar al contenido, una sola región principal por página, contraste AA en claro y oscuro, zonas táctiles de 44 px y el título de cada tarjeta como enlace real.
- comprobación
- axe con Playwright (WCAG 2.2 AA) a 390 y 1440 px, en claro y oscuro, antes y después.
04
La app, cómoda en el móvil
- problema
- Cada actividad ocupaba casi una pantalla y el mapa tenía tres paneles encima.
- decisión
- Actividades en filas compactas (unas 5 por pantalla en vez de menos de 2), filtros a 44 px, una sola barra sobre el mapa con un panel de capas y el logo como vuelta a la portada.
05
Entregarlo bien
- Cuatro ramas encadenadas (accesibilidad, portada, Sobre y Contacte, app móvil) para que cada revisión fuera pequeña.
- Typecheck, build, lint sin errores y 3.692 pruebas en verde en cada rama.
- Todos los textos nuevos en los 6 idiomas de la plataforma (catalán, valenciano, castellano, inglés, gallego y euskera).
- Vídeo del antes y el después y una presentación para la reunión.
Capturas.
01 · Separar la presentación de la app
02 · La marca como estructura, no como adorno
03 · Accesibilidad: de 39 fallos a 0
04 · La app, cómoda en el móvil
Resultado.
- 0 fallos de accesibilidad en 7 páginas (antes 39).
- 5 actividades por pantalla en el móvil (antes menos de 2).
- 1 barra sobre el mapa (antes 3 paneles).
- Cambios integrados en su repositorio y desplegados en su entorno de pruebas.
- Siguiente fase en conversación: el flujo de navegación del mapa y el directorio.
Qué aprendí.
- Rediseñar sin poder tocar logo, colores ni textos obliga a trabajar la estructura, el ritmo y el movimiento.
- Repartir el trabajo en pull requests pequeñas hizo que el equipo pudiera revisarlo sin miedo.