Saltar al contenido principal

Diseño del Backoffice

Descripción general y estructura del diseño para la aplicación backoffice de Percus.

Mockup Interactivo

Ver el mockup interactivo completo: static/design/backoffice-simplified.html

Ábrelo directamente en tu navegador desde: static/design/backoffice-simplified.html

Descripción General del Diseño​

El backoffice de Percus es una aplicación orientada al cliente para gestionar campañas de video personalizadas. Está diseñada para equipos de marketing y administradores de campañas en instituciones financieras, no para administración interna.

Decisiones Clave de Diseño​

  • Enfocado en el cliente: Solo las funciones que los clientes necesitan para gestionar sus campañas
  • Centrado en proyectos: Todo organizado alrededor de campañas de marketing
  • Versionado de plantillas: Flujo claro de producción/pruebas/rollback
  • Analíticas de campaña: Métricas específicas para cada proyecto

Estructura de la Aplicación​

Página de Inicio​

Dashboard simple con:

  • KPIs de alto nivel (renders totales, proyectos activos, tasas de visualización, tasas de completado)
  • Cuadrícula de tarjetas de proyecto con búsqueda
  • Acceso rápido a todas las campañas
  • Navegación superior limpia (logo, notificaciones, menú de usuario)

Dentro de un Proyecto​

Al hacer clic en un proyecto, obtienes tres pestañas enfocadas:

1. Pestaña Plantillas​

Gestiona versiones de plantillas con control de versiones completo:

  • Tabla de versiones mostrando todas las versiones de plantilla
  • Indicadores de estado:
    • 🟢 Producción - Versión actualmente activa sirviendo a usuarios
    • 🔵 Pruebas - Versión beta para QA
    • ⚪ Anterior - Versiones archivadas disponibles para rollback
  • Acciones: Ver, Editar, Promover a Producción, Rollback
  • Metadatos: Fecha de creación, modificado por, cantidad de renders por versión

2. Pestaña Integración​

Documentación técnica y configuración:

  • Credenciales API - ID de proyecto y clave API
  • Integración JavaScript - Código de incrustación con ejemplo
  • Ejemplos de REST API - Muestras cURL y código
  • Entrega por Email - Enviar videos vía API de email
  • Botones de copiar al portapapeles para todos los fragmentos de código

3. Pestaña Analíticas​

Métricas de rendimiento específicas de campaña:

  • Tarjetas de Métricas Clave:
    • Renders Totales
    • Tasa de Visualización (% de renders que fueron vistos)
    • Tasa de Completado (% vistos hasta el final)
    • Tasa de Clics en CTA (% que hizo clic en llamado a la acción)
  • Gráficos:
    • Renders en el tiempo (gráfico de líneas)
    • Embudo de engagement (renderizado → visto → completado → clic)
    • Distribución de duración de visualización
  • Comparaciones de período (vs. período anterior)

Patrón de Navegación​

Consistente en todas las páginas:

  • Logo - Regresa al dashboard
  • Campana de notificaciones - Alertas del sistema
  • Menú de usuario - Perfil y configuración

Cuando estás dentro de un proyecto:

  • Botón Atrás - Regresar al dashboard
  • Nombre del proyecto - Contexto actual
  • Navegación por pestañas - Plantillas | Integración | Analíticas

Sin Barra Lateral​

Intencionalmente simple - sin navegación lateral compleja. Los clientes acceden a proyectos desde el dashboard y navegan vía pestañas dentro de proyectos.

Diseño Visual​

Uso del Color​

Acciones Primarias:

  • Naranja (#FF6B35) para botones primarios, CTAs, estados activos
  • Crea energía y atrae atención a acciones clave

Navegación y Estructura:

  • Azul Profundo (#0F4C81) para encabezados, marca
  • Azul Cielo (#1E88E5) para elementos interactivos secundarios

Datos y Contenido:

  • Grises pizarra para jerarquía de texto
  • Verde para métricas positivas
  • Rojo para errores/advertencias

Estados Interactivos​

Tarjetas:

  • Hover: Borde izquierdo naranja + sombra sutil
  • Crea affordance clara para elementos clickeables

Botones:

  • Primario: Fondo naranja, más oscuro en hover
  • Secundario: Blanco con borde, borde naranja en hover

Pestañas:

  • Activa: Subrayado naranja + texto en negrita
  • Hover: Texto azul profundo

Tipografía​

  • Fuente: Inter (con fallback a fuentes del sistema)
  • Jerarquía: Progresión clara de tamaño y peso
  • Legibilidad: Alturas de línea y espaciado optimizados

Principios de Experiencia de Usuario​

1. Enfoque en el Flujo de Trabajo​

Mostrar solo lo necesario para la tarea actual. Las funciones de administración (gestión de usuarios, creación de plantillas) están en una interfaz de administración separada.

2. Indicadores de Estado Claros​

Las versiones Producción vs. Pruebas vs. Anterior son inmediatamente obvias con insignias codificadas por color e indicadores emoji.

3. Analíticas Enfocadas en Campaña​

Las métricas son específicas del proyecto. Los usuarios se preocupan por "¿cómo está funcionando ESTA campaña?" no por estadísticas globales.

4. Integración Fácil​

Las muestras de código están listas para copiar y pegar. No hay que buscar credenciales o descifrar la estructura de la API.

5. Confianza en Control de Versiones​

El rollback siempre está disponible. Las versiones de prueba no afectan producción. Registro de auditoría claro de quién cambió qué.

Stack Tecnológico​

  • Framework: Next.js 14+
  • Estilos: Tailwind CSS
  • Componentes: Headless UI
  • Gráficos: Recharts o Chart.js
  • Iconos: Heroicons + Emoji

Comportamiento Responsivo​

  • Desktop-first para el backoffice (los administradores de campañas trabajan en computadoras)
  • Responsivo hasta tablet (768px)
  • Vista móvil muestra versión simplificada para monitoreo sobre la marcha