YANDiseño de app web y panel
Synergy Insurance Affiliates. Metas, oficinas y agentes en una vista de trabajo
Una plataforma web y móvil para afiliados de seguros, con páginas de prototipo para los roles Super Admin, Admin y Agent. Da seguimiento a metas, ventas, agentes y campañas por oficina e incluye un constructor de formularios.
En resumen
- El problema
- Una red de oficinas de seguros necesita una visión compartida del desempeño, mientras cada rol tiene responsabilidades distintas.
- Mi parte
- Trabajé en interfaces de escritorio y móviles y en los flujos de Super Admin, Office Admin y Agente, con dashboards, metas y un constructor de formularios.
- La decisión clave
- Separar la lectura del desempeño de los cambios en la operación. La navegación agrupa análisis y gestión, mientras un selector de oficina cambia a la vez el alcance del dashboard y del ranking.
- Mi papel
- Flujos por rol e interfaces de escritorio y móvil
- Estado del proyecto
- Diseño de interfaz · archivo de Figma
Pantallas de los archivos de diseño originales de Figma, con datos de ejemplo.
Mi contribución
Trabajé en los flujos de usuario y las interfaces de escritorio y móvil de Synergy Insurance Affiliates, archivada como Media Base / Base Media. El diseño contempla los roles de Super Admin, Office Admin y Agent, con páginas de prototipo separadas para cada rol en ambos formatos.
El material presentado reúne diseño y prototipos en Figma. Las pantallas de escritorio comparten el menú de Super Admin. Los nombres, fotos y cifras son ejemplos utilizados para demostrar la interfaz; el caso no atribuye al proyecto resultados de negocio ni uso en producción.
De los roles a la jerarquía de la información
Los flujos de usuario cubren tres roles: Super Admin, Office Admin y Agent. Desde el panel, el flujo de Super Admin se ramifica en metas, desempeño de afiliados, analítica financiera, el ranking, oficinas afiliadas y formularios.
Los wireframes en gris muestran la jerarquía sin depender de la identidad visual: los indicadores de resumen, las comparaciones y los registros detallados ocupan áreas distintas. En la interfaz final, Analytics, Management y Account separan el seguimiento de las acciones que cambian la operación. Consultar el rendimiento y realizar una tarea administrativa tienen así destinos diferentes.
Primero lo general, luego una oficina
La primera decisión es el alcance de la pregunta: cómo rinde la red y qué oficina requiere una mirada más cercana. El dashboard comienza con renovación, caducidad, retención y pólizas vendidas, junto con Goal Score e ingresos semanales. El diseño mantiene visible el contexto de la red antes de entrar en una oficina concreta.
Affiliate Performance repite esa lectura para una oficina, elegida en un selector en la parte superior. Agrega bloques de color para leads, ventas y tasa de cierre, además de una fila de cifras de gasto, y la columna de la derecha acompaña la elección: el ranking pasa a ser Agent Leaderboard - Office.
Un ranking con los motivos al lado
El Agent Leaderboard da a los mejores agentes tarjetas grandes con leads, ventas, tasa de conversión y una semana de actividad de ventas. El amarillo marca el primer lugar, y la fila de tarjetas sigue por detrás de la columna de la derecha. La tabla de abajo lista a todos los agentes, con bill rate, CPA, gasto, ventas, leads y tasa de conversión en una sola fila.
Una versión corta de esta lista queda en la columna de la derecha, debajo de Notifications, en la mayoría de las pantallas de escritorio, de modo que el ranking y las últimas ventas y leads siguen a la vista durante otras tareas.
Campañas por participación en ventas
Campaign Overview combina una tabla con un gráfico de dona que muestra la participación de cada campaña en las ventas. Las tasas de conversión llevan un punto de color, del rojo en la más baja al verde en la más alta, lo que ayuda a que las campañas débiles resalten en una lista larga. Un filtro acota la vista por oficina, y un interruptor activa la edición.
Formularios creados dentro del producto
El wireframe del constructor reserva espacios separados para el formulario y sus herramientas de edición. El diseño final conserva esa división: las preguntas ocupan la columna principal y el panel derecho añade contenido. Form Builder, Settings y Preview distinguen entre editar una pregunta, configurar el formulario y comprobar el resultado.
Los formularios funcionan como un pequeño editor con tres pestañas: Form Builder, Settings y Preview. Cada pregunta tiene su propio tipo de respuesta y un interruptor para marcarla como obligatoria, y cada bloque se puede duplicar o eliminar. La columna de notificaciones deja su lugar a un panel para agregar preguntas, títulos, imágenes, videos y secciones, o para importar preguntas, con Copy Link y Save Form en la parte superior.
La misma operación en un celular
El diseño móvil prioriza las mismas preguntas operativas con menos detalles simultáneos. El progreso de las metas sigue visible, las tablas muestran menos columnas y añadir un elemento al formulario pasa de un panel permanente a una acción flotante. La tarea sigue disponible mientras el layout se adapta a la pantalla más pequeña.
En un celular, una barra flotante de cinco íconos da acceso a las áreas principales, y las tasas se reacomodan en una cuadrícula de dos por dos sobre el Goal Score. En Goals Settings, unas pestañas separan afiliados y agentes, y cada meta es una tarjeta con su objetivo, su estado semanal o mensual, una barra de progreso y un lápiz para editar.
El ranking conserva su tarjeta amarilla y recorta la tabla a las primeras columnas. El constructor de formularios se apila en una sola columna, con un botón flotante de signo más en el lugar donde el escritorio tiene su panel lateral.
