Una APP para el ayuntamiento de Madrid
No diseñé la app desde cero, pero sí la reconstruí para que pudiera escalar. Migré toda la interfaz desde Affinity a Figma, ordené el caos visual, normalicé tipografías y botones, y creé componentes reutilizables. El resultado: una base sólida, funcional y coherente para que el desarrollador pudiera hacer su trabajo sin fricción.
Contexto
Tuve la oportunidad de participar en un proyecto para el Ayuntamiento de Madrid, a través de Matinsa (filial de FCC), enfocado en mejorar la experiencia informativa en el parque Madrid Río. El objetivo era desarrollar una aplicación interactiva que ofreciera contenidos visuales sobre la fauna, la flora y las tareas de mantenimiento del río Manzanares.
La app, desarrollada en HTML5 y gestionada con el CMS MagicInfo, se ejecutaba en pantallas Samsung profesionales instaladas en el espacio público. El público objetivo era amplio: paseantes de todas las edades, sin conocimientos técnicos ni necesidad de interacción.
El diseño original estaba hecho en Affinity, sin sistema visual claro y con múltiples inconsistencias entre pantallas. Era funcional, pero necesitaba una intervención urgente para que el desarrollo técnico fuera viable y escalable.
El reto
- Asumir un proyecto ya comenzado, respetando lo avanzado pero mejorando lo esencial.
- Reconstruir visualmente toda la aplicación en Figma con orden y criterio de sistema.
- Diseñar pantallas adaptadas al uso público: sin interacción, en exteriores, de lectura rápida.
- Crear una base coherente y limpia que facilitase el trabajo del equipo de desarrollo.
Qué hice
01. Migración y creación de sistema en Figma
- Repliqué la aplicación completa pantalla por pantalla desde Affinity a Figma.
- Creé componentes reutilizables y definí una retícula base.
- Unifiqué estilos tipográficos, tamaños y espaciados.
02. Diseño de pantallas orientadas a la experiencia del usuario
- Añadí pantallas nuevas y ajusté las existentes con una jerarquía visual más clara.
- Redibujé elementos con foco en la legibilidad y la comprensión inmediata, teniendo en cuenta distancia de lectura, visibilidad en exteriores y uso no interactivo.
- Diseñé una interfaz capaz de informar a cualquier usuario —sin instrucciones, sin curva de aprendizaje.
03. Coordinación con desarrollo
- Trabajé codo con codo con el desarrollador (Emi), asegurando la viabilidad técnica de cada pantalla.
- Me aseguré de que la implementación fuera viable, funcional y fiel al sistema creado.
Resultado
- Continuidad del proyecto asegurada pese al cambio de equipo.
- Sistema de diseño unificado: claro, flexible y escalable a otros puntos de Madrid Río.
- Interfaz coherente, editable y altamente mantenible.
- Mejora tangible en la experiencia de usuario.
- Arquitectura visual preparada para escalar a múltiples entornos físicos.
- Validación en contexto real: funcionaba en la calle, en tiempo real y para todos los públicos.
- Enfoque UX: diseño invisible, orientado a la eficiencia y no al protagonismo visual.
Os dejo el prototipo para que podáis verlo: FIGMA
Lo que aprendí
- Reconstruir también es diseñar, y hacerlo bien exige criterio y respeto por el trabajo previo.
- A veces, reconstruir y ordenar tiene más impacto que empezar desde cero.
- Un sistema visual sólido mejora la colaboración, el desarrollo y la experiencia final.
- La clave está en entender el proyecto, respetarlo y hacerlo avanzar sin fricción.
Mi trabajo no fue inventar, fue ordenar, refinar y dar estructura a un sistema visual que ya existía, pero que necesitaba coherencia. Repliqué decenas de pantallas con lógica y visión, construyendo desde lo invisible un sistema que funciona. A veces, eso es lo que realmente marca la diferencia.