# Resumen del diseño de UX

# Propósito

Este directorio contiene los artefactos de diseño de UX de GreenGrass — una plataforma para gestionar elecciones políticas de base en el Sur Global. La fase de diseño de UX viene después de completar 12 especificaciones de producto y un documento de arquitectura del sistema.

El reto central de UX: 10 arquetipos distintos, en contextos radicalmente diferentes, comparten una sola aplicación. Un voluntario que toca puertas con un Android de gama baja en la India rural necesita una interfaz completamente distinta de la de un Administrador de la organización que configura los ajustes de cumplimiento en una computadora de escritorio en Puerto Rico. La UX tiene que servir a los dos sin ceder con ninguno.

# Orden de lectura

# Fase 1: arquitectura de la información

Empieza aquí. Los documentos de arquitectura de la información definen la estructura global de la que cuelga todo lo demás.

1. Modelo de navegación — Cómo la plataforma organiza sus funcionalidades en una estructura navegable. Define el marco de escritorio (híbrido: barra superior + barra lateral), la disposición en móvil (pestañas inferiores) y el modo de campo (pantalla completa exclusiva). El documento de arquitectura de la información más importante.

2. Inventario de pantallas — Catálogo completo de todas las pantallas de la plataforma (~240 pantallas en 22 áreas funcionales). Cada entrada identifica los arquetipos, la capacidad de funcionar sin conexión y la optimización para móvil. La referencia maestra para el trabajo de wireframes y la definición del alcance de la implementación.

3. Vistas por arquetipo — Cómo la plataforma se muestra distinta para cada uno de los 10 arquetipos. Define las pantallas de inicio, las secciones de la barra lateral, las pestañas en móvil y lo que cada arquetipo no ve. La especificación de la "UX adaptable al rol".

4. Estructura de URL — Mapea el inventario de pantallas a las rutas de SvelteKit. Define seis layout groups (grupos de rutas que comparten un marco, sin afectar la URL) — public, auth, app, field-mode, portal, wizard —, los patrones de enrutamiento, las guardias de autenticación y las rutas capaces de funcionar sin conexión.

# Fase 2: patrones globales

Patrones de interfaz recurrentes que aplican a toda la plataforma.

5. Catálogo de patrones — 20 patrones de interfaz recurrentes: vistas de lista, vistas de detalle, constructores, formularios, asistentes, paneles, mapas, herramientas de registro de entrada, modo de campo y más. Aspectos transversales: estados vacíos, estados de carga, estados de error, accesibilidad.

6. Patrones sin conexión y de sincronización — Cinco estados de conexión, indicadores de actualidad de los datos, cola de cambios pendientes, resolución de conflictos, estrategia de precarga, atención al consumo de batería y de datos, ciclo de vida de la sincronización del turno.

7. Patrones de notificaciones — Centro de notificaciones, cuatro niveles de prioridad, canales de entrega (en la aplicación, push, correo, SMS), valores predeterminados por arquetipo, resúmenes por correo, comportamiento de las notificaciones el día de elecciones, No molestar.

8. Patrones de búsqueda — Búsqueda global con búsqueda predictiva, búsqueda contextual por área funcional, patrones de filtrado, búsquedas guardadas, restricciones que el cifrado impone a la búsqueda (organizaciones con BYOK — Bring Your Own Key, la organización controla su propia llave de cifrado).

9. Patrones de ajustes y ayuda — Jerarquía de ajustes en tres niveles (organización/funcionalidad/personal), paneles de ayuda contextual, base de conocimiento, concierge de IA, cambio de idioma, flujos de incorporación, atajos de teclado.

10. Patrones de UX de seguridad — Reglas de saneamiento del modo de coacción por área funcional, ceremonia de generación de la llave BYOK, comportamiento del botón de pánico, flujos de autenticación con passkey, gestión de sesiones, recuperación mediante contactos de confianza, autorización de dispositivos.

# Fase 3: fundamentos del sistema de diseño

Los fundamentos visuales y de componentes.

11. Fundamentos del sistema de diseño — Escala de espaciado de 8px, sistema de tokens de color semántico, escala tipográfica Inter, cuadrícula de 4/8/12 columnas, capas de elevación, radio de borde, iconografía Lucide, tokens de movimiento, escala de z-index, modos de densidad.

12. Estrategia de temas — Identidad visual por organización (color + logo), generación automática de colores derivados, cascada de propiedades personalizadas de CSS, RTL mediante propiedades lógicas de CSS, mapeo de tokens del modo oscuro, modo de alto contraste, modo de texto grande, movimiento reducido, capas de composición del tema.

13. Inventario de componentes — ~125 componentes en 13 categorías: primitivas, tipografía, botones, formularios, maquetación, navegación, presentación de datos, retroalimentación, superposiciones, mensajería, modo de campo, panel, especializados. Convenciones de nombres, definiciones de estado, patrones de composición.

14. Estrategia de diseño adaptable — Cinco puntos de quiebre (640/768/1024/1280/1536px), CSS con prioridad móvil, tablas de adaptación de componentes, uso de las API nativas de Capacitor, áreas seguras, presupuestos de rendimiento (150KB de JS, 2s de FCP en 3G), estrategia de división de código, matriz de pruebas.

# Fase 4: wireframes

Especificaciones de pantalla detalladas, con wireframes en ASCII para las pantallas y los flujos clave. Listas para implementar. Los documentos de wireframes están todavía solo en inglés, así que estos enlaces llevan a las páginas en inglés.

15. Marco de navegación — Marco de escritorio (barra lateral desplegada/plegada, panel de detalle, bandeja de notificaciones, RTL), marco móvil (barras de pestañas por arquetipo, menú hamburguesa, hoja inferior "Más"), marco del modo de campo (lista de recorrido, ficha de puerta, mapa, ciclo de vida del turno), marco del asistente, marco del portal de simpatizantes. Transiciones entre puntos de quiebre, especificaciones de interacción, notas de accesibilidad.

16. Paneles — Los 11 paneles: Panel general de la campaña (Administrador de la organización), Panel de operaciones de campo (Director de campo), Panel de recaudación de fondos (Director de finanzas), Panel de comunicaciones (Director de comunicaciones), Panel de voluntarios (Coordinador de voluntarios), Panel de calidad de datos (Gestor de datos), Panel de cumplimiento (Director de finanzas), Panel del centro de mando de GOTV (Get Out The Vote — movilización del voto; día de elecciones, actualización automática, modo oscuro), Panel del líder de equipo, Panel del candidato (curado y simplificado), Panel de la alianza (referencia cruzada). Estados vacíos, esqueletos de carga.

17. Modo de campo — Ciclo de vida completo del turno: verificación previa al turno, lista de recorrido (vistas de lista y de mapa), ficha de puerta con guion y captura de la respuesta, preguntas de seguimiento, resultado rápido "No estaba". Variante de jornada de llamadas, variante de inscripción de votantes, ficha de puerta de GOTV, flujo de solicitud de transporte. Confirmación de fin de turno, pantalla de sincronización, balance del turno. Recuperación tras un fallo. Especificaciones de las áreas táctiles.

18. Puesta en marcha e incorporación — Asistente de configuración de la organización (5 pasos: autenticación, perfil de la organización, invitaciones al equipo, configuración, revisión y lanzamiento), Incorporación de voluntarios (4 pasos: cuenta, recorrido, capacitación, listo), Asistente de generación de llaves BYOK (5 pasos, con el reparto de secreto de Shamir). Lista de verificación "Primeros pasos" posterior al asistente.

19. Mensajería — Vista dividida en escritorio (lista de conversaciones + hilo), flujos a pantalla completa en móvil, redacción, informes al candidato (estructurados y con formato), solicitudes de aprobación (aprobar/rechazar/comentar en línea), canal del centro de mando (día de elecciones, alertas del sistema, reportes de problemas), mensajería sin conexión, indicadores de cifrado.

20. Portal de simpatizantes — Página pública de donación (sin autenticación, con la identidad visual de la organización), confirmación de la donación, inicio del portal, historial de donaciones con gestión de las recurrentes, eventos con confirmación de asistencia, preferencias de comunicación, página pública del evento. Niveles de autenticación: enlace mágico y cuenta completa.

21. Alianza — Panel de la alianza (métricas agregadas + desglose por organización, escritorio + móvil), Lista de miembros con panel de detalle, Formulario y cola de solicitudes de afiliación, Configuración del intercambio (vistas por categoría y por organización), Asistente de configuración de campaña conjunta (4 pasos, 4 tipos de campaña, 3 modelos de gobernanza), Analítica compartida (gráficos y tablas entre organizaciones), Coordinación de GOTV en la alianza (centro de mando entre organizaciones el día de elecciones). Estados vacíos para cuando no hay alianza, para la afiliación pendiente y para la alianza nueva.

22. CRM / Personas — Lista de contactos (filtrable, con columnas adaptables al arquetipo, escritorio + móvil), Detalle del contacto (registro unificado con pestañas propias de cada arquetipo, línea de tiempo de actividad, parcial sin conexión), Crear/editar contacto (revelación progresiva, detección de duplicados al guardar), Constructor de segmentos (constructor visual de consultas con vista previa en vivo), Lista de segmentos, Cola de revisión de deduplicación (agrupada por confianza), Comparación lado a lado de la deduplicación (fusión campo por campo con vista previa), Asistente de importación de datos (4 pasos: carga, mapeo de columnas, vista previa de la deduplicación, confirmación), Historial de importaciones, Exportación de datos (selección de campos, elección de formato, registrada en la auditoría), Informe de calidad de datos (desglose del puntaje, completitud por campo, problemas de validez, datos desactualizados), Gestión de etiquetas. Estados vacíos.

23. Operaciones de campo (administración) — Trabajo de campo: Lista y creación/edición de campañas, Constructor de guiones (panel dividido con vista previa en vivo, lógica de ramificación, mapeo de puntajes), Mapa de gestión de territorios (dibujar, seleccionar y asignar territorios, código de color por avance), Generación automática de territorios (por restricciones, con vista previa), Gestión de listas de recorrido (asignar y reasignar voluntarios), Revisión de resultados (desglose por territorio, distribución del apoyo, interacciones marcadas), Mapa de avance (vista geográfica a todo el ancho con las posiciones de los voluntarios activos). Jornadas de llamadas: Lista y creación/edición de campañas (BYOP —Bring Your Own Phone, se usan los celulares personales de los voluntarios— o marcador integrado, listas de llamadas por segmento con exclusiones), Constructor de guiones (compartido con el trabajo de campo + pasos propios del teléfono), Panel de avance (actividad de quien llama en tiempo real, resultados de las llamadas, puntajes de apoyo). Inscripción de votantes: Lista y creación/edición de jornadas (según la jurisdicción), Selector de plantilla de jurisdicción (formularios de inscripción por país con reglas de elegibilidad), Revisión de resultados (avance de la inscripción, flujo de seguimiento, problemas de datos). Estados vacíos.

24. Recaudación de fondos (administración) — Lista y detalle de donaciones (filtrables, multimoneda, variante de donación marcada), Constructor de formularios de donación (panel dividido con vista previa en vivo, configuración de montos, campos del donante, apariencia, métodos de pago), Vista previa del formulario, Configuración de incrustación (tipos en línea, modal y botón, lista de dominios permitidos), Lista y creación/edición de campañas de recaudación (seguimiento de la meta, formularios y comunicaciones vinculados), Gestión de donaciones recurrentes (métricas de MRR, ciclo de vida del estado, historial de cobros, pausa y cancelación desde administración), Gestión de promesas de donación (ciclo de vida de la promesa, programación de recordatorios, vinculación con el cumplimiento), Procesamiento de reembolsos (total o parcial, reversión del reparto de la alianza, manejo manual del efectivo), Registro de donaciones en efectivo (con prioridad móvil, capaz de funcionar sin conexión, foto del recibo), Conciliación de efectivo (cotejo en dos columnas, seguimiento de discrepancias), Revisión de marcas de cumplimiento (ordenada por gravedad, indicadores de fraude, acciones de aprobar, reembolsar y bloquear), Configuración y resultados de pruebas A/B (configuración de variantes, seguimiento de la significancia estadística), Configuración del reparto de la alianza (tipos por porcentaje, fijo y por umbral, aprobación unánime), Informe de recaudación de la alianza (desglose por organización, historial de desembolsos), Configuración del procesador de pagos (flujo de conexión guiado, transacciones de prueba, seguridad de las credenciales), Generador de estados de cuenta anuales (generación masiva, envío por correo, descarga en PDF). Estados vacíos.

25. Comunicaciones — Lista de campañas de correo (ciclo de vida del estado, métricas en línea), Constructor de campañas de correo (secciones de configuración, audiencia, contenido y envío, selección de plantilla, tokens de personalización, lista de verificación previa al envío, pruebas A/B del asunto, variante de campaña automatizada), Constructor de plantillas de correo (por bloques, con arrastrar y soltar, edición en línea, pie de cumplimiento), Biblioteca de plantillas de correo (cuadrícula de tarjetas con miniaturas y categorías), Redactor de SMS/WhatsApp (selector de canal, contador de caracteres con seguimiento de segmentos, botones de respuesta rápida de WhatsApp, control de la hora del día, verificación de los topes de frecuencia), Analítica de comunicaciones (resumen entre canales, tabla de rendimiento del correo, gráficos de tendencia, salud de la audiencia), Gestión del consentimiento (matriz de canal × finalidad, seguimiento del vencimiento del consentimiento, solicitudes de renovación, reglas predeterminadas por origen del contacto), Preferencias de comunicación (topes de frecuencia, horas de silencio con sobrescritura para GOTV, avisos legales de cumplimiento, identidades de remitente), Gestión de bajas (registro del motivo, alta manual de nuevo con auditoría), Configuración del dominio de envío de correo (generación de registros DNS, verificación de SPF/DKIM/DMARC). Estados vacíos.

26. Redes sociales — Panel de redes sociales (cuentas conectadas con la cantidad de seguidores, métricas de rendimiento de la semana, próximas publicaciones programadas, publicaciones recientes con la interacción en todas las plataformas), Redactor de publicaciones (multiplataforma con sobrescrituras por plataforma, contadores de caracteres, medios con notas de recorte, avisos legales de cumplimiento, programación, enrutamiento de aprobaciones), Calendario de publicaciones (vistas de mes, semana y lista, reprogramar arrastrando, panel de detalle del día), Analítica de publicaciones (detalle por publicación con desglose por plataforma y gráfico de rendimiento de 48 horas, analítica agregada con comparación entre plataformas y mejores horarios para publicar), Conexión de cuentas de redes sociales (flujo de OAuth, estado del token, permisos concedidos), Vista previa por plataforma (vistas previas lado a lado con advertencias por plataforma). Estados vacíos.

27. Eventos — Lista de eventos (vistas adaptables al arquetipo: administración frente a voluntarios y simpatizantes, iconos por tipo de evento, indicadores de capacidad), Crear/editar evento (selector de presencial, virtual o híbrido, ajustes de confirmación de asistencia con modos abierto, solo por invitación y con aprobación, capacidad con lista de espera, recordatorios, enlaces de promoción, asignación de personal, integración con la recaudación de fondos, medios), Detalle del evento (vista de administración con resumen de confirmaciones, personal e hilo de discusión; vista de voluntario con acción de confirmar, calendario e indicaciones; variante de resultado posterior al evento), Gestión de confirmaciones de asistencia (lista completa con variante de cola de aprobación, acciones masivas, seguimiento de acompañantes), Herramienta de registro de entrada (con prioridad móvil, capaz de funcionar sin conexión, contador de avance, lista alfabética con tocar para registrar la entrada, modo de escaneo de QR con la cámara, inscripción en el momento, áreas táctiles de 56px, retroalimentación háptica, deshacer durante 10 segundos), Métricas del evento (métricas de confirmaciones, asistencia, entradas en el momento y tasa de asistencia; desglose por origen de la confirmación, gráfico de la línea de tiempo de registros de entrada, datos de recaudación, impacto en el CRM, comparación con eventos similares, botones de acción posteriores al evento), Configuración de evento virtual (selección de plataforma, generación de enlaces únicos para el seguimiento de la asistencia, difusión de la grabación), Constructor de encuestas posteriores al evento (6 tipos de pregunta, reordenar arrastrando, visualización de resultados con la distribución de respuestas, vinculación con el CRM de quienes muestran interés en ser voluntarios). Estados vacíos.

28. Prensa y medios — Lista y detalle de contactos de medios (campos de CRM propios de prensa, puntos de relación, historial de interacción con la línea de tiempo de propuesta, respuesta y cobertura, tasa de éxito de las propuestas), Gestión de listas de medios (listas dinámicas por criterios y listas estáticas curadas), Constructor de comunicados de prensa (panel dividido con plantilla estructurada: titular, lugar y fecha, cuerpo, citas, texto institucional y contacto; soporte de embargo informativo, versionado, aviso legal de cumplimiento, flujo de aprobación), Vista previa del comunicado de prensa (formato completo de distribución), Distribución del comunicado de prensa (lista de medios + selección individual, personalización, adjuntos, seguimiento del embargo), Constructor de avisos a medios (plantilla estructurada QUIÉN/QUÉ/CUÁNDO/DÓNDE con relleno automático desde el evento), Constructor de declaraciones (respuesta rápida simplificada, marca de urgente con notificación push, salto de aprobación de emergencia para el OA y el CD), Gestión del kit de prensa (tarjetas de recurso con niveles de acceso público y restringido, el acceso restringido crea contactos en el CRM, seguimiento de descargas), Registro de cobertura (entrada manual con titular, medio, periodista, tono, formato y temas, vinculada a la propuesta o al comunicado), Analítica de cobertura (distribución del tono, desglose por formato, análisis de temas, tasa de propuesta a cobertura, capacidad de respuesta de los periodistas, cobertura a lo largo del tiempo), Flujo de respaldos (kanban: identificado → contactado → considerando → comprometido → público, arrastrar y soltar, "Público" dispara el flujo de anuncio con comunicado de prensa + publicación en redes), Detalle del respaldo (avance de la etapa, perfil de quien respalda, cita, foto, línea de tiempo, asignación), Biblioteca de puntos de mensaje (acordeón organizado por tema, versionado con diferencias, distribución al equipo por mensajería, integración con los informes al candidato), Agenda de entrevistas (pestañas de próximas, pasadas y solicitudes; preparación armada automáticamente con puntos de mensaje + historial del periodista + cobertura reciente del medio; aceptar, rechazar o responder las solicitudes; registro del resultado tras la entrevista), Configuración de voceros (voceros designados con sus áreas temáticas, reglas de enrutamiento de contactos, información de contacto de prensa para los comunicados). Estados vacíos.

29. Activismo — Lista de campañas de activismo (tipos carta/correo, petición y comentario público, con métricas propias de cada tipo), Configuración de acción de cartas/correos (información del destinatario, puntos de mensaje con orden de prioridad para la IA, mensaje de plantilla, configuración de la página pública), Configuración de petición (texto de la petición, meta de firmas con comportamiento al alcanzarla, campos de información del firmante con controles de visibilidad), Configuración de campaña de comentarios públicos (organismo regulador, número de expediente, fecha límite con cierre automático, método de envío: directo por la plataforma, descarga manual o ambos), Página de acción — pública (flujo de dos pasos con prioridad móvil: datos del simpatizante → generación del mensaje con IA; contador de acciones como prueba social, aviso legal de cumplimiento con la identidad visual de la organización), Página de petición — pública (firma con prioridad móvil y barra de avance, texto de la petición truncado con opción de desplegar, firmas recientes con presentación que preserva la privacidad), Vista previa de mensajes generados por IA (mensaje único escrito por la IA a partir de los puntos de mensaje + la conexión personal, casilla de aprobación explícita, editar, regenerar o volver a la plantilla, límite de 3 regeneraciones, revelación de transparencia), Analítica de campañas de activismo (métricas propias de cada tipo, gráfico de acciones a lo largo del tiempo, mapa y tabla de distribución geográfica, flujo de acciones por simpatizante con enlaces al CRM, lectura de los mensajes), Documentación del acto de entrega (método, lugar y destinatario de la entrega; evidencia fotográfica con captura desde la cámara, documentos adjuntos, seguimiento de la respuesta del destinatario, personal presente, vinculación con la cobertura de prensa relacionada, soporte parcial sin conexión). Estados vacíos.

30. Administración de GOTV — Constructor del universo GOTV (constructor de segmentos por criterios con reglas de inclusión y exclusión, filtros de puntaje de apoyo e historial de voto, desglose geográfico, segmentación por niveles para el orden de prioridad, flujo de finalizar y bloquear), Carga de datos de voto adelantado (carga de CSV/Excel con mapeo de columnas, ID de votante como llave principal de cruce con nombre + fecha de nacimiento como alternativa, vista previa del cruce con su impacto en el universo, cargas acumulativas con historial y deshacer), Configuración de los puntos de concentración de voluntarios (mapa con marcadores de ubicación + panel de detalle, seguimiento de la capacidad con barra visual, persona de contacto y horario, lista de suministros personalizable, lista del equipo de voluntarios por punto), Corte de territorios para GOTV (mapa interactivo con herramientas de dibujar, seleccionar y dividir; superposición de mapa de calor de densidad de simpatizantes; generación automática con parámetros configurables: contactos por territorio, tiempo máximo de recorrido, prioridad de optimización; programación en varias pasadas para la mañana, la tarde y la noche; asignación de voluntarios; corte dinámico el día de elecciones), Plan de comunicaciones del día de elecciones (línea de tiempo visual de las oleadas de comunicación; configuración por oleada: hora, disparador automático o manual, canal SMS/WhatsApp/correo, segmentación de la audiencia con filtro dinámico de "quién no ha votado", tokens de personalización, botones de respuesta rápida de WhatsApp, sobrescritura de las horas de silencio para GOTV, controles de envío en vivo el día de elecciones), Registro de observadores electorales (lista con distintivos de estado ○◐●, centros de votación asignados y de reserva, requisitos y avisos de fecha límite por jurisdicción, exportación de la lista del equipo para la presentación), Seguimiento de credenciales de observadores electorales (número de credencial, fechas y carga del documento, estado de la verificación, resumen imprimible), Coordinación de transporte — Vista del despachador (mapa + panel dividido con las solicitudes pendientes y los conductores disponibles, orden de prioridad con marcas de urgencia por tiempo de espera y accesibilidad, emparejamiento inteligente de conductores por proximidad, vehículo y carga de trabajo, optimización con varios pasajeros, seguimiento del estado: Pendiente → Asignado → En camino → Transportando → Completado, actualización automática, varias fuentes de solicitudes), Cola de problemas de observadores electorales (ordenada por gravedad: Crítica/Alta/Media con distintivos de color e icono; filtro por categoría: Acceso al voto/Equipos/Violación de campaña/Tiempos de espera/Accesibilidad/Intimidación; detalle del problema con evidencia en foto y video, escalamiento a legal, protección electoral o comisión electoral; notas internas con marca de tiempo, registro de auditoría de la resolución, actualización automática con notificación sonora para las críticas), Panel de participación — Vista de mapa (mapa coroplético a todo el ancho con código de color por tasa de participación de rojo a verde en relación con la meta, interruptores de superposición para los límites de territorio, quienes hacen trabajo de campo, los puntos de concentración y los centros de votación; panel de detalle al hacer clic en un territorio con la cantidad de votos por nivel y la confianza de la fuente de datos, actualización automática cada 60s), Panel de participación — Vista por segmentos (tabla con la participación por nivel de apoyo, geografía, demografía y criterios propios; meta frente a real con columna de brecha y marcas ⚠; gráfico de participación a lo largo del tiempo con línea punteada del ritmo objetivo; desglose hasta el contacto individual), Sugerencias de reasignación (sugerencias priorizadas que genera la plataforma: turnos de trabajo de campo, refuerzos de jornadas de llamadas, SMS dirigidos, cada una con la justificación y los datos concretos que la sostienen; controles de aprobar, modificar y rechazar; registro de auditoría de lo ya accionado; regenerar con los datos más recientes), Ingreso de resultados de la noche electoral (ingreso numérico con prioridad móvil por carrera y por centro, candidaturas prellenadas desde la configuración del equipo, estado parcial o final, validación contra la cantidad de votantes inscritos, marca de tiempo registrada automáticamente), Panel de resultados de la noche electoral (gráfico de barras por candidatura con votos y porcentajes, seguimiento del avance del reporte, gráfico de la línea de tiempo de resultados con la tendencia a medida que llegan, tabla por centro con su estado, comparación interna contra las predicciones de los puntajes de apoyo, alternancia a vista de mapa, pestañas por carrera, actualización automática cada 30 segundos), Análisis posterior a la elección (por pestañas: Participación con tablas por segmento y región y comparación con la meta; Operaciones con métricas de puertas tocadas, llamadas y transportes y tasas de contacto por región; Voluntarios con el rendimiento de cada persona; Validación del modelo comparando los puntajes de apoyo con la participación real y una evaluación de la precisión; Recursos con la utilización de los puntos de concentración y la eficiencia operativa; exportación a PDF), Registro de entrada en el punto de concentración (con prioridad móvil, para el Líder de equipo; contador de avance con barra visual, lista de quienes no han registrado la entrada priorizada con teléfonos y territorios asignados, tocar para registrar la entrada con confirmación háptica y deshacer durante 10 segundos, opción de escaneo de QR, áreas táctiles de 56px, reportar un problema y contactar al Director de campo). Estados vacíos. Referencias cruzadas: DASH-008 Panel del centro de mando de GOTV, las pantallas de modo de campo de GOTV (Ficha de puerta, Lista de recorrido, Llamada de seguimiento), ALLY-008 Coordinación de GOTV en la alianza.

31. Ajustes y administración — Perfil e identidad visual de la organización (nombre y nombre corto, carga del logo con vista previa de tamaños, selector de color primario y de acento con vista previa en vivo, idioma predeterminado e idiomas adicionales, zona horaria), Editor de plantillas de rol (plantillas del sistema y propias, matriz de permisos con las áreas funcionales como filas y Ver/Crear/Editar/Borrar/Exportar/Administrar como columnas, secciones de funcionalidad plegables, clonar y restablecer los valores predeterminados, cantidad de miembros por rol), Panel de ajuste de permisos (ajustes por persona, solo aditivos, con motivo obligatorio para el registro de auditoría y seguimiento de quién los añadió), Lista de gestión del personal (filtrable por rol y estado, distintivos de Activo/Invitado/Desactivado, acciones de fila: editar el rol, reenviar la invitación, restablecer el passkey, desactivar, ver los ajustes de permisos, ver la actividad), Flujo de invitación del personal (correo + nombre, selección de rol con un resumen en lenguaje llano de lo que puede y no puede hacer, restricción opcional del ámbito geográfico a determinadas regiones), Configuración del ámbito geográfico (mapa con regiones sombreadas + lista de regiones con la cantidad de contactos, selector del nivel de jurisdicción: País/Estado/Distrito/Municipio/Precinto/Propio), Configuración del período de campaña (nombre de la campaña, fechas de inicio, fin y elección, estado con cuenta de días, archivo de los períodos anteriores), Configuración de cumplimiento (selección de jurisdicción y marco, lista de reglas aplicadas con las exigidas por la jurisdicción bloqueadas, comportamiento de la aplicación: bloquear, advertir o marcar), Configuración de límites de contribución (tabla de límites por tipo de donante y por ciclo: Individual/Empresa/PAC/Autofinanciamiento, método de agregación, comportamiento al superar el límite: bloquear, marcar o aceptar parcialmente), Configuración del texto del aviso legal (aviso principal con casillas de aplicación por canal, avisos adicionales, traducciones por idioma), Política de conservación de datos (reglas de conservación por tipo de dato con el plazo y la acción al vencer: borrado automático, archivo o manual; comportamiento de limpieza posterior a la campaña, conservación mínima por cumplimiento), Centro de ajustes de integraciones (cuadrícula de tarjetas por categoría: Comunicaciones/Redes sociales/Pagos/Mapas/Video, con estado, proveedor y hora de la última sincronización por tarjeta), Configuración de WhatsApp Business (número de teléfono, token de la API, prueba de conexión, gestión de plantillas de mensaje con su estado de aprobación), Configuración del proveedor de SMS (selección de proveedor, credenciales, números de teléfono, prueba de entrega), Configuración del dominio de correo (referencia cruzada a COMM-010, registros DNS, verificación de SPF/DKIM/DMARC), Conexiones de cuentas de redes sociales (referencia cruzada a SOCIAL-005, OAuth por plataforma), Facturación y suscripción (plan actual con métricas de uso, método de pago, historial de facturación con descarga de facturas, contacto de facturación), Visor del registro de auditoría (bitácora de todas las acciones de los usuarios, con búsqueda y filtros: inicios de sesión, exportaciones, cambios de permisos, cambios de ajustes; detalle de fila desplegable con la IP y el agente de usuario; no se puede borrar y es a prueba de manipulación; exportación a CSV/JSON), Ajustes de seguridad (tres niveles Estándar/Reforzado/Máximo, requisitos de passkey y MFA, tiempo de expiración de la sesión, lista de IP permitidas con exención para el modo de campo, alertas por correo de respuesta a incidentes ante inicios de sesión, exportaciones y cambios de permisos sospechosos; secciones plegadas de modo de coacción y recuperación por contacto de confianza), Gestión de llaves de cifrado (BYOK para el nivel Máximo, llave actual con algoritmo, estado y quiénes tienen las partes de Shamir; ceremonia de rotación de llaves que exige 3 de 5, exportación de la copia de seguridad cifrada de la llave, historial de llaves con la auditoría de las rotaciones), Gestión de llaves de API (llaves con nombre y permisos acotados por área funcional + lectura/escritura, restricciones de IP, expiración, seguimiento de uso, la llave se muestra una sola vez al generarla), Configuración de webhooks (webhooks con nombre, URL, secreto y selección de eventos; política de reintentos, webhook de prueba, bitácora de entregas con códigos de respuesta y tiempos, seguimiento de la tasa de éxito). Estados vacíos.

32. Autenticación — Inicio de sesión con passkey (una sola llamada a la acción en una tarjeta centrada, inicio biométrico en menos de 3 segundos, identidad visual de la organización con su logo y su nombre, "¿Qué es un passkey?" desplegable), Inicio de sesión alternativo (enlace mágico con expiración a los 15 minutos y espera de 60 segundos para reenviar + OTP por SMS de 6 dígitos con envío automático y expiración a los 10 minutos, limitación de frecuencia de 3 por cada 15 minutos), Recuperación de cuenta mediante contactos de confianza (aprobación de 2 de 3 por defecto, período de espera de 24 horas con cuenta regresiva, los passkeys antiguos se invalidan al recuperar, "No, no es esta persona" cancela de inmediato, no hay recuperación iniciada por administración), Registro de passkey (inscripción guiada con instrucciones propias de cada plataforma para Face ID y Touch ID en iOS, biometría en Android y llaves de seguridad; explicación en lenguaje llano de "¿Qué es un passkey?", opción de passkey de coacción para el nivel de seguridad Máximo), Configuración del contacto de confianza (de 2 a 5 contactos de la misma organización, se les notifica al añadirlos, quitarlos exige volver a autenticarse), Autorización de dispositivo (código QR con expiración a los 5 minutos + código alfanumérico manual, aprobación desde un dispositivo existente con los detalles del dispositivo, el nuevo dispositivo aparece en la lista), Sesión expirada (los datos se conservan en el almacenamiento local, volver a autenticarse con un toque, variante de reautenticación para acciones sensibles que muestra la descripción de la acción y el contexto del tiempo de expiración). Estados de casos límite (no se encontró passkey, límite de frecuencia alcanzado, sin contactos de confianza, dispositivo incompatible, QR expirado).

33. Perfil de usuario — Perfil personal (nombre, subir y quitar el avatar, teléfono con verificación, correo de solo lectura gestionado por administración, idioma y zona horaria, rol y organización, último inicio de sesión), Preferencias de notificaciones (matriz de canal × tipo: columnas En la aplicación/Push/Correo/SMS × filas Mensajes/Aprobaciones/Asignaciones/Recordatorios/Novedades de campaña/Alertas de seguridad; horas de silencio con hora de inicio y fin e interruptor de sobrescritura para GOTV; frecuencia del resumen por correo: en tiempo real, diario o semanal), Ajustes de seguridad (personales) (lista de dispositivos registrados con plataforma, navegador y último uso, y con reautenticación obligatoria para quitarlos; gestión de contactos de confianza con añadir y quitar; lista de verificación de seguridad con indicadores ✓/○ para passkey, contactos de confianza, recuperación y dispositivos; configuración del passkey de coacción para el nivel Máximo), Preferencia de idioma (botones de opción que se aplican al instante, inversión automática a RTL, encabezado bilingüe que muestra el idioma actual y el nuevo, lista de idiomas controlada por la organización), Selector de organización (tarjetas de organización con logo, rol y última actividad; cambio de contexto completo que limpia el estado local; [+ Unirse a otra organización] con entrada del código de invitación). Estados vacíos.

34. Soporte y ayuda — Navegador de la base de conocimiento (búsqueda de texto completo con resultados instantáneos, artículos filtrados por rol y priorizados según el arquetipo de la persona, tarjetas de categoría que reflejan la estructura de la barra lateral, artículos populares y actualizados recientemente, cuadrícula en escritorio y lista en móvil), Artículo de la base de conocimiento (contenido con formato y tabla de contenidos en una barra lateral, artículos relacionados, retroalimentación de pulgar arriba o abajo, funcionamiento parcial sin conexión con el texto y las imágenes en caché, enlaces directos a pantallas de la plataforma, ruta de navegación), Chat del concierge de IA (consciente del contexto: sabe en qué pantalla está la persona y cuál es su rol; respuestas con enlaces a artículos + enlaces de acción directa, historial de chat persistente, panel lateral en escritorio y pantalla completa en móvil, escalamiento a soporte humano para las organizaciones con plan premium, chips de sugerencias rápidas), Lista de módulos de capacitación (vista de voluntario con secciones de Obligatorios y Recomendados y barras de avance; vista de administración con las tasas de finalización por módulo y la matriz por voluntario), Contenido del módulo de capacitación (lecciones secuenciales con indicador de avance, contenido en texto, imágenes y video, caché sin conexión para texto e imágenes, marcador y retomar, tiempo estimado), Cuestionario de capacitación (una pregunta a la vez con puntos de avance, umbral de aprobación configurable, opción de repetir, capaz de funcionar sin conexión con sincronización al reconectar, revisión de resultados con las respuestas correctas y sus explicaciones), Estado de certificación (vista de voluntario con tarjetas de módulo que muestran ✓ completado, ◐ en curso y ○ sin empezar; matriz cruzada de administración con voluntarios en las filas y módulos en las columnas; seguimiento del vencimiento con avisos de renovación), Editor de contenidos de capacitación (ajustes del módulo con título, descripción y requisitos; lista de lecciones con reordenar arrastrando; editor de preguntas del cuestionario con 4 tipos de pregunta; asignación dirigida a todos, a roles concretos o a personas concretas; versionado con estados de borrador y publicado; acciones de guardar borrador y publicar). Estados vacíos.

35. Páginas públicas — Página de perfil del candidato (URL corta /p/[slug], foto, nombre, cargo y lema de la candidatura, biografía con texto completo desplegable, respaldos tomados dinámicamente del flujo de respaldos, próximos eventos públicos tomados del módulo de eventos, llamadas a la acción de donar y ser voluntario, enlaces a redes sociales, metaetiquetas de SEO y Open Graph, aviso legal de cumplimiento de la organización), Página de perfil de la organización (URL corta /o/[slug], logo, nombre y misión de la organización, imagen principal, llamadas a la acción de participación para donar, ser voluntario y asistir a eventos, próximos eventos tomados dinámicamente del módulo de eventos, cobertura de prensa reciente tomada del registro de cobertura, aviso legal de cumplimiento), Página de inscripción de voluntarios (campos obligatorios mínimos: solo nombre y correo; teléfono opcional; casillas de interés para emparejar con roles: trabajo de campo, jornadas de llamadas, eventos, entrada de datos, otro; cuadrícula de disponibilidad; integración con el CRM que crea o cruza el contacto y lo etiqueta como "Aspirante a voluntario"; consentimiento expreso sin marcar de antemano; pantalla de confirmación con propuesta de donación y botones para compartir en redes), Página del kit de prensa (información de contacto de prensa con nombre, cargo, correo y teléfono; recursos descargables organizados por categoría: logos en PNG/SVG, fotos en alta resolución, documentos en PDF; acceso restringido opcional que pide el correo y crea un contacto en el CRM etiquetado como "Medios", seguimiento de descargas por recurso; cobertura de prensa reciente). Referencias cruzadas: PUB-003 Portal de simpatizantes (supporter-portal.md + fundraising.md), PUB-004 Página del evento (events.md EVT-003), PUB-005 Página de acción (activism.md ACT-005), PUB-006 Página de petición (activism.md ACT-006). Estados vacíos.

36. Operaciones de contenido — El flujo de contenido, agregado después de la auditoría: Panel de contenido (lo que sale hoy con su estado en el flujo, lo que espera por ti, temas tomados de los puntos de mensaje), Revisión de contenido (historial de rondas, comparación entre rondas, comentario obligatorio al pedir cambios, escalamiento), Cola de aprobación (ordenada por hora programada, aprobación en bloque) y Aprobación (la ronda actual y la anterior lado a lado; móvil). Redibujado a partir de las pantallas de revisión de un prototipo hecho para gestionar creadores de contenido, algo que GreenGrass no hace.

# Auditoría de wireframes

37. Informe de auditoría de wireframes — Auditoría estructural de los 21 documentos de wireframes. Resumen ejecutivo con estadísticas de cobertura (236 pantallas inventariadas, 15 que faltaban y ya se añadieron, 9 documentos normalizados a la estructura estándar). Análisis de huecos documento por documento, evaluación del uso de los tokens del sistema de diseño, calificación de la cobertura sin conexión, auditoría de terminología. Apéndice A: 89 preguntas abiertas consolidadas de todos los documentos, categorizadas y deduplicadas. Apéndice B: decisiones de diseño consolidadas de todos los documentos, con análisis de contradicciones.

38. Índice de pantallas — Referencia cruzada de los 240 ID de pantalla a su ubicación en los wireframes, con su estado (Completa / Cubierta / Referencia cruzada / Falta).

# Principios de UX

Estos principios guían todas las decisiones de diseño de GreenGrass.

# 1. El voluntario en el campo va primero

Cada decisión de diseño se pone a prueba contra el usuario más difícil: un voluntario con un Android de gama baja y conectividad intermitente, caminando puerta a puerta en una zona rural. Si un patrón no le sirve, no se lanza. Las interfaces de administración de escritorio importan, pero nunca pueden comprometer la experiencia de campo.

# 2. Complejidad invisible

10 arquetipos comparten una sola aplicación, pero nadie debería sentir el peso de los demás. Las funcionalidades fuera del acceso de una persona están ausentes: no atenuadas, no escondidas tras diálogos de permisos, sino verdaderamente invisibles. El Voluntario ve una aplicación simple y enfocada. El Administrador de la organización ve una plataforma completa. Ninguno sabe que existe la vista del otro.

# 3. Estar sin conexión no es un estado de error

El modo sin conexión es una condición de operación de pleno derecho, no una alternativa degradada. La interfaz tiene que comunicar el estado de la conexión con claridad, pero sin hacer sentir que se está usando una versión rota de la aplicación. Las operaciones de campo funcionan por completo sin conexión. Los datos se sincronizan cuando se puede.

# 4. Estabilidad antes que dinamismo en la navegación

La estructura de navegación se mantiene estable sea cual sea la conexión, el contexto o la hora del día. Los elementos no aparecen y desaparecen según cambian las condiciones. Las funcionalidades no disponibles sin conexión aparecen atenuadas, con un distintivo, no se quitan. Las personas construyen memoria muscular de dónde está cada cosa, y esa memoria tiene que ser confiable.

# 5. La seguridad es invisible hasta que importa

La arquitectura de seguridad (modelo de 5 niveles, cifrado BYOK, autenticación con passkey, modo de coacción) es sustancial, pero nadie debería sentir su peso durante la operación normal. Iniciar sesión debería ser un solo toque (passkey). El cifrado debería ser automático. Las pantallas de seguridad (registro de auditoría, gestión de llaves, modo de coacción) están disponibles, pero no destacadas. La excepción: cuando la seguridad sí necesita atención (passkey comprometido, rotación de llaves, amenaza activa), la interfaz tiene que ser inequívoca y directa.

# 6. Respetar el dispositivo

El móvil no es un escritorio encogido. Las pantallas de móvil se diseñan para móvil: áreas táctiles grandes, desplazamiento vertical, operación con una sola mano. Las pantallas de escritorio usan el espacio: tablas de datos, paneles lado a lado, arrastrar y soltar. La misma funcionalidad puede tener interfaces muy distintas en cada plataforma, y eso está bien.

# 7. El RTL es estructural, no decorativo

El soporte de derecha a izquierda está incorporado en cada decisión de maquetación desde el primer día, no añadido después. La posición de la barra lateral, el orden de la barra de pestañas, la dirección de los iconos, la alineación del texto, la dirección de la ruta de navegación: todo se define con propiedades lógicas (inline-start/inline-end), no físicas (left/right).

# 8. El día de elecciones es otra aplicación

Cuando se activan las operaciones de GOTV, la plataforma se transforma. Los paneles cambian, las prioridades de las notificaciones se mueven, aparecen pantallas nuevas, el modo de campo pasa a los flujos propios de GOTV. Esa transformación está diseñada, no improvisada: es parte del modelo de navegación y de las vistas por arquetipo.

# Glosario

# Referencias cruzadas a las especificaciones

# Decisiones de diseño

Las decisiones específicas de UX se registran en decisions/ux-decisions.md. Ese documento cubre las convenciones estructurales de los wireframes, el enfoque de integración de los tokens de diseño, la especificación del comportamiento sin conexión, las convenciones de terminología y la asignación de ID de pantalla.

Decisiones clave ya tomadas durante el trabajo de arquitectura de la información de la fase 1: