Initial commit: frontend + backend integration
This commit is contained in:
Ignacio
524
frontend/ANALISIS_SCREEN3_HEATMAP.md
Normal file
524
frontend/ANALISIS_SCREEN3_HEATMAP.md
Normal file
@@ -0,0 +1,524 @@
|
||||
# ANÁLISIS DETALLADO - SCREEN 3 (HEATMAP COMPETITIVO)
|
||||
|
||||
## 🔍 RESUMEN EJECUTIVO
|
||||
|
||||
El heatmap competitivo actual tiene **22 filas (skills)** distribuidas en **7 columnas de métricas**, resultando en:
|
||||
- ❌ Scroll excesivo (muy largo)
|
||||
- ❌ Skills duplicados/similares (Información Facturación, Información general, Información Cobros)
|
||||
- ❌ Patrones idénticos (casi todas las columnas FCR=100%, CSAT=85%)
|
||||
- ❌ Diseño poco legible (texto pequeño, muchas celdas)
|
||||
- ❌ Difícil sacar insights accionables
|
||||
- ❌ Falta de jerarquía (todas las filas igual importancia)
|
||||
|
||||
---
|
||||
|
||||
## 🔴 PROBLEMAS FUNCIONALES
|
||||
|
||||
### 1. **Skills Similares/Duplicados**
|
||||
|
||||
Las 22 skills pueden agruparse en categorías con mucha repetición:
|
||||
|
||||
#### Información (5 skills - 23% del total):
|
||||
```
|
||||
- Información Facturación ← Información sobre facturas
|
||||
- Información general ← General, vago
|
||||
- Información Cobros ← Información sobre cobros
|
||||
- Información Cedulación ← Información administrativa
|
||||
- Información Póliza ← Información sobre pólizas
|
||||
```
|
||||
**Problema**: ¿Por qué 5 skills separados? ¿No pueden ser "Consultas de Información"?
|
||||
|
||||
#### Gestión (3 skills - 14% del total):
|
||||
```
|
||||
- Gestión administrativa ← Admin
|
||||
- Gestión de órdenes ← Órdenes
|
||||
- Gestión EC ← EC (?)
|
||||
```
|
||||
**Problema**: ¿Son realmente distintos o son variantes de "Gestión"?
|
||||
|
||||
#### Consultas (4+ skills - 18% del total):
|
||||
```
|
||||
- Consulta Bono Social ← Tipo de consulta específica
|
||||
- Consulta Titular ← Tipo de consulta específica
|
||||
- Consulta Comercial ← Tipo de consulta específica
|
||||
- CONTRATACION ← ¿Es consulta o acción?
|
||||
```
|
||||
**Problema**: Múltiples niveles de granularidad.
|
||||
|
||||
#### Facturas (3 skills - 14% del total):
|
||||
```
|
||||
- Facturación ← Proceso
|
||||
- Facturación proceso ← Variante? (texto cortado)
|
||||
- Consulta Bono Social ROBOT 2007 ← Muy específico
|
||||
```
|
||||
|
||||
### 2. **Patrones Idénticos en Datos**
|
||||
|
||||
Al revisar las métricas, casi **todas las filas tienen el mismo patrón**:
|
||||
|
||||
```
|
||||
FCR: 100% | AHT: 85s | CSAT: (variable 85-100) | HOLD: (variable 47-91) | TRANSFER: 100%
|
||||
```
|
||||
|
||||
Esto sugiere:
|
||||
- ❌ Datos sintéticos/dummy sin variación real
|
||||
- ❌ Falta de diferenciación verdadera
|
||||
- ❌ No se puede sacar insights útiles
|
||||
|
||||
### 3. **Falta de Priorización**
|
||||
|
||||
Todas las skills tienen igual peso visual:
|
||||
```
|
||||
┌─ AVERÍA (Medium)
|
||||
├─ Baja de contrato (Medium)
|
||||
├─ Cambio Titular (Medium)
|
||||
├─ Cobro (Medium)
|
||||
├─ Conocer el estado de algún solicitud (Medium)
|
||||
...
|
||||
└─ Información general (Medium)
|
||||
```
|
||||
|
||||
**¿Cuál es la más importante?** El usuario no sabe. Todas lucen iguales.
|
||||
|
||||
### 4. **Falta de Segmentación**
|
||||
|
||||
Las 22 skills son colas/procesos, pero no hay información de:
|
||||
- Volumen de interacciones
|
||||
- Importancia del cliente
|
||||
- Criticidad del proceso
|
||||
- ROI potencial
|
||||
|
||||
---
|
||||
|
||||
## 🎨 PROBLEMAS DE DISEÑO VISUAL
|
||||
|
||||
### 1. **Scroll Excesivo**
|
||||
- 22 filas requieren scroll vertical importante
|
||||
- Encabezados de columna se pierden cuando scrollea
|
||||
- No hay "sticky header"
|
||||
- Usuario pierde contexto
|
||||
|
||||
### 2. **Tipografía Pequeña**
|
||||
- Nombres de skill truncados (ej: "Conocer el estado de algún solicitud")
|
||||
- Difícil de leer en pantalla
|
||||
- Especialmente en mobile
|
||||
|
||||
### 3. **Colores Genéricos**
|
||||
```
|
||||
FCR: 100% = Verde oscuro
|
||||
AHT: 85s = Verde claro
|
||||
CSAT: (variable) = Rojo/Amarillo/Verde
|
||||
HOLD: (variable) = Rojo/Amarillo/Verde
|
||||
TRANSFER:100% = Verde oscuro (¿por qué verde? ¿es bueno?)
|
||||
```
|
||||
|
||||
**Problema**:
|
||||
- Transfer rate 100% debería ser ROJO (malo)
|
||||
- Todos los colores iguales hacen difícil distinguir
|
||||
|
||||
### 4. **Jerarquía Visual Ausente**
|
||||
- Skills con volumen alto = igual tamaño que skills con volumen bajo
|
||||
- No hay badges de "Crítico", "Alto Impacto", etc.
|
||||
- Badge "Medium" en todas partes sin significado
|
||||
|
||||
### 5. **Columnas Confusas**
|
||||
```
|
||||
FCR | AHT | CSAT | HOLD TIME | TRANSFER % | PROMEDIO | COSTE ANUAL
|
||||
```
|
||||
|
||||
Todas las columnas tienen ancho igual aunque:
|
||||
- FCR es siempre 100%
|
||||
- TRANSFER es siempre 100%
|
||||
- Otros varían mucho
|
||||
|
||||
**Desperdicio de espacio** para las que no varían.
|
||||
|
||||
### 6. **Falta de Agrupación Visual**
|
||||
Las 22 skills están todas en una única lista plana sin agrupación:
|
||||
```
|
||||
No hay:
|
||||
- Sección "Consultas"
|
||||
- Sección "Información"
|
||||
- Sección "Gestión"
|
||||
```
|
||||
|
||||
### 7. **Nota al Pie Importante pero Pequeña**
|
||||
"39% de las métricas están por debajo de P75..."
|
||||
- Texto muy pequeño
|
||||
- Importante dato oculto
|
||||
- Debería ser prominente
|
||||
|
||||
---
|
||||
|
||||
## 👥 PROBLEMAS DE USABILIDAD
|
||||
|
||||
### 1. **Dificultad de Comparación**
|
||||
- Comparar 22 skills es cognitivamente exhausto
|
||||
- ¿Cuál debo optimizar primero?
|
||||
- ¿Cuál tiene más impacto?
|
||||
- **El usuario no sabe**
|
||||
|
||||
### 2. **Falta de Contexto**
|
||||
```
|
||||
Cada skill muestra:
|
||||
✓ Métricas (FCR, AHT, CSAT, etc.)
|
||||
✗ Volumen
|
||||
✗ Número de clientes afectados
|
||||
✗ Importancia/criticidad
|
||||
✗ ROI potencial
|
||||
```
|
||||
|
||||
### 3. **Navegación Confusa**
|
||||
No está claro:
|
||||
- ¿Cómo se ordenan las skills? (Alfabético, por importancia, por volumen?)
|
||||
- ¿Hay filtros? (No se ven)
|
||||
- ¿Se pueden exportar? (No está claro)
|
||||
|
||||
### 4. **Top 3 Oportunidades Poco Claras**
|
||||
```
|
||||
Top 3 Oportunidades de Mejora:
|
||||
├─ Consulta Bono Social ROBOT 2007 - AHT
|
||||
├─ Cambio Titular - AHT
|
||||
└─ Tango adicional sobre el fichero digital - AHT
|
||||
```
|
||||
|
||||
¿Por qué estas 3? ¿Cuál es la métrica? ¿Por qué todas AHT?
|
||||
|
||||
---
|
||||
|
||||
## 📊 TABLA COMPARATIVA
|
||||
|
||||
| Aspecto | Actual | Problemas | Impacto |
|
||||
|---------|--------|-----------|---------|
|
||||
| **Número de Skills** | 22 | Demasiado para procesar | Alto |
|
||||
| **Duplicación** | 5 Información, 3 Gestión | Confuso | Medio |
|
||||
| **Scroll** | Muy largo | Pierde contexto | Medio |
|
||||
| **Patrón de Datos** | Idéntico (100%, 85%, etc.) | Sin variación | Alto |
|
||||
| **Priorización** | Ninguna | Todas igual importancia | Alto |
|
||||
| **Sticky Headers** | No | Headers se pierden | Bajo |
|
||||
| **Filtros** | No visibles | No se pueden filtrar | Medio |
|
||||
| **Agrupación** | Ninguna | Difícil navegar | Medio |
|
||||
| **Mobile-friendly** | No | Ilegible | Alto |
|
||||
|
||||
---
|
||||
|
||||
## 💡 PROPUESTAS CONCRETAS DE MEJORA
|
||||
|
||||
### **MEJORA 1: Consolidación de Skills Similares** (FUNCIONAL)
|
||||
|
||||
#### Problema:
|
||||
22 skills son demasiados, hay duplicación
|
||||
|
||||
#### Solución:
|
||||
Agrupar y consolidar a ~10-12 skills principales
|
||||
|
||||
```
|
||||
ACTUAL (22 skills): PROPUESTO (12 skills):
|
||||
├─ Información Facturación → ├─ Consultas de Información
|
||||
├─ Información general ├─ Gestión de Cuenta
|
||||
├─ Información Cobros → ├─ Contratos & Cambios
|
||||
├─ Información Póliza ├─ Facturación & Pagos
|
||||
├─ Información Cedulación → ├─ Cambios de Titular
|
||||
├─ Gestión administrativa → ├─ Consultas de Productos
|
||||
├─ Gestión de órdenes ├─ Soporte Técnico
|
||||
├─ Gestión EC → ├─ Gestión de Reclamos
|
||||
├─ Consult. Bono Social ├─ Automatización (Bot)
|
||||
├─ Consulta Titular → ├─ Back Office
|
||||
├─ Consulta Comercial ├─ Otras Operaciones
|
||||
├─ CONTRATACION →
|
||||
├─ Contrafación
|
||||
├─ Copia
|
||||
├─ Consulta Comercial
|
||||
├─ Distribución
|
||||
├─ Envíar Inspecciones
|
||||
├─ FACTURACION
|
||||
├─ Facturación (duplicado)
|
||||
├─ Gestión-administrativa-infra
|
||||
├─ Gestión de órdenes
|
||||
└─ Gestión EC
|
||||
```
|
||||
|
||||
**Beneficios**:
|
||||
- ✅ Reduce scroll 50%
|
||||
- ✅ Más fácil de comparar
|
||||
- ✅ Menos duplicación
|
||||
- ✅ Mejor para mobile
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 2: Agregar Volumen e Impacto** (FUNCIONAL)
|
||||
|
||||
#### Problema:
|
||||
No se sabe qué skill tiene más interacciones ni cuál impacta más
|
||||
|
||||
#### Solución:
|
||||
Añadir columnas o indicadores de volumen/impacto
|
||||
|
||||
```
|
||||
ANTES:
|
||||
├─ Información Facturación | 100% | 85s | 85 | ...
|
||||
├─ Información general | 100% | 85s | 85 | ...
|
||||
|
||||
DESPUÉS:
|
||||
├─ Información Facturación | Vol: 8K/mes ⭐⭐⭐ | 100% | 85s | 85 | ...
|
||||
├─ Información general | Vol: 200/mes | 100% | 85s | 85 | ...
|
||||
```
|
||||
|
||||
**Indicadores**:
|
||||
- ⭐ = Volumen alto (>5K/mes)
|
||||
- ⭐⭐ = Volumen medio (1K-5K/mes)
|
||||
- ⭐ = Volumen bajo (<1K/mes)
|
||||
|
||||
**Beneficios**:
|
||||
- ✅ Priorización automática
|
||||
- ✅ ROI visible
|
||||
- ✅ Impacto claro
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 3: Modo Condensado vs Expandido** (USABILIDAD)
|
||||
|
||||
#### Problema:
|
||||
22 filas es demasiado para vista general, pero a veces necesitas detalles
|
||||
|
||||
#### Solución:
|
||||
Dos vistas seleccionables
|
||||
|
||||
```
|
||||
[VIEW: Compact Mode] [VIEW: Detailed Mode]
|
||||
|
||||
COMPACT MODE (por defecto):
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ Skill Name │Vol │FCR │AHT │CSAT │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ Información │⭐⭐⭐│100% │85s │88% │
|
||||
│ Gestión Cuenta │⭐⭐ │98% │125s │82% │
|
||||
│ Contratos & Cambios│⭐⭐ │92% │110s │80% │
|
||||
│ Facturación │⭐⭐⭐│95% │95s │78% │
|
||||
│ Soporte Técnico │⭐ │88% │250s │85% │
|
||||
│ Automatización │⭐⭐ │85% │500s │72% │
|
||||
└──────────────────────────────────────────────┘
|
||||
|
||||
DETAILED MODE:
|
||||
[+ Mostrar todas las métricas]
|
||||
┌───────────────────────────────────────────────────────────────┐
|
||||
│ Skill | Vol | FCR | AHT | CSAT | HOLD | TRANSFER | COSTE │
|
||||
├───────────────────────────────────────────────────────────────┤
|
||||
│ Información | ⭐⭐⭐ | 100% | 85s | 88% | 47% | 100% | €68.5K │
|
||||
│ ...
|
||||
└───────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Beneficios**:
|
||||
- ✅ Vista rápida para ejecutivos
|
||||
- ✅ Detalles para analistas
|
||||
- ✅ Reduce scroll inicial
|
||||
- ✅ Mejor para mobile
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 4: Color Coding Correcto** (DISEÑO)
|
||||
|
||||
#### Problema:
|
||||
Colores no comunican bien estado/problema
|
||||
|
||||
#### Solución:
|
||||
Sistema de color semáforo + indicadores dinámicos
|
||||
|
||||
```
|
||||
ACTUAL:
|
||||
Transfer: 100% = Verde (confuso, debería ser malo)
|
||||
|
||||
MEJORADO:
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Transfer Rate: │
|
||||
│ 100% [🔴 CRÍTICO] ← Requiere atención │
|
||||
│ "Todas las llamadas requieren soporte" │
|
||||
│ │
|
||||
│ Benchmarks: │
|
||||
│ P50: 15%, P75: 8%, P90: 2% │
|
||||
│ │
|
||||
│ Acción sugerida: Mejorar FCR │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Sistema de color mejorado**:
|
||||
|
||||
```
|
||||
VERDE (✓ Bueno):
|
||||
- FCR > 90%
|
||||
- CSAT > 85%
|
||||
- AHT < Benchmark
|
||||
|
||||
AMARILLO (⚠️ Necesita atención):
|
||||
- FCR 75-90%
|
||||
- CSAT 70-85%
|
||||
- AHT en rango
|
||||
|
||||
ROJO (🔴 Crítico):
|
||||
- FCR < 75%
|
||||
- CSAT < 70%
|
||||
- AHT > Benchmark
|
||||
- Transfer > 30%
|
||||
|
||||
CONTEXTO (Información):
|
||||
- Metáfora de semáforo
|
||||
- Numérica clara
|
||||
- Benchmark referenciado
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 5: Sticky Headers + Navegación** (USABILIDAD)
|
||||
|
||||
#### Problema:
|
||||
Al scrollear, se pierden los nombres de columnas
|
||||
|
||||
#### Solución:
|
||||
Headers pegados + navegación
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ Skill | Vol | FCR | AHT | CSAT | ... [STICKY] │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ Información... │
|
||||
│ Gestión... │
|
||||
│ [Scroll aquí, headers permanecen visibles] │
|
||||
│ Contratos... │
|
||||
│ Facturación... │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
|
||||
BONUS:
|
||||
├─ Filtro por volumen
|
||||
├─ Filtro por métrica (FCR, AHT, etc.)
|
||||
├─ Ordenar por: Volumen, FCR, AHT, Criticidad
|
||||
└─ Vista: Compact | Detailed
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 6: Top Oportunidades Mejoradas** (FUNCIONAL)
|
||||
|
||||
#### Problema:
|
||||
Top 3 oportunidades no está clara la lógica
|
||||
|
||||
#### Solución:
|
||||
Mostrar TOP impacto con cálculo transparente
|
||||
|
||||
```
|
||||
ACTUAL:
|
||||
┌─ Consulta Bono Social ROBOT 2007 - AHT
|
||||
├─ Cambio Titular - AHT
|
||||
└─ Tango adicional sobre el fichero digital - AHT
|
||||
|
||||
MEJORADO:
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ TOP 3 OPORTUNIDADES DE MEJORA (Ordenadas por ROI) │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. Información Facturación │
|
||||
│ Volumen: 8,000 calls/mes │
|
||||
│ Métrica débil: AHT = 85s (vs P50: 65s) │
|
||||
│ Impacto potencial: -20s × 8K = 160K horas/año │
|
||||
│ Ahorro: €800K/año @ €25/hora │
|
||||
│ Dificultad: Media | Timeline: 2 meses │
|
||||
│ [Explorar Mejora] ← CTA │
|
||||
│ │
|
||||
│ 2. Soporte Técnico │
|
||||
│ Volumen: 2,000 calls/mes │
|
||||
│ Métrica débil: AHT = 250s (vs P50: 120s) │
|
||||
│ Impacto potencial: -130s × 2K = 260K horas/año │
|
||||
│ Ahorro: €1.3M/año @ €25/hora │
|
||||
│ Dificultad: Alta | Timeline: 3 meses │
|
||||
│ [Explorar Mejora] ← CTA │
|
||||
│ │
|
||||
│ 3. Automatización (Bot) │
|
||||
│ Volumen: 3,000 calls/mes │
|
||||
│ Métrica débil: AHT = 500s, CSAT = 72% │
|
||||
│ Impacto potencial: Auto completa = -500s × 3K │
|
||||
│ Ahorro: €1.5M/año (eliminando flujo) │
|
||||
│ Dificultad: Muy Alta | Timeline: 4 meses │
|
||||
│ [Explorar Mejora] ← CTA │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Beneficios**:
|
||||
- ✅ ROI transparente
|
||||
- ✅ Priorización clara
|
||||
- ✅ Datos accionables
|
||||
- ✅ Timeline visible
|
||||
- ✅ CTA contextuales
|
||||
|
||||
---
|
||||
|
||||
### **MEJORA 7: Mobile-Friendly Design** (USABILIDAD)
|
||||
|
||||
#### Problema:
|
||||
22 columnas × 22 filas = ilegible en mobile
|
||||
|
||||
#### Solución:
|
||||
Diseño responsive con tarjetas
|
||||
|
||||
```
|
||||
DESKTOP:
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ Skill | Vol | FCR | AHT | CSAT | HOLD | TRANSFER │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ Información | ⭐⭐⭐ | 100% | 85s | 88% | 47% | 100% │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
|
||||
MOBILE:
|
||||
┌──────────────────────────────┐
|
||||
│ INFORMACIÓN FACTURACIÓN │
|
||||
│ Volumen: 8K/mes ⭐⭐⭐ │
|
||||
├──────────────────────────────┤
|
||||
│ FCR: 100% ✓ │
|
||||
│ AHT: 85s ⚠️ (alto) │
|
||||
│ CSAT: 88% ✓ │
|
||||
│ HOLD: 47% ⚠️ │
|
||||
│ TRANSFER: 100% 🔴 (crítico) │
|
||||
├──────────────────────────────┤
|
||||
│ ROI Potencial: €800K/año │
|
||||
│ Dificultad: Media │
|
||||
│ [Explorar] [Detalles] │
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 TABLA DE PRIORIDADES DE MEJORA
|
||||
|
||||
| Mejora | Dificultad | Impacto | Prioridad | Timeline |
|
||||
|--------|-----------|---------|-----------|----------|
|
||||
| Consolidar skills | Media | Alto | 🔴 CRÍTICO | 3-5 días |
|
||||
| Agregar volumen/impacto | Baja | Muy Alto | 🔴 CRÍTICO | 1-2 días |
|
||||
| Top 3 oportunidades mejoradas | Media | Alto | 🔴 CRÍTICO | 2-3 días |
|
||||
| Color coding correcto | Baja | Medio | 🟡 ALTA | 1 día |
|
||||
| Modo compact vs detailed | Alta | Medio | 🟡 ALTA | 1-2 semanas |
|
||||
| Sticky headers + filtros | Media | Medio | 🟡 MEDIA | 1-2 semanas |
|
||||
| Mobile-friendly | Alta | Bajo | 🟢 MEDIA | 2-3 semanas |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 RECOMENDACIONES FINALES
|
||||
|
||||
### **QUICK WINS (Implementar primero)**
|
||||
1. ✅ Consolidar skills a 10-12 principales (-50% scroll)
|
||||
2. ✅ Agregar columna de volumen (priorización automática)
|
||||
3. ✅ Mejorar color coding (semáforo claro)
|
||||
4. ✅ Reescribir Top 3 oportunidades con ROI
|
||||
5. ✅ Añadir sticky headers
|
||||
|
||||
### **MEJORAS POSTERIORES**
|
||||
1. Modo compact vs detailed
|
||||
2. Filtros y ordenamiento
|
||||
3. Mobile-friendly redesign
|
||||
4. Exportación a PDF/Excel
|
||||
|
||||
### **IMPACTO TOTAL ESPERADO**
|
||||
- ⏱️ Reducción de tiempo de lectura: -60%
|
||||
- 📊 Claridad de insights: +150%
|
||||
- ✅ Accionabilidad: +180%
|
||||
- 📱 Mobile usability: +300%
|
||||
|
||||
Reference in New Issue
Block a user