Un sistema de diseño para una app que quiere que te vayas
Ciento cincuenta y nueve preguntas de psicometría convertidas en doce pantallas de móvil, con una paleta donde cada color tiene una sola jurisdicción y ninguna pantalla pide más atención de la que necesita.
Construido y sin lanzar: la app está en Expo con los tres instrumentos, el motor de compatibilidad y el pago integrados, y no ha salido a las tiendas. Las seis imágenes son renders del canvas de diseño, no capturas de producción.
Un sistema serio que se leía clínico: azul eléctrico, un coral de urgencia y un serif de revista para hablar de tu vida amorosa.
La misma disciplina anti-dark-pattern con una atmósfera que no intimida, y cada cambio con su riesgo escrito al lado.
Ethos empareja por compatibilidad psicológica y cobra una sola vez, porque su éxito es que encuentres a alguien y te vayas.
Un producto que rechaza el enganche no puede parecerse a los que viven de él, pero tampoco puede parecer una consulta médica. Serio y frío son la misma decisión mal tomada.
Que la app se sienta cálida sin recuperar un solo mecanismo de las apps de citas, y que el cambio se pueda evaluar con los riesgos delante en vez de a ojo.
El registro no cuesta nada y el pago llega después del resultado, así que las descargas y las cuentas no dicen nada. La única cifra que se rompe si el diseño falla es cuánta gente aguanta ciento cincuenta y nueve preguntas hasta el final.
A quién tenía delante antes de diseñar nada.
Elena
Treinta y ocho años, ha borrado tres apps de citas
Vuelve a intentarlo cada dos años y siempre acaba igual: la app le funciona mejor cuanto más tiempo pasa dentro, así que el producto y ella quieren cosas distintas. No necesita que le expliquen qué es el apego ansioso. Necesita creerse que esto no es lo mismo con otro color.
Una razón para fiarse antes de dar una hora de su tiempo y sus respuestas más íntimas.
Cualquier cosa que se parezca a un juego. Una racha, una insignia o un contador le confirman que la app vive de tenerla dentro, y a partir de ahí el rigor del test da igual.
«Si me pide que vuelva mañana para no perder nada, ya sé lo que es.»
Como persona que abre la app en la calle con el móvil al sol quiero que el botón principal se lea, para no tener que adivinar cuál es la acción.
IPIP-NEO de 120 ítems, el PVQ-21 de Schwartz y 18 de apego, en una pantalla de móvil que no puede parecer un formulario.
Onboarding, test, resultado, compatibilidades, tablero, conversación, perfil y paywall, todas construidas.
Cuatro formas de enseñar el resultado y dos de enseñar el tablero, antes de elegir una de cada.
El primario nuevo es claro. Con texto blanco daba 1,9:1 y no pasaba ni WCAG A, así que todos los botones invirtieron el texto.
El color no era decoración: era la lista de permisos.
El sistema anterior no estaba mal dibujado, estaba diciendo otra cosa. Rehacerlo fue sobre todo repartir jurisdicciones: qué puede hacer cada color, y qué deja de poder hacer el resto.
- el sistema
- cuatro variantes
- el tablero
- las pantallas
- antes y después
- 01
el sistema
Cuatro colores con una función cada uno y ocho neutros fríos. El azul decide, el ámbar pesa, el cian apoya y el slate amortigua.
La decisiónEl primario pasó de un azul eléctrico saturado a un azul cielo claro, y esa sola decisión cambió todos los botones de la app: el blanco sobre el azul nuevo da 1,9:1 y no pasa ni el nivel A. La regla quedó escrita como crítica en el sistema, no como recomendación.
- 02
cuatro variantes
La misma respuesta del backend, ejes y descarriladores incluidos, contada de cuatro maneras: editorial, diagramática, cinemática y modular.
La decisiónLa cinemática era la más bonita de las cuatro y se cayó sola: su hero es un degradado, y la primera prohibición del sistema es que no hay degradados. Sirvió para eso, para que la regla se probara contra la variante que más costaba descartar. Ganó el hero editorial de la A con el dashboard modular de la D.
- 03
el tablero
La parte social sin perfiles ni fotos: una pregunta al día, respuestas anónimas por defecto y el autor revelado al interactuar, no al pagar.
La decisiónAquí es donde vive el paywall dentro del contenido, y es el sitio donde más fácil habría sido hacer trampa. El score de compatibilidad de cada pensamiento se ve que existe pero no se lee, y como React Native no soporta el desenfoque de CSS, el bloqueo se dibuja con dos puntos y una etiqueta en vez de emborronar el número. Sin contador, sin oferta que expira.
- 04
las pantallas
El sistema aplicado al recorrido entero: entrar, contestar, leer tu resultado, ver con quién encajas y decidir si pagas.
La decisiónUna cosa clara por pantalla, que es el principio más caro de los cinco. El paywall es el que mejor lo demuestra: en lugar del argumento de venta habitual lleva una tarjeta que dice que el éxito del producto es que encuentres pareja y te vayas, y que por eso pagas una vez.
- 05
antes y después
Los dos sistemas uno al lado del otro y una tabla con lo que cambia, lo que se queda y el riesgo de cada cambio.
La decisiónLa columna que hacía falta era la de riesgo. Siete filas, y una dice que la atmósfera nueva puede leerse como menos seria, que es exactamente el argumento de quien no quería el cambio. Una propuesta que solo enseña lo que gana no se puede evaluar, se puede aprobar o no, que no es lo mismo.
El primario nuevo es claro, y eso convierte una regla de contraste en una regla de producto: si el color más visible de la paleta no puede llevar texto blanco, deja de poder usarse a ojo.
- El texto sobre el primario #66C4FF es siempre tinta #0C1F2E. En blanco da 1,9:1 y no pasa ni el nivel A; en tinta da 9,4:1 y pasa AAA.
- El ámbar #FFC067 no aparece nunca en un CTA. Marca peso emocional, y un color que sirve para todo deja de señalar nada.
- Ningún estado depende solo del color: el eje más fuerte lleva su etiqueta además del ámbar, y el descarrilador lleva su nivel escrito.
- Cuando el fondo ya es azul, el botón es tinta con texto azul. Dos azules apilados no son jerarquía.
El criterio que costó defender es el segundo. El ámbar es el color más ruidoso de la paleta y el movimiento comercial obvio es gastarlo en el botón que cobra. Pero solo hay un color para el peso emocional, y el sitio donde de verdad hace falta es el eje que explica cómo te comportas bajo tensión, no el botón de 4,99 €.
Empecé pensando que el encargo era una paleta nueva y acabó siendo una lista de permisos. En cuanto escribí que el ámbar podía estar en un botón de pago, dejó de poder marcar la parte del resultado que de verdad pesa: un color no puede significar dos cosas, y decidir cuál de las dos es la que se queda es casi todo el trabajo.
