Cliente y contexto
Serendipia es una aplicación de actividades en Montevideo: un producto digital cuyo valor está en que la gente encuentre planes y se encuentre entre sí.
Llegó sin identidad. No había marca, ni sistema visual, ni una sola pantalla definida.
El problema
Diseñar una app sin haber definido antes el lenguaje visual es el error más común y el más caro. Se dibujan pantallas bonitas, se aprueban, y después —cuando aparece la marca— hay que rehacerlas todas porque no hablan el mismo idioma.
Serendipia además tenía una exigencia de fondo: el nombre promete encontrar algo bueno sin buscarlo. Una identidad genérica de app —azul corporativo, íconos de catálogo, tipografía neutra— habría contradicho el nombre en el primer segundo.
Qué hicimos
El orden importó más que cualquier pieza suelta. Se avanzó en cuatro etapas, y cada una se cerró antes de abrir la siguiente.
1. Paleta y tipografía, antes que nada
Se presentaron ocho propuestas de paleta y varias familias tipográficas, antes de dibujar un solo logo. Es deliberado: el color y la tipografía son las decisiones que más condicionan todo lo que viene después, y son las más baratas de cambiar al principio.
La paleta que se fijó abandona el azul corporativo por completo:
| Color | Hex | Rol |
|---|---|---|
| Violeta | #8253fb | creatividad, lo inesperado |
| Amarillo | #ffcc33 | alegría, optimismo |
| Celeste | #01f5f3 | claridad |
| Naranja | #ff5a30 | acción |
| Negro / Blanco / Gris | #000000 #ffffff #eaeaea | estructura |
Y se definieron gradientes con significado, no decorativos: de amarillo a violeta es el paso de la chispa al descubrimiento; de violeta a naranja, la creatividad que se vuelve acción; de celeste a amarillo, la claridad que lleva a la alegría.
En tipografía se fijó un sistema de dos roles: Aloevera Display para captar atención y Poppins para garantizar legibilidad. Una es la personalidad, la otra es la funcionalidad.
2. Propuestas de logo
Con el lenguaje visual ya decidido, se desarrollaron propuestas de marca. La elegida resuelve tres lecturas en un solo signo:
- Un pin de ubicación, el lugar donde nacen los encuentros.
- Un abrazo en su interior, la conexión humana.
- La letra S, dibujada por la contraforma del propio pin.
En violeta y amarillo: la creatividad y la alegría, que es exactamente lo que el nombre promete.
Un signo que sostiene tres lecturas sin volverse ilegible es difícil de lograr y fácil de reconocer. Ese es el trabajo.
3. Manual de marca
Acá sí se documentó el sistema, en cinco bloques: paleta y gradientes · logo, con versión positiva, negativa y área de resguardo · tipografía · sistema de iconos —con criterio explícito de trazo, grosor y esquinas redondeadas, para que cualquiera pueda dibujar uno nuevo sin romper el conjunto— y uso de dispositivo y fotografía.
Ese último bloque fija la postura de la marca:
No vendemos tecnología; vendemos conexiones humanas y experiencias significativas.
El teléfono aparece, pero nunca como protagonista.
La marca se probó aplicada antes de darla por cerrada: vía pública, mupi, lateral de ómnibus, pantalla y merchandising. Un logo que funciona en la pantalla y se cae en un ómnibus no está terminado.
4. Sistema de interfaz y pantallas
Recién con todo lo anterior resuelto se diseñó la app en Figma: 33 pantallas y un sistema de componentes, no un puñado de maquetas sueltas.
El sistema, primero. Tres tableros lo definen antes que cualquier pantalla: color, con cada primario desplegado en escalas de 100 a 10 % · tipografía · y una biblioteca de componentes con tarjetas de evento, barras de navegación en sus tres estados, buscador en dos, campos de formulario con su estado de error incluido, botonera completa y una barra inferior de cuatro destinos.
Ese último detalle define el producto: Mapa, Eventos, Explorar, Perfil — y Mapa va primero.
El mapa es el producto. La pantalla central no lista actividades: las pone en el mapa de Montevideo. Y ahí aparece la decisión más interesante del proyecto — junto a los lugares y los eventos, las personas también son pines. El filtro tiene tres entradas: Lugar, Evento, Personas.
Por eso la acción central se llama tirar pin: no es marcar un sitio, es ponerse uno mismo en el mapa. El abrazo que el logo lleva adentro deja de ser una metáfora y se vuelve una función.
Esa interacción se diseñó con el cuidado que merece lo que sostiene un producto: estados encendido y apagado, dos versiones alternativas, y la pantalla de detalle que aparece al tocar un pin.
Los flujos completos. Onboarding en tres pasos, splash, registro e inicio de sesión, mapa, eventos y su detalle, locales, explorar, buscador, agenda con calendario, perfil, y una pantalla de mood para proponer planes según el ánimo.
El archivo conserva las versiones descartadas junto a las vigentes. No es desprolijidad: es el registro de que hubo iteración y de que las decisiones se tomaron comparando, no de una sola pasada.
Resultados
Serendipia está publicada en App Store y Google Play. El sistema que diseñamos dejó de ser un archivo: es un producto que la gente tiene instalado en el teléfono.
El desarrollo y la publicación de la app estuvieron a cargo del cliente, no de ZeniA. Nuestro alcance fue la identidad y el diseño de la aplicación hasta los wireframes finales.
Lo decimos porque importa en las dos direcciones. Un diseño que otro equipo puede tomar y llevar a producción sin rehacerlo es la prueba de que el sistema estaba bien construido — componentes, estados y flujos definidos, no pantallas bonitas sueltas. Y porque el alcance de cada trabajo se declara.