Mapeo: Inspiraciones → Design Flows & Research

Categorización de 208 Pantallas según ADEN Architecture

Versión: 1.0
Fecha: 2026-04-05
Fuente Figma: https://www.figma.com/design/dGTDHk4aHdIhvr7ugQlqxo/Untitled
Referencia: design/flows/ + design/research/

MAPEO POR DOCUMENTO EXISTENTE

1⃣ design/flows/onboarding

JTBD: “Quiero saber si estoy enfermándome antes de síntomas”
Steps: 6 (Datos → Médico → Estilo de Vida → Análisis → Agendar → Confirmación)

Imágenes Inspiradoras Encontradas

App	Pantalla	Componente	Aplicabilidad
Pinterest	Splash: “Create a life you love”	Hero imagery + aspirational copy	Step 0: Landing/splash antes del signup
Apple Health	“Set up Health Details”	Form campos (Name, DOB, Sex, Height, Weight)	Step 1: Datos Personales
Apple Health	Health Details (filled state)	Pre-filled values + optional fields	Step 1: Validación y progreso
Neo Financial	Enable Face ID	Minimal security screen	Step 2/6: MFA verification
Headspace	Loading state: “Thinking carefully…”	Blue hero + messaging + cloud shape	Entre steps: Progressive transitions
Noom pattern	Branching onboarding	Quiz-style questions vs. forms	All steps: Use conversational tone

Estructura Recomendada para ADEN Onboarding

Step 0: SPLASH (Hero + Inspirational)
  → "Vive mejor"
  → Imagery: wellness, salud preventiva
  → CTA: "Empezar" (referencia Pinterest)

Step 1: DATOS PERSONALES (Apple Health pattern)
  → Nombre, Edad, Peso, Género
  → Progressive validation
  → Skip optional fields option

Step 2: HISTORIAL MÉDICO (Conversational)
  → Chat-like questions (Ada Health pattern)
  → "¿Tienes diabetes en la familia?" 
  → Skip if not applicable

Step 3: ESTILO DE VIDA (Noom-style single question/screen)
  → Sueño, Ejercicio, Estrés
  → Progress bar between questions
  → Motivational copy

Step 4: PANEL DE ANÁLISIS (Selection-based)
  → "¿Qué biomarcadores te interesan?"
  → Multi-select checkboxes
  → Auto-explain: "Por qué es importante..."

Step 5: AGENDAR ANÁLISIS (Wise-style multi-step)
  → Clínica selección
  → Fecha/hora picker
  → Confirmation review

Step 6: CONFIRMACIÓN (Gentler-style celebration)
  → "¡Tu perfil está listo!"
  → Illustration
  → "Tus resultados aparecerán en 5-7 días"
  → CTA: "Mientras tanto, descubre tu dashboard"

2⃣ design/flows/dashboard

JTBD: “Quiero ver que estoy progresando”
Layout: Bento grid (Hero + Support cards + Context)

Imágenes Inspiradoras Encontradas

App	Pantalla	Componente	Aplicabilidad
Apple Health	Sleep Score detail	Donut chart + 3 metrics (Duration, Bedtime, Interruptions)	Hero card: Health Score 78
Apple Health	Sleep Score (timeline)	“Today, Sep 25” + detailed breakdown	Dashboard: Date-scoped view
Apple Health	Mental Wellbeing	State of Mind + collapsible sections	Card: Mental health tracking
Apple Health	Steps tracking	Bar chart (daily/weekly/monthly toggle)	Card: Activity progress
Nike Run Club	6K Run hero	Full-width image + overlay text + buttons	Hero: Check-in campaign card
Gentler Streak	Monthly Recap	Timeline (Oct 1-30) + progress line + illustration	Card: This week/month progress
Gentler Streak	Activity Status	Heart illustration + “22 days”	Card: Streak counter

Estructura Recomendada para ADEN Dashboard

HEADER (Sticky)
  "Buenos días, María"  |  [Notificaciones]  |  [Perfil]

HERO CARD (col-span-2, row-span-2)
  
   TU SALUD: 78            
   +10 vs hace 30 días     
   [Donut Chart]            ← Apple Health pattern
                           
   [VER DETALLE →]         
  

SUPPORT CARDS (col-span-2)
  
   PLAN DEL DÍA     
    Vitamina D3    
   0 de 4 completados
   [Ver plan]       
  
  
  
   PRÓXIMA CITA     
   Lab Control      
   15 Ene · 8 AM    
   [Recordatorio]   
  

CONTEXT CARDS (col-span-4+)
  
   TU PROGRESO (Esta Semana)  
   [Sparkline: Ejercicio]     
   [Sparkline: Sueño]          ← Apple Health pattern
   [Sparkline: Nutrición]     
   [Sparkline: Estrés]        
   vs hace 7 días ↑5%         
  
  
  
   EDAD BIOLÓGICA 
   42.8 años      
   -2.4 vs actual 
   '2.4 años joven'
   [VER DETALLE]  
  

QUICK ACTIONS
  [Mi Plan] [Mi Progreso] [Exámenes] [Trayectoria] [Chat Coach]

BOTTOM NAV ← Apple Health pattern
  [Summary] [Sharing]

3⃣ design/flows/check-in

JTBD: “Quiero registrar cómo me siento hoy”
Frequency: Diaria

Imágenes Inspiradoras Encontradas

App	Pantalla	Componente	Aplicabilidad
Apple Health	Mental Wellbeing: State of Mind	Emoji/mood selector (Neutral Moment)	Check-in: Mood selector
Gentler Streak	Streak tab with heart	Simple streak counter	Check-in success: Celebration
Nike Run Club	Download button + settings	Floating action button (FAB)	Quick check-in access

4⃣ design/flows/ciclo-90dias

JTBD: “Quiero ver mi progreso en 90 días (baseline → validación)”
Timeline: Baseline (Day 1) → Execution (Day 30) → Validation (Day 90)

Imágenes Inspiradoras Encontradas

App	Pantalla	Componente	Aplicabilidad
Gentler Streak	Monthly Recap: Oct 1-30	Timeline visualization + progress line	Ciclo: Visual progress over time
Apple Health	Steps: time range selector (D, W, M, 6M, Y)	Period toggle buttons	Ciclo: View baseline/current/final
Apple Health	“You averaged 1 day 14 hr of sleep”	Historical comparison	Ciclo: “Mejoraste X% desde día 1”

Estructura Recomendada

CICLO 90 DÍAS VISUAL
  
   TU CICLO PREVENTIVO                  
                                        
   Día 1  Día 30  Día 90    
                                   
    BASELINE    EJECUCIÓN    VALIDACIÓN 
                                        
   [Timeline con progress line]         
   Estás en: Día 42 (Ejecución)        
   Próxima revisión: Día 90             
  

COMPARA RESULTADOS
  Baseline (Día 1)    vs    Ahora (Día 42)    vs    Target (Día 90)
              
   Hemoglobina           Hemoglobina           Hemoglobina    
   13.2 g/dL        →    13.8 g/dL        →    Target: 14.0   
   (Normal-bajo)         (Normal)              (Óptimo)

5⃣ design/flows/alerts

JTBD: “Quiero saber si algo cambió importante en mi salud”
Pattern: Push notification + in-app banner

Imágenes Inspiradoras Encontradas

App	Pantalla	Componente	Aplicabilidad
Apple Health	Notifications settings	Toggle per category (Sleep, Meds, BP, Mental, Walking)	Alerts config: Granular preferences
Uber	Safety Checkup preferences	Radio buttons + descriptions	Alerts: Explanation per type

6⃣ design/research/01-dashboard-health-scores

Tema: Cómo presentan Health Score: Benchmarking Oura, WHOOP, Garmin, InsideTracker, Levels

Imágenes Inspiradoras Encontradas

App	Patrón	Aplicabilidad a ADEN
Apple Health	Donut chart (Duration/Bedtime/Interruptions)	ADEN Health Score: 3-6 métricas principales
Apple Health	“High/OK/Low” badges bajo score	ADEN: Status (Verde=Óptimo, Azul=Normal, Naranja=Revisar)
Apple Health	Detailed view: scroll to see more	ADEN: Donut → click → 6 dominios (Sangre, Ejercicio, Sueño, Nutrición, Estrés, Recuperación)
Apple Health	“About Sleep Score” section with education	ADEN: “¿Qué es tu Nivel de Salud?” → educación

7⃣ design/research/02-onboarding

Tema: Patrones de onboarding: Noom (96 screens, alta conversión), Ada Health (91% completion)

Imágenes Inspiradoras Encontradas

App	Patrón	Nota
Noom	“Una oración por pantalla”	Aplicable a todos los steps de ADEN
Noom	“Loading bars entre secciones”	Implementar transiciones con Headspace pattern
Ada Health	Chat-like conversational	ADEN Step 2 (Historial): Usar tone conversacional
Noom	Quiz de perfil conductual	ADEN: Step 3 (Estilo de Vida) como mini-quiz

8⃣ design/research/03-engagement-retención

Tema: Streaks, gamificación, notificaciones, retención a 90 días

Imágenes Inspiradoras Encontradas

App	Patrón	Aplicabilidad
Gentler Streak	Streak counter “22 days”	ADEN: “Llevas 42 check-ins seguidos”
Gentler Streak	Monthly recap with illustration	ADEN: Day 30 recap celebration screen
Gentler Streak	Heart illustration (celebratory)	ADEN: Use illustrations para momentos positivos
Gentler Streak	Tabs: Streak, Activities, Insights	ADEN Bottom nav: Summary, Sharing, Chat

9⃣ design/research/04-consulta-médica-portales

Tema: Portales de paciente, lab results, doctor ratings, órdenes médicas

Imágenes Inspiradoras Encontradas

App	Patrón	Aplicabilidad
TheFork	Follow friends / Add members	ADEN: Invite family members to care circle
TheFork	Curated lists (Food lovers)	ADEN: Curated recommendations from Health Coach
Wise	Transaction confirmation flow	ADEN: Lab order confirmation (fecha, costo, clínica)

ESTADOS GLOBALES (design/states.md)

Loading States

Headspace pattern: Blue hero + “Thinking carefully about which course is right for you…”
ADEN adaptation: “Calculando tu Health Score…” + skeleton loaders

Empty States

Apple Health pattern: “No Data Available” en secciones sin datos
ADEN adaptation: “No hay check-ins todavía. Comienza hoy.” + CTA

Error States

Google Fit pattern: Permission dialog + explanation
ADEN adaptation: “Necesitamos acceso a tu cámara para escanear documentos”

Offline States

Pattern: Grayed out content + “Conecta para ver actualizaciones”
ADEN: Permitir ver datos cacheados

EDGE CASES (design/edge-cases.md)

Permission Flows

Google Fit pattern: “GoogleFit Would Like to Access Camera”
ADEN: Face ID, Camera for document scanning

Validation Errors

Apple Health pattern: Inline errors para DOB < 18 años
ADEN: Errors en onboarding (edad, datos médicos)

Lab Processing Delays

Pattern from flows/onboarding: " Perfil Pendiente"
Show: Timeline, estimated completion, support chat

PRÓXIMOS PASOS

1. Crear `design/screens/` folder con archivos por flow:

design/screens/
 00-auth/
    login
    signup
    enable-faceid (Neo Financial ref)
    mfa
    recover-password

 01-onboarding/
    splash (Pinterest ref)
    step1-datos-personales (Apple Health ref)
    step2-historial-médico (Ada Health conversational ref)
    step3-estilo-vida (Noom quiz ref)
    step4-panel-análisis
    step5-agendar-análisis (Wise multi-step ref)
    step6-confirmacion (Gentler celebration ref)
    loading-states (Headspace ref)

 02-dashboard/
    home (Apple Health layout ref)
    health-score-detail (Donut chart)
    health-domains (6 dominios)
    progress-cards (Sparklines)
    biological-age
    plan-del-dia
    próxima-cita
    ciclo-90dias-view (Gentler timeline ref)

 03-check-in/
    mood-selector (Apple Health mental wellbeing)
    data-entry
    success-celebration (Gentler streak ref)

 04-labs/
    lab-orders (Wise multi-step ref)
    results-list
    result-detail
    order-confirmation

 05-family/
    add-members (TheFork ref)
    family-circle
    shared-insights

 06-settings/
    notification-prefs (Uber radio buttons ref)
    privacy-consent
    profile-settings
    data-export

 07-states/
     loading (Headspace ref)
     empty (Apple Health ref)
     error (Google Fit permission ref)
     offline
     permissions

2. Documentar cada screen con:

Description
JTBD reference
Key components (donut chart, toggle, etc)
Data model
States (loading, empty, error)
Inspiration app + pattern

3. Validar contra ADEN rules:

Color palette (solo azul #0f2fc7, crema, positive/negative)
Typography (Google Sans Flex)
Spacing (8px grid)
Icons (HugeIcons only)
Spanish copy (Colombian Spanish)

4. Crear Figma oficial con componentes ADEN basados en estas referencias

Responsable: UX Architecture
Última actualización: 2026-04-05
Próxima revisión: Después de crear design/screens/