Design

ADEN — Arquitectura UX & Design System

Documentación completa para diseñadores, ingenieros y agentes

Producto: ADEN — Plataforma de medicina preventiva personalizada
Alcance: Portal del paciente (app móvil)
Metodología: OOUX + JTBD + User Flows
Última actualización: 2026-04-05

Índice

Estrategia y Lifecycle

Documento Qué Define
Lifecycle 11 fases del paciente: invitado → activo → renovado → referidor
Funnel de Conversión 12 etapas de conversión: web → app → ciclo → renovación (métricas target)
Landing Pages 9 vistas web necesarias: home, planes, ciencia, invitación, blog

Arquitectura UX

Documento Qué Define
Objetos OOUX 9 objetos con propiedades, acciones, relaciones, estados
Jobs-to-be-Done 7 JTBD priorizados con métricas y riesgos
Personas 6 Personas con intentions, ciclos, escenarios emotivos, lifecycle maps
Navigation Mapa de sitio, 5 tabs, information scent, breadcrumbs

Flujos de Usuario (13 flujos)

Flujo Ruta Prioridad
Auth Login → Registro → Verificación → MFA P0
Onboarding Welcome → 6 steps → Perfil Pendiente → Dashboard P0
Dashboard Bento grid, Hero Health Score, Plan del Día P0
Planes Plan del día, plan completo 90d, suplementos, ciclo, reporte P0
Check-in Diario Dashboard → Modal → 4-5 preguntas → Streak P0
Progreso Nivel salud, edad biológica, exámenes, proyecciones, trayectoria P1
Alertas 5 tipos, severidad, notificaciones P1
Consulta Médica 8 fases: recordatorio → consulta → órdenes → follow-up P1
Laboratorios Upload, OCR, resultados, detalle biomarcador, RCV P1
Health Coach Chat AI, keyword highlighting, escalamiento a médico P2
Perfil & Ajustes Perfil, notificaciones, dispositivos, privacidad, GDPR P2
Ciclo 90 Días Baseline → Ejecución → Cierre → Análisis P1
Familia Dependientes, cuidador, permisos (Post-MVP) P3

Design System

Documento Qué Define
Design System Paleta dual (dark/light), tipografía, componentes, efectos, fotografía
Interactions Gestos, animaciones, microinteracciones, feedback, offline
Accessibility WCAG AA, contraste, screen readers, daltonismo, health literacy
Copy Guidelines Voz y tono, glosario médico, microcopy, framing positivo

Reglas de Negocio

Documento Qué Define
Estados Globales Estados globales: loading, empty, error, offline
Edge Cases 9 casos especiales, validaciones, rate limits, GDPR

Research UX

# Documento Tema
01 Dashboard & Health Scores Oura, WHOOP, Garmin, InsideTracker, Levels
02 Onboarding Noom (96 screens), Ada Health (91%), friction data
03 Engagement & Retención Streaks, Duolingo (-21% churn), notificaciones
04 Consulta Médica MyChart, Zocdoc, lab results (PMC), doctor ratings
05 Mercado LATAM Colombia, EPS, Ley 1581, competidores, adopción
06 Recomendaciones Síntesis: qué adoptar, cambiar, evitar
07 UX Copy Microcopy, health literacy, anxiety reduction
08 Color & Visual Psicología del color, dark mode, tipografía
09 Usuarios & Personas 4 personas, behavior change, PAM, pricing
10a Inspiraciones UI Análisis visual de referencias
10b Mapeo a Flows Inspiraciones aplicadas a flujos ADEN

Product Analysis (Matriz Relacional)

Documento Qué Define IDs
Overview Índice y guía de cross-references —
Targets 6 segmentos de usuario con prioridad PAT-1…6
Intentions 25 intenciones por fase del ciclo 90d PAI-1…25
Services 12 servicios que ofrece ADEN PAS-1…12
Use Cases 8 escenarios reales con métricas PAU-1…8
Modules 12 módulos con features por módulo PAM-1…12
Versions 5 versiones: Alpha → v1.5 Family PAV-1…5
Differentiators Datos duros del engine: 1,620 cruces en <5ms, 323 colisiones, calibración latina —
Narrative 6 pilares narrativos para marketing, copy comercial, claims validados —

Screens (65 pantallas documentadas)

Sección Screens Descripción
Auth 5 Login, registro, verificación, forgot, MFA
Onboarding 8 Welcome → 6 steps → perfil pendiente
Dashboard 5 Inicio, hero score, plan card, cita card, alertas
Progreso 7 Overview, nivel salud, edad bio, exámenes, biomarcador, proyecciones, trayectoria
Planes 5 Plan día, plan completo, suplemento, ciclo, reporte
Consulta Médica 10 Recordatorio → sala espera → consulta → órdenes → calificación → follow-up
Laboratorios 5 Upload, OCR, resultados, detalle, comparación
Health Coach 3 Chat, primer uso, historial
Check-in 3 Modal rápido, reflexión, completo
Alertas 2 Lista, detalle
Perfil & Ajustes 7 Perfil, datos, notificaciones, dispositivos, privacidad, GDPR, ayuda
Familia 5 Overview, agregar, dependiente, cuidador, permisos (Post-MVP)

Cada screen documenta: features, states (loading/empty/error/offline + específicos), datos mostrados (mapped a OOUX), acciones, navegación.

Estadísticas

Métrica Valor
Archivos activos 114
Objetos OOUX 9
Jobs-to-be-Done 7 (priorizados P0→P3)
Flujos de usuario 13 (con happy + error paths)
Documentos de research 11 (100+ fuentes)
Personas 6 (con intentions, ciclos y lifecycle maps)
Estados globales 4 (loading, empty, error, offline)
Edge cases 9 documentados

Cómo Usar

Para Diseñadores

  1. Leer Design System para paleta, componentes y reglas visuales
  2. Consultar Copy Guidelines para tono y microcopy
  3. Revisar Flujos de Usuario para entender rutas completas
  4. Consultar Accessibility para requisitos WCAG

Para Ingenieros

  1. Leer Objetos OOUX para schema de datos
  2. Consultar Interactions para implementar animaciones y gestos
  3. Usar Design System para Tailwind classes y componentes
  4. Revisar Edge Cases para validaciones y error handling

Para Agentes AI

  1. Leer Jobs-to-be-Done para entender motivaciones del usuario
  2. Consultar Copy Guidelines para generar copy correcto
  3. Revisar Design System para generar UI alineada
  4. Usar Research para respaldar decisiones

Decisiones Clave

Decisión Elección Respaldo
Color primario #0f2fc7 (Persian Blue 800) research/08
Modo visual Dual: dark (dashboard) + light (formularios) research/08
Background dark #0A0F1E (Deep Navy) research/08
Background light #F5F5F0 (Cream) Validado por Noom, Headspace
Efectos Gaussian blur, glassmorphism, glow Dirección de marca
Tipografía Google Sans Flex (variable) Optimizada para datos de salud
Iconos HugeIcons exclusivamente CLAUDE
Idioma Español colombiano, tuteo research/05, research/07
Accesibilidad WCAG 2.1 AA mínimo Accessibility
Streak Flexible con freezes (no all-or-nothing) research/03
Lab results Barras horizontales + 3 zonas + harm anchors research/04

Responsable: UX Strategy