Página de Login
Acceso seguro a la cuenta y contenido de noticias positivas. Diseño: simple, mínimo, alentador, fácil de usar, mobile-first. Mensaje: “Spread the Good News”.
2. Componentes UI — Cabecera
Elementos: nombre “The Good App”, eslogan “Spread the Good News”, diseño limpio y optimista con acento verde. Objetivo: comunicar identidad y misión de marca.
3. Formulario de Login — Campos y validación
Email: placeholder “Email”, formato válido, obligatorio. Contraseña: placeholder “Password”, enmascarada, obligatoria. Validación: email válido; contraseña según backend; errores inline para campos vacíos, credenciales incorrectas, error de red.
5. CTA principal — Sign In
Botón verde destacado, etiqueta “Sign In”. Deshabilitado hasta completar campos (opcional). Estado de carga durante autenticación.
6. Login social
Debajo del botón principal: divisor “Or continue with”, luego “Continue with Apple”, “Continue with Google”. OAuth; reducir fricción, aumentar conversión.
7. Redirección a registro
Texto inferior: “Don’t have an account? Sign Up” (Sign Up enlaza a Registro). 4. Forgot Password: enlace “Forgot Password?” → flujo de recuperación.
8–11. Requisitos y objetivos
Funcional: autenticación segura vía API, HTTPS, límite de intentos, manejo de errores. No funcional: carga <2s, mobile-first, accesibilidad. UX: acogedor, flujo rápido, positividad, fomentar registro. Opcional: biométrico, “Remember Me”.
Página de Inicio
Feed principal: noticias positivas, verificadas y alentadoras. Énfasis: optimismo, claridad, personalización, engagement, acción.
2. Navegación superior
Logo y nombre “The Good App”; icono de notificaciones (arriba derecha). Logo → inicio del feed; notificaciones → centro de notificaciones.
3. Destacados de hoy — Carrusel
Tarjetas desplazables en horizontal; historias curadas; “View All”. Cada tarjeta: imagen, categoría (p. ej. Eco Win), titular, engagement (p. ej. 12.5K Cheers). Deslizar; toque → artículo completo.
4. Filtros por categoría
Botones redondeados: All News (por defecto), Environment, Technology, Community, Health, Education. Al tocar se filtra el feed; seleccionado resaltado; respeta preferencias de país del Perfil.
5. Trending Now
Lista vertical. Tarjeta: miniatura, categoría, badge verificado, titular, tiempo (p. ej. 2h), engagement.
6. Botón flotante (FAB)
Botón verde “+” centrado abajo — abre creación de contenido (compartir noticia positiva, enviar historia, subir media).
7. Navegación inferior
Home, News, Create, Community/Groups, Profile. Persistente; pestaña activa resaltada; cambio rápido.
8–11. Personalización y requisitos
Lógica: filtros de país, categorías, historial de engagement, tendencias, prioridad verificados. Funcional: scroll infinito, pull-to-refresh, carga diferida de imágenes, engagement en tiempo real, caché. UX: positividad por defecto, reducir sesgo negativo, fomentar interacción y creación.
Sección Perfil
Gestionar identidad, personalizar contenido, seguir el impacto positivo. Combina: identidad, preferencias, impacto, logros.
2. Información de usuario
Editable: foto (subir/cambiar/quitar), nombre, bio corta, país opcional, fecha de alta. Vista pública: foto, nombre, bio, XP, puntuación de impacto (Likes + Views), publicaciones, seguidores.
3. Ajustes — Filtros por país
Seleccionar uno o varios países; activar/desactivar noticias globales; actualizar en cualquier momento. Personalizar feed por geografía.
4. Impacto y logros
Puntuación de impacto = Views + Likes. Niveles: 0–100 Good Starter, 101–500 Positive Contributor, 501–2000 Impact Maker, 2000+ Global Optimist. Métricas visibles: impacto total, nivel, contenido publicado. Objetivos: fomentar participación, recompensar impacto, promover creación, engagement a largo plazo. Opcional: badge creador verificado, leaderboard, resumen mensual, compartir, temas.
Sección Noticias
Feed estructurado y centrado en credibilidad con noticias positivas verificadas. Énfasis: verificación, transparencia de fuentes, descubrimiento por temas, escaneo rápido.
2. Cabecera
Título “Verified News”, icono de notificaciones. Cabecera fija; icono abre centro de notificaciones.
3. Barra de búsqueda
Placeholder “Search topics, sources…”. Búsqueda por palabras clave, temas, fuentes; filtrado en tiempo real.
4. Pestañas de categoría
Botones horizontales: All (por defecto), Humanity, Tech, Science, Nature. Seleccionado resaltado; scroll suave; actualización instantánea; mantiene búsqueda si está activa.
5. Artículo destacado verificado (Hero)
Portada grande, badge “Verified”, categoría, tiempo de lectura (p. ej. 4m), titular, fuente, fecha. Toque → artículo completo; carga diferida; sombra, esquinas redondeadas.
6. Lista de noticias y 7. Verificación
Tarjetas: miniatura, badge verificado, titular (2 líneas), fuente, fecha. Badge verificado: verde con check; contenido revisado, fuente validada; criterios: dominio fiable, tema positivo, contrastado, sin sensacionalismo.
8–11. Nav inferior, requisitos, UX
Persistente: Feed, Search, Saved, Profile. Funcional: scroll infinito, carga diferida, filtros, API, caché. UX: confianza vía verificación, consumo tranquilo, descubrimiento intuitivo, lectura profunda.
Página de detalle de artículo
Historia completa en layout estructurado, inmersivo y centrado en credibilidad. Objetivos: lectura profunda, transparencia de verificación, credibilidad del autor, engagement.
2. Hero
Imagen de portada a ancho completo, esquinas superiores redondeadas, overlay oscuro. Overlay superior: atrás, guardar, compartir. Badge “Community Verified”. Titular, fecha, tiempo de lectura.
3–6. Autor, credibilidad, contexto, cuerpo
Autor: imagen, nombre, rol (p. ej. Tech Editor), Seguir. Módulo credibilidad: p. ej. 98% Score, 12k verificaciones, indicador circular. Contexto comunidad: aclaración, contexto histórico, explicación técnica. Cuerpo: tipografía clara, espaciado, párrafos, subheadings; imágenes con caption, carga diferida.
8. Barra de engagement
Abajo: Credible (validación positiva), Comment, Share. Credible incrementa métrica; Comment → hilo; Share → hoja nativa. UX: lectura inmersiva, confianza, engagement reflexivo.
Feed de comunidad
Hub social: compartir experiencias positivas, celebrar logros, engagement con contenido alentador. Énfasis: reconocimiento, engagement, narrativa positiva, impacto colectivo.
2. Cabecera y 3. Top contribuidores
Logo, título “Community Feed”, icono búsqueda (arriba derecha). Carrusel horizontal: imagen de perfil, nombre, conteo de wins (p. ej. 20+ WINS), badge de rango (#1 resaltado). Toque perfil → usuario; “View All” → leaderboard.
4–6. Posts y engagement
Post: cabecera (avatar, usuario, hora, ubicación, opciones ⋯); etiqueta (#CommunityWin, #PositiveNews); media (imagen, redondeada); caption, hashtags. Engagement: Like, Comment, Share con conteos. FAB verde “+” para crear. Nav inferior: Home, News, Create, Community (activa), Profile.
9–11. Requisitos y UX
Scroll infinito, pull-to-refresh, engagement en tiempo real, leaderboard, filtro por hashtag, moderación, reportes, optimización de media, seguir. UX: celebrar acción, pertenencia, contribución sobre scroll pasivo, refuerzo social, impacto visible.
Formulario Crear publicación
Enviar noticia positiva o logro de comunidad. Equilibrio entre facilidad y credibilidad. Objetivos: narrativa positiva, calidad, verificación, baja fricción, compartir responsable.
2. Barra superior
Cancelar (izq.), título “New Post”, Guardar (der.). Cancelar → descartar (confirmar si hay contenido); Guardar → borrador; fija.
3. Subida de media
“ADD MEDIA” centrado con icono cámara. Subir imagen/vídeo (opcional), tomar foto. Compresión, vista previa, reemplazar/quitar, tamaño máximo.
4–6. Título, categoría, descripción
Título: obligatorio, límite de caracteres, validación. Categoría: botones redondeados (Environment, Humanity, Tech, Science, Community, Health); selección única, resaltado verde. Descripción: “Tell the community your good news…”, multilínea, hashtags.
7. Fuente verificada y 8. Borrador
Etiqueta “Verified Source” (Requerido), placeholder URL. URL válida, HTTPS; obligatorio para noticias (configurable para wins de comunidad). Borrador: “Draft Saved” abajo; auto-guardado al cambiar; recuperable.
9. Revisar publicación y 10–12. Requisitos
Botón verde grande “Review Post” con icono verificación. Valida campos, abre vista previa, comprobación de moderación, muestra errores. Funcional: auto-guardado, compresión media, validación URL, moderación, vista previa, HTTPS, API. UX: compartir sin esfuerzo, publicación responsable, confianza, calidad.
Centro de notificaciones
Actualizaciones, engagement, eventos de cuenta. Objetivos: refuerzo positivo, engagement, transparencia, seguridad, participación.
2. Cabecera y 3–4. Categorías y tarjeta
Título “Notifications”, “Mark all as read”. Grupos: New, Earlier. Tarjeta: icono/avatar, título en negrita, descripción, fecha, punto no leído (verde).
5. Tipos y 6–7. Lógica y nav
Tipos: Reputación (+50 por verificación…), Post aprobado, Nota de comunidad añadida, Nuevo seguidor, Seguridad de cuenta (p. ej. nuevo login). Toque → contenido/perfil/seguridad. No leído = punto verde; abrir = leído; “Mark all” limpia. Inferior: Home, Explore, Alerts (activa), Profile. Push en tiempo real, badge, deep link, agrupación, marcar leído. UX: refuerzo, participación, informado sin saturar, calma, equilibrio seguridad.
Ajustes y privacidad
Preferencias de cuenta, personalización, privacidad y seguridad. Objetivos: autonomía, personalización, seguridad, transparencia, confianza.
2. Cabecera y 3. Resumen de cuenta
Atrás (→ Perfil), título “Settings”. Tarjeta: avatar, nombre, “Verified Member”, Editar (→ editar perfil).
4. Ubicación del feed de noticias
Chips removibles (p. ej. USA, EU, UK). “Add Region” → búsqueda de países, lista sugerida, “+” para añadir. Actualiza algoritmo del feed en tiempo real.
5. Preferencias y 6. Privacidad y seguridad
Preferencias: toggle Notificaciones; toggle Modo oscuro; Idioma (p. ej. English US) → pantalla idioma. Privacidad: “Allow community to see wins” (ON/OFF); Cuentas bloqueadas (lista, desbloquear); Cambiar contraseña (flujo seguro, contraseña actual, fuerte, HTTPS). 7. Comunidad: Guías, Ayuda y soporte. 8. Cerrar sesión: botón rojo, modal confirmación; invalidación token, limpieza sesión. 9. Versión (p. ej. 1.0.4).
Verificación de publicación — Trust Pipeline
Informa al usuario de que el contenido está en validación. Asegura precisión, credibilidad, moderación comunitaria, transparencia. Valor: Trust Before Reach.
2. Entrada y 3. Cabecera
Se muestra cuando: el usuario envía un post, el post requiere verificación, re-revisión por reportes. Cabecera: “Status”, Cerrar (X) → anterior; la revisión continúa en segundo plano.
4–5. Tarjeta de estado y pipeline
Visual: Escudo verde (brillo opcional). Título “Under Review”. Descripción: “Your post is moving through our Trust Pipeline…”. Pipeline: AI Fact Check — “In Progress”, “Analyzing sources & context”; Community Verification — “Waiting”, “Pending approval”. 6. Tiempo estimado: p. ej. “< 2 minutes” (dinámico). 7. “Notify me when live” — push cuando se apruebe. 8. “View Submission Guidelines”. 9. Flujo backend: Enviar → Pendiente → AI → puntuación → si OK Revisión comunidad → Live o Needs Revision.
Panel de moderación admin
Interfaz para moderadores y gestores de confianza: revisar, aprobar, rechazar, escalar contenido reportado. Asistida por IA, reportes comunitarios, escalación, seguridad de la plataforma.
2. Acceso y 3. Navegación
Roles: Admins, Moderadores senior, Trust & Safety. RBAC, 2FA recomendado, timeout de sesión, registro de acciones. Título “Moderation Queue”. Pestañas: Pending, Escalated, Resolved.
4. Métricas y 5–9. Tarjetas y acciones
Métricas: Tamaño cola (p. ej. 42, tendencia ↓12%), Tiempo respuesta medio (p. ej. 2m, “Fast”), Escalaciones (p. ej. 5). Tarjeta: autor, usuario, fecha, badge verificación, menú ⋯. IA: Toxicidad (p. ej. 2% Safe, 88% High Risk); color verde/amarillo/rojo. Source Match (p. ej. 98%, 0%, Unverified). Acciones: Approve, Reject, Ban & Reject, Escalate. Flagged: borde rojo + “FLAGGED”. Flujo: entrada → puntuación IA → auto-aprobar / cola / escalación → moderador → actualización reputación → log. Analytics: rendimiento moderador, precisión, falsos +/- , tiempo resolución, tasas reincidencia.