Documentación Técnica

1. Propósito

Este documento describe la estructura y las decisiones de diseño de los prototipos finales web y móvil de Solventa. Su propósito es facilitar la comprensión de los flujos representados, la organización de las pantallas y los elementos visuales compartidos entre ambos canales.

Los prototipos representan una experiencia navegable en Figma. Simulan los flujos definidos para el proyecto, pero no constituyen una implementación funcional conectada a servicios, bases de datos o proveedores externos.

2. Alcance de los prototipos

Los prototipos cubren los dos canales definidos para Solventa:

• Canal web: concentra la gestión completa de procesos como cotización, contratación, administración de pólizas, siniestros y operaciones relacionadas con socios.
• Canal móvil: está orientado al cliente asegurado y a tareas rápidas en movilidad, como consultar pólizas, reportar siniestros, adjuntar evidencias, recibir notificaciones y acceder a información disponible sin conexión.

Cada canal responde a un propósito diferente. Por esta razón, los prototipos comparten una identidad visual, pero presentan estructuras de navegación y composición ajustadas a las necesidades de web y móvil.

3. Artefactos incluidos

• Style Tile UX/UI: documento de referencia que define la identidad visual y los componentes comunes de Solventa. Incluye la paleta de colores, tipografías, iconografía, botones, campos, alertas y estados.

  Style Tile UX/UI

• Prototipo web: representa los flujos y pantallas del canal web.

  Mockup Web

• Prototipo móvil: representa los flujos y pantallas de la aplicación móvil.

  Mockup Móvil

4. Sistema visual compartido

Los prototipos web y móvil utilizan un sistema visual común para conservar una experiencia coherente entre canales.

• Tipografía: Plus Jakarta Sans se utiliza en títulos y textos destacados; DM Sans se utiliza en descripciones, ayudas y textos de lectura.
• Iconografía: se utilizan Material Symbols Outlined para representar acciones, navegación y estados de forma consistente.
• Color: el azul se usa principalmente para navegación y estructura; el verde lima identifica acciones de avance; los colores complementarios comunican información, advertencias y estados.
• Componentes: ambos canales emplean botones primarios, secundarios y de contorno, además de campos, alertas, etiquetas de estado y controles de selección.

La composición varía según el canal: web presenta más información y acciones agrupadas, mientras que móvil prioriza controles táctiles, mensajes breves y acciones rápidas.