Cómo diseñé y construí una herramienta que tres personas usan de pie, en una finca sin cobertura, el único día que no se puede repetir.
Algo Entre Manos coordina bodas en Barcelona y Girona. Tres personas, entre ocho y doce bodas al año, y toda la operación repartida entre WhatsApp, hojas de cálculo y el calendario del móvil de una de ellas. El encargo no fue «haznos una app»: fue dejar de perder cosas.
Una boda no es un proyecto grande, son doscientos detalles pequeños que solo importan una tarde. Quién es celíaco. Quién no se puede sentar al lado de quién. A qué hora llega el autocar. Si las chuches del candy bar están pedidas o solo habladas. Ninguno de esos datos es complejo; lo difícil es que estén todos, en el mismo sitio, y que los vean las tres personas a la vez.
Lo que fallaba no era la falta de herramientas, era que había demasiadas. El timing en un PDF, los invitados en un Excel, las alergias en un audio de WhatsApp, el contrato en un correo de hace ocho meses. Cada cambio obligaba a avisar a las otras dos, y el aviso se perdía.
Una aplicación web que funciona en móvil, tablet y ordenador, se instala en la pantalla de inicio como si fuera nativa, sigue abriendo sin cobertura y sincroniza sola en cuanto vuelve la señal. Con portal privado para cada pareja, generación de contratos, presupuesto por plazos, plano de mesas y dossieres imprimibles con la identidad del estudio.
No son cinco herramientas conectadas; es una sola que cambia según lo que hace falta ver en cada momento. Estos son los cinco lugares donde pasa el día a día de una boda.
Lo que se ve al abrir la app: estado real de todas las bodas activas, tareas de hoy, resumen general y distribución del presupuesto.
Aquí conviven las tres personas del estudio: administradora, coordinadora y asistente. Cada boda muestra su porcentaje de preparación con una barra editorial — Ainhoa & Diego al 83 %, Lucía & Martín al 67 %, Clara & Tomás celebrada al 92 %. La franja superior solo aparece si hay cambios sin subir.
Toda la operación en una pantalla. Cada boda es una tarjeta con cover propia, fecha, estado, invitados, tareas pendientes y progreso.
Buscador por pareja, lugar o responsable y filtro por estado. El equipo abre una boda en un clic y entra directamente a su workspace completo. Se pueden duplicar bodas enteras como plantilla para arrancar más rápido.
Mesas redondas que se mueven, se renombran y se asignan invitado por invitado. Con contador en vivo de confirmados, pendientes y plazas libres.
Cada mesa muestra su ocupación (10/10 completa, 8/10 pocas plazas, vacía). Hay botones de asignación automática, exportar lista para el catering e imprimir seating editorial. En la barra lateral derecha se abren los detalles de cada mesa al seleccionarla.
El dinero de la boda visto desde dos ángulos: A — facturado (con factura e IVA) y B — no facturado (efectivo y acuerdos directos). Sin tablas contables, con el margen y los pagos realizados a la vista.
Cada partida reúne presupuesto, reserva, segundo pago, restante, vencimientos y justificantes. El sistema avisa cuando se acerca un plazo o cuando una partida sobrepasa el objetivo. La pareja ve una versión limpia en su portal.
Un contrato editorial que la pareja recibe en PDF con la identidad de AEM. Se rellena solo con los datos de la boda que están en el sistema: pareja, fecha, finca, importe, forma de pago.
Se compone en el navegador con la misma tipografía de la marca, exporta a PDF limpio para firmar y queda registrado en el portal privado. El equipo controla las variables sin tocar plantillas ni Word.
Cada boda tiene su propio portal con URL única y clave. La pareja entra desde el sofá y ve su boda — ni una interna, ni una de otra pareja.
Portada personalizada con foto de la boda, cuenta atrás, y siete apartados: Resumen, Invitados, Mesas, Rincones, Presupuesto, Proveedores, Plan y Detalles. Transparencia total con los números — «Estas son las mismas cifras que llevamos nosotras. No hay dos cuentas.»
La primera pantalla cuenta la propuesta antes de pedir credenciales. Imagen real de boda de AEM a la izquierda, acceso tipográfico a la derecha, con instrucciones de acceso de prueba a la vista — porque esto es un portfolio, no una producción real.
Casi todas las decisiones de este producto salen de una observación: la herramienta no se usa sentada en una mesa. Se usa de pie, con una mano, al sol, con prisa y con alguien hablándote.
| Quién | Qué necesita | Dónde lo usa |
|---|---|---|
| Administradora | Ver el estado de todas las bodas de un vistazo, el dinero y los contratos | Ordenador, oficina |
| Coordinadora | Cerrar proveedores, montar el plano de mesas, repasar el timing | Portátil y tablet |
| Asistente | Marcar cosas hechas durante el día de la boda | Móvil, de pie, en la finca |
| La pareja | Ver su boda sin ver nada interno ni de otras bodas | Móvil, en el sofá |
Las fincas del Empordà y el Maresme tienen dos rayas de señal. El día de la boda no se puede recargar la página «a ver si ahora va». La aplicación tenía que abrir y funcionar sin red, guardar lo que se apunte y subirlo cuando vuelva la conexión. Eso condiciona la arquitectura entera.
Un error en una herramienta de oficina se corrige mañana. Aquí no hay mañana. Ante la duda, la aplicación tiene que fallar de forma ruidosa y explicarse, nunca quedarse callada haciendo como que todo va bien.
Las alergias de los invitados son datos de salud bajo el RGPD. No es una columna más de una tabla: obliga a pensar quién los ve, cuánto tiempo se guardan y qué pasa si el archivo acaba donde no debe.
Este proyecto lo diseñé y lo construí yo: investigación, arquitectura de información, interfaz, sistema de diseño y desarrollo. Las decisiones de negocio —qué se cobra, cómo se factura, qué ve la pareja— son del estudio. En más de un punto discrepé y me equivocaba yo; queda anotado donde ocurrió.
La mayoría de los problemas de este proyecto no se veían mirando la pantalla. Se veían midiéndola. Cambiar «creo que ese botón es pequeño» por «ese botón mide 34×34 y la zona que responde al dedo también» hizo que las revisiones dejaran de ser cuestión de gusto.
Monté un banco de pruebas que abre la aplicación en móvil, tablet y escritorio, entra, recorre las secciones y comprueba cosas concretas:
Claude y GPT me ayudaron a acelerar la parte mecánica: convertir conversaciones con el equipo en flujos de usuario, generar variantes de microcopy en tono editorial, plantear casos límite que no se me hubieran ocurrido a la primera. La decisión de qué se queda y qué se descarta sigue siendo humana, medida contra el uso real. La IA acorta el camino; no reemplaza el criterio.
Un ejemplo. Para que el botón de menú fuese fácil de acertar con el dedo se le añadió un margen invisible de 6 px. Visualmente perfecto. Medido, otra cosa:
El margen estaba mal anclado y, en vez de rodear el botón, formaba una capa transparente del tamaño de media pantalla que interceptaba los toques de todo lo que había debajo. Ninguna revisión visual lo habría encontrado: no se ve nada raro, simplemente hay sitios donde tocar no hace nada.
La identidad de Algo Entre Manos es editorial y serena: dos tipografías, verde salvia y un acento mostaza. Trasladarla a una herramienta operativa obliga a resolver algo que un catálogo no tiene: densidad de información.
Dos familias, las de la marca. Italiana para titulares, que solo existe en un peso, y DM Sans para todo lo demás. Las cifras van siempre en DM Sans: Italiana no tiene peso suficiente para un número, y en esta herramienta los números son lo que se lee de lejos.
Antes cada bloque llevaba su relleno a ojo —18, 14, 12, 16, 22— y algunos ninguno. Se redujo a cinco valores y todo sale de ahí.
| Decisión | Por qué |
|---|---|
| 44×44 mínimo en pantallas táctiles | Por debajo, con el dedo se falla el objetivo. Medido, no estimado. |
| Enlace «Saltar al contenido» | Con lector de pantalla, no hay que recorrer once entradas de menú. |
| Foco atrapado en diálogos | Y devuelto al botón que lo abrió al cerrar. |
| Nunca solo color | Los estados llevan texto o forma además del tono. |
| Se respeta «menos movimiento» | Quien lo pide no recibe el vídeo de bienvenida a pantalla completa. |
| Deshacer en lo destructivo | Borrar da unos segundos para recuperar en su posición original. |
Para poder enseñar este proyecto hizo falta construir una segunda versión: la misma aplicación, con todos los datos inventados. El ejercicio fue más revelador de lo previsto.
| Qué | Dónde estaba |
|---|---|
| DNI, número de cuenta, nombre legal completo y domicilio | En la plantilla de contrato, dentro del código |
| 144 invitados con sus alergias | Datos de salud, en los datos de ejemplo |
| Tres móviles del equipo y un correo personal | En el estado por defecto |
| Razón social y domicilio del responsable | Visibles en el pie del acceso y en la sección legal |
| El nombre de una compañera | Repartido por once archivos: manual, portal, documentos y ajustes |
| Una boda real entera | En un archivo que no cargaba nadie, pero que se publicaba igual |
Siete fotografías tenían el problema dentro de la imagen. Cuatro llevaban impreso en la señalética el nombre completo de una pareja y la fecha de su boda. Otra ponía los nombres de otra pareja y se usaba de fondo de la barra lateral. La última mostraba a los novios con una veintena de invitados de cara.
Ninguna búsqueda de texto detecta eso. Se encontró abriendo las veintiuna imágenes del proyecto una a una.
La demostración conserva la identidad de Algo Entre Manos —es trabajo hecho para un cliente real y tiene sentido que se vea— pero lleva una franja fija en todas las pantallas advirtiendo de que los datos son inventados. Sin botón de cerrar: si se pudiera cerrar, se cerraría en el primer minuto.
| Qué se comprobó | Resultado |
|---|---|
| Trabajo simultáneo | Tres personas en la misma boda, en tres navegadores. Una crea una tarea y las otras dos la ven sin recargar. |
| Nadie pisa a nadie | Si dos guardan a la vez, la segunda no sobrescribe: se trae la versión de la otra y avisa. |
| Sin conexión | La aplicación abre igual y lo apuntado se sube solo al volver la señal. |
| Tres tamaños | Móvil, tablet y escritorio: arranca, se recorren todas las secciones, sin errores. |
| Zonas táctiles | Ningún control por debajo de 44×44 en móvil. |
| Peso | Los datos bajaron de 3,76 MB a 0,13 MB. El vídeo de móvil, de 2.316 KB a 1.578 KB sin perder calidad. |
Más allá del alcance inicial, dejé documentadas y priorizadas una serie de evoluciones que suman valor al producto en el medio plazo. Son las piezas que convierten una app en una plataforma viva:
Lo que hace difícil una herramienta como ésta no es lo que tiene que hacer. Es lo que no se puede permitir hacer mal el único día que importa.Rodrigo Negrete · Product designer
Versión publicable con la misma interfaz, sin credenciales ni datos reales. Funciona íntegramente en el navegador de quien la visita.
Abrir aem.rodd.es