Análisis de Inspiraciones - UI/UX

Categorización de 208 Pantallas de Figma

Versión: 1.0
Fecha: 2026-04-05
Fuente: https://www.figma.com/design/dGTDHk4aHdIhvr7ugQlqxo/Untitled
Total Pantallas: 208+ referencias de diseño

Análisis por App Referenciada

1. Apple Health (Health Tracking - ~35 screens)

Categorías encontradas:

• Sleep Score: detalle con donut chart, métricas (duration, bedtime, interruptions)
• Notifications settings: toggles por categoría (Sleep, Medications, Blood Pressure, Mental Wellbeing, etc)
• Mental Wellbeing: state of mind, anxiety/depression risk, mindfulness minutes
• Onboarding: Health Details setup (name, DOB, height, weight)
• Steps tracking: bar charts, daily/weekly/monthly/yearly views
• Summary & Sharing tabs (bottom navigation)

Aplicabilidad a ADEN:

• Dashboard con Health Scores en donut charts
• Onboarding multistep con datos personales
• Notificaciones granulares por métrica
• Visualización de progreso (charts, timelines)

2. Pinterest (Visual Discovery + Onboarding)

Pantallas:

• Splash: lifestyle imagery (fashion, food, interiors)
• Hero section: “Create a life you love”
• CTAs: Sign up / Log in
• Copy tone: inspirational, lifestyle-focused

Aplicabilidad a ADEN:

• Hero imagery para onboarding (wellness, movement, food)
• Inspirational tone en copy
• Clean splash screens

3. Neo Financial (Auth + Security)

Pantallas:

• Enable Face ID screen: icon + explanation + button
• Minimal, trust-focused design

Aplicabilidad a ADEN:

• Security onboarding screens (MFA, Face ID)
• Minimal, clear CTAs

4. Headspace (Loading States + Progressive Disclosure)

Pantallas:

• Loading state: “Thinking carefully about which course is right for you…”
• Hero blue background with cloud shape
• Smooth transitions

Aplicabilidad a ADEN:

• Loading screens con messaging
• Progressive disclosure durante onboarding

5. Wise (Financial Transactions + Multi-step)

Pantallas:

• Card showcase (7Wise Visa Digital)
• Transaction confirmation: send/receive amounts, fees, timing
• Multi-step flows with clear hierarchy
• Success states (green buttons)

Aplicabilidad a ADEN:

• Lab order confirmation flows
• Multi-step transactions
• Clear pricing/timing info

6. TheFork (Social + Discovery)

Pantallas:

• Follow friends: phone contacts import
• Curated lists of profiles (food lovers)
• Follow/Following states
• Continue button progression

Aplicabilidad a ADEN:

• Family/Care circle onboarding
• Follow/invite patterns
• Profile discovery

7. Google Fit (Permissions + Health Integration)

Pantallas:

• Fingerprint recognition: progress indicator (0%)
• Permissions dialog: camera access for wellness features
• Clear explanations of data usage

Aplicabilidad a ADEN:

• Device permissions flows
• Data privacy explanations
• Integration setup

8. Gentler Streak (Activity Tracking + Gamification)

Pantallas:

• Monthly Recap: activity status with illustration (heart character)
• Timeline: Oct 1-30 with progress line
• Streak counter: “22 days”
• Tabs: Streak, Activities, Insights
• Celebratory tone

Aplicabilidad a ADEN:

• Monthly/Quarterly progress recap
• Streak mechanics (check-in consistency)
• Gamification: illustrations, positive messaging
• Tabs for Summary/Insights

9. Nike Run Club (Full-screen Experience + Immersion)

Pantallas:

• 6K Run: background image with overlay text
• Buttons: Download, Settings, Share
• Bottom navigation with icons
• Hero-driven layout

Aplicabilidad a ADEN:

• Full-width hero cards
• Overlay text on imagery
• Bottom tab navigation

10. Uber (Safety + Structured Preferences)

Pantallas:

• Safety Checkup: shield icon, concentric circles
• Preference options: radio buttons with descriptions
• Sections: Safety preferences, Help, Audio recording, Trusted Contacts, PIN
• Clear explanations per toggle

Aplicabilidad a ADEN:

• Settings/Preferences structured layout
• Radio button patterns
• Privacy/consent screens

UI Patterns Identificados

States & Variations Found

Loading States

• Headspace: Blue hero with messaging “Thinking carefully…”
• Apple Health: Skeleton cards with shimmer

Empty States

• “No Data Available” (Apple Health Mental Wellbeing)
• “No activities yet” (Gentler Streak)

Success States

• Green buttons (Wise: “Order your digital card”)
• Celebratory illustrations (Gentler: Monthly recap)

Error/Permission States

• Permission dialogs (Google Fit camera access)
• “Don’t Allow / OK” patterns

Recomendaciones para ADEN Design System

1. Adoptar de Apple Health

• Donut chart para Health Score principal
• Multi-step onboarding UI
• Notification settings structure
• Bottom tab navigation

2. Adoptar de Gentler Streak

• Streak mechanics + celebration messaging
• Monthly/Quarterly recap views
• Illustration style (celebratory, not clinical)
• Summary/Insights tab pattern

3. Adoptar de Nike Run Club

• Hero card layouts
• Overlay text on imagery
• Full-width hero sections

4. Evitar

• Uber’s structural patterns (safety-focused, too defensive)
• Wise’s complexity (financial, not health-appropriate)
• Google Fit’s sterile permission dialogs

5. Crear Original

• ADEN-specific: Health Score + RCV (Riesgo Cardiovascular)
• Personalization: “María’s 90-day cycle”
• Medical context: Lab results, doctor consultation booking
• Spanish copy + Colombia context (Medellín references)

Estructura Recomendada para design/screens/

design/screens/
 00-auth/                    # Apple Health + Neo Financial
    login
    signup
    enable-faceid
    mfa
    recover-password

 01-onboarding/              # Apple Health + Headspace
    splash
    loading-states
    health-details
    symptoms
    habits
    exams
    health-score-reveal
    plan-selection

 02-dashboard/               # Apple Health + Nike Run Club
    home
    health-overview
    check-in-hero
    notifications
    profile

 03-health-panel/            # Apple Health
    sleep-score
    mental-wellbeing
    fitness-activity
    nutrition
    vital-signs

 04-plans/                   # Wise + Gentler
    active-plans
    plan-detail
    recommendations
    progression

 05-labs/                    # Wise (flow pattern)
    lab-orders
    results-list
    result-detail
    order-confirmation

 06-family/                  # TheFork
    add-members
    family-circle
    member-profile
    shared-insights

 07-settings/                # Uber + Apple Health
    notification-prefs
    privacy-consent
    profile-settings
    data-export

 08-states/
    loading
    empty
    error
    offline
    permissions

 09-components/
     buttons
     cards
     charts
     tabs
     modals

Next Steps

1. Crear archivos .md para cada categoría (spec + link a referencias)
2. Validar contra ADEN design rules (colores, tipografía, spacing)
3. Mapear pantallas específicas a cada referencia
4. Documentar variantes (mobile, tablet, estados)
5. Crear Figma oficial con componentes ADEN basados en estas referencias

Responsable: UX Research
Fecha: 2026-04-05
Próxima revisión: Después de validación con equipo design