Design
5 momentos
Principios
Para qué

Los valores y creencias que fundamentan cada decisión de diseño de aden.

Audiencia

Todo el equipo — diseño, producto, ingeniería y stakeholders.

Momentos de Verdad: aden

Los 5 momentos que definen si aden se convierte en parte de la vida de alguien.

Cada uno de estos momentos es una bisagra emocional. Lo que el usuario siente después de cada uno determina si confía, se queda y recomienda — o si abandona.

Cómo usar este documento

Antes de diseñar o modificar cualquier pantalla que involucre uno de estos momentos:

  1. Leer el contexto emocional del momento
  2. Verificar que el diseño cumple con los principios listados
  3. Revisar los anti-patrones para evitar errores conocidos
  4. Validar que la emoción de salida es la correcta

Momento 1: Primer score de salud

Cuándo ocurre: María termina el onboarding, recibe sus resultados de laboratorio, y abre la app por primera vez para ver su score.

Contexto emocional

María no sabe qué esperar. Tiene miedo de ver algo malo, pero también curiosidad. Los próximos 3 segundos determinan si aden es “mi app de salud” o “otra app más.”

  • Emoción de entrada: Anticipación + ansiedad latente
  • Emoción de salida deseada: “Ahora sé dónde estoy. Y sé qué hacer.”

Principios de diseño

Principio Aplicación
Contexto antes que número El score no aparece solo. Aparece con una escala visual clara y un mensaje que lo interpreta
Color constante El score siempre es azul (#0f2fc7). Nunca rojo, nunca amarillo. Eliminar la asociación semáforo
Agencia inmediata Debajo del score, el plan del día. “Esto es lo que puedes hacer hoy”
Comparación con futuro, no con otros “Tu score puede llegar a 85 en 90 días” — no “el promedio es 72”

Anti-patrones

No hacer Por qué
Mostrar el número sin contexto Un 74 sin explicación genera ansiedad: ¿es bueno? ¿es malo?
Usar colores de semáforo (rojo/amarillo/verde) Crea juicio instantáneo. El azul permite reflexión
Comparar con otros usuarios La salud es personal, no competitiva
Abrir con una lista de “problemas encontrados” La primera impresión debe ser de claridad, no de alarma

Pantallas involucradas

  • screens/dashboard/inicio — Hero score
  • screens/dashboard/nivel-salud-preview — Desglose inicial
  • screens/progreso/nivel-salud — Detalle completo

Momento 2: Primer resultado que requiere atención

Cuándo ocurre: Los laboratorios de María muestran colesterol LDL elevado (142 mg/dL). Es la primera vez que Aden le comunica algo que “no está bien.”

Contexto emocional

Este es el momento más delicado de toda la experiencia. La información de salud sin agencia genera ansiedad. María puede espiralizarse en Google, entrar en pánico, o — si aden lo hace bien — sentirse acompañada y con un camino claro.

  • Emoción de entrada: Preocupación, vulnerabilidad
  • Emoción de salida deseada: “Entiendo qué significa. Sé qué puedo hacer. No estoy sola.”

Principios de diseño

Principio Aplicación
Estructura de comunicación de riesgo Siempre: Contexto → Dato con comparación → Significado → Agencia → Red de apoyo
Trayectoria, no foto instantánea “Estaba en 138, ahora 142. Veamos la tendencia.” — No solo el número actual
Acción concreta “Tu médico puede ajustar la estrategia en tu consulta del martes”
Calma visual Tipografía regular (no bold alarmante), espacios amplios, tono blue-on-dark

Estructura obligatoria del mensaje

1. Contexto: Qué es este biomarcador, en lenguaje humano
2. Dato:     Dónde estás vs dónde estabas (tendencia)
3. Significado: Qué implica, sin catastrofismo
4. Agencia:  Qué puedes hacer ahora
5. Apoyo:    Quién más te acompaña (médico, plan Aden)

Ejemplo aplicado:

“Tu colesterol LDL está en 142 mg/dL. Hace 90 días estaba en 138 — ha subido ligeramente. Este nivel merece atención pero es modificable. Tu plan incluye ajustes de nutrición, y tu médico puede revisar esto en tu consulta del martes.”

Anti-patrones

No hacer Por qué
Usar “ALERTA” o “ATENCIÓN” en mayúsculas Dispara respuesta de pánico
Mostrar el dato sin tendencia Un 142 aislado es más aterrador que “subió de 138 a 142”
Dar información sin siguiente paso Información sin agencia = nocebo
Usar rojo como color dominante Reservar rojo para situaciones verdaderamente críticas (< 5% de casos)

Pantallas involucradas

  • screens/laboratorios/detalle-resultado — Resultado individual
  • screens/alertas/detalle — Alerta con contexto
  • screens/progreso/detalle-biomarcador — Vista longitudinal

Momento 3: Primera validación a 90 días

Cuándo ocurre: Pasaron 90 días. María hizo su segundo panel de laboratorios. Los resultados llegan. ¿Funcionó el plan?

Contexto emocional

Este es EL momento de retención. El 92% de usuarios que ven mejora medible en sus primeros 90 días continúan al segundo ciclo. El esfuerzo sin validación mata la adherencia.

María lleva 3 meses siguiendo un plan. Tomó suplementos. Ajustó su alimentación. Ahora necesita saber: ¿valió la pena?

  • Emoción de entrada: Expectativa + “por favor que haya funcionado”
  • Emoción de salida deseada: “Mi esfuerzo se traduce en resultados reales. Quiero seguir.”

Principios de diseño

Principio Aplicación
Celebrar con datos, no con confeti “Tu LDL bajó de 142 a 128. -10% en 90 días.” — No “¡Felicidades!”
Comparación antes/después prominente Dos columnas o delta visual: Ciclo 1 vs Ciclo 2
Reconocer el esfuerzo “El plan funcionó” — atribuir la mejora al trabajo del usuario, no a aden
Proyección del siguiente ciclo “Si continúas, proyectamos que llegarás a 110 en el próximo ciclo”

Anti-patrones

No hacer Por qué
Gamificación (badges, trofeos, confeti) aden no es fitness. La validación es científica, no lúdica
Omitir lo que no mejoró La honestidad construye confianza. Mostrar mejoras Y áreas pendientes
Atribuir la mejora solo a aden El usuario hizo el trabajo. aden coordinó. El crédito es compartido
Pedir renovación antes de mostrar resultados Primero el valor, después la propuesta comercial

Pantallas involucradas

  • screens/planes/reporte-90dias — Reporte completo del ciclo
  • screens/progreso/overview — Vista comparativa
  • screens/planes/renovación — Propuesta de siguiente ciclo

Momento 4: Compartir datos con el médico

Cuándo ocurre: María tiene consulta. El médico abre el resumen que Aden preparó. Este momento define si aden es “una app seria” o “otra app de salud.”

Contexto emocional

Dos personas en la sala. María quiere que su médico valore la información de aden. El médico quiere información útil, no marketing disfrazado de reporte.

  • Emoción de entrada (paciente): “Espero que mi médico le preste atención”
  • Emoción de entrada (médico): “¿Esto es útil o me hace perder tiempo?”
  • Emoción de salida deseada: “Este resumen me ahorró 15 minutos y me dio contexto que no tenía”

Principios de diseño

Principio Aplicación
Formato que un médico respete Estructura clínica: biomarcadores con tendencias, alertas priorizadas, medicamentos actuales
Sin decoración innecesaria El resumen médico es denso y funcional. No hero cards ni scores emocionales
Fuentes visibles Cada dato con origen: “Lab ABC, 2026-03-15” — no “según aden”
Alertas accionables, no informativas “Colisión gen-fármaco: CYP2C19 + omeprazol. Considerar alternativa.”

Anti-patrones

No hacer Por qué
Diseñar el resumen médico como la app del paciente El médico no necesita emociones, necesita datos
Usar lenguaje de wellness (“tu viaje de bienestar”) Destruye credibilidad clínica instantáneamente
Omitir fuentes y fechas Sin procedencia, el médico descarta la información
Sobrecargar con 30 biomarcadores Priorizar: alertas primero, contexto después, detalle bajo demanda

Pantallas involucradas

  • screens/consulta-médica/pre-consulta — Vista paciente antes de llegar
  • Portal médico: resumen de paciente, alertas priorizadas, historial longitudinal

Momento 5: Agregar un familiar

Cuándo ocurre: María quiere agregar a su padre Pedro (72 años) para acompañar su salud. O Pedro quiere que María pueda ver sus alertas.

Contexto emocional

Este momento toca la privacidad, la autonomía y el amor familiar simultáneamente. ¿Cuidar es vigilar? ¿Acompañar es invadir? aden debe navegar esta tensión con elegancia.

  • Emoción de entrada (quién agrega): “Quiero cuidar a mi ser querido sin invadirlo”
  • Emoción de entrada (quién es agregado): “¿Me están controlando o cuidando?”
  • Emoción de salida deseada: “Los dos tenemos claro qué comparte cada uno y por qué”

Principios de diseño

Principio Aplicación
Consentimiento explícito y granular El familiar agregado elige exactamente qué compartir: alertas, scores, todo, nada
Visibilidad sin control El cuidador ve resúmenes y alertas, pero no puede modificar planes ni datos
Tranquilidad como emoción principal La vista del cuidador dice “todo estable” o “hay algo que revisar” — no un dashboard completo
Dignidad del familiar Pedro ve que comparte datos. Puede revocar en cualquier momento. Su autonomía es sagrada

Anti-patrones

No hacer Por qué
Dar al cuidador acceso total por defecto Viola la autonomía del familiar. Siempre opt-in granular
Replicar el dashboard completo para el cuidador Sobreinformación genera ansiedad innecesaria. Resumen + alertas es suficiente
Usar lenguaje de “monitoreo” o “supervisión” “Acompañar” y “cuidar” — no “monitorear” ni “controlar”
Omitir la posibilidad de revocar El familiar debe poder desconectar en cualquier momento, sin explicaciones

Pantallas involucradas

  • screens/familia/agregar — Flujo de invitación
  • screens/familia/permisos — Configuración granular
  • screens/familia/modo-cuidador — Vista del cuidador
  • screens/familia/dependiente-dashboard — Resumen del familiar

Resumen: Emociones de salida

Momento El usuario debe sentir
Primer score “Ahora sé dónde estoy.”
Primer resultado difícil “Entiendo qué significa y qué puedo hacer.”
Validación 90 días “Mi esfuerzo funcionó. Quiero seguir.”
Compartir con médico “Mi médico tiene todo el contexto.”
Agregar familiar “Cuido a quién amo sin invadir su espacio.”

Estos momentos son la experiencia. Todo lo demás es infraestructura que los hace posibles.