Rediseño · Academia de idiomas
Proyecto Índigo
Un abandono que parecía de precio y era de diseño. Academia Valdecantos.
- hallazgos
- 16
- pantallas
- 9
El punto de partida.
(abre la imagen ampliada en otra pestaña)Qué encontramos antes de diseñar.
- hallazgos
- 16
- bloqueante
- 1
- graves
- 6
- moderados y menores
- 9
Recuentos de la auditoría: 10 se resuelven con el rediseño del flujo, 5 con ajustes rápidos y 1 aparte. No son resultados de negocio.
El abandono no se explica solo por el precio. El proceso pide cuatro decisiones a la vez, esconde el precio total hasta el pago y, si el horario elegido no tiene plazas, lo borra todo en el último paso. Quien abandona por precio se va al ver el precio, no tres pantallas después.
(abre la imagen ampliada en otra pestaña)Cuatro decisiones a la vez, sin nada para decidir
Idioma y nivel, modalidad, sede y horario están en el mismo bloque. Cada una depende de las demás —el horario depende de la sede, y el nivel es la duda más difícil— y ninguna viene explicada. Además, los desplegables no se filtran entre sí: se puede elegir la sede Ciudad Jardín y un horario de la sede Centro.
(abre la imagen ampliada en otra pestaña)El precio real solo se ve al pagar
La ficha del curso no tiene precio y remite a «Tarifas», donde la tasa de matrícula está en una nota al pie. En el pago aparecen por primera vez la tasa (45 €) y los libros (58 €): el total pasa de 594 € a 697 €. Y la pantalla no recuerda qué curso, sede ni horario se había elegido.
(abre la imagen ampliada en otra pestaña)Si no hay plazas, vuelta a empezar
La disponibilidad del grupo no se comprueba hasta pulsar «Pagar y finalizar». Si el horario está completo, la página vuelve a la matrícula con los cuatro desplegables vacíos, sin conservar los datos personales y sin decir qué horarios sí tienen plaza. Es el punto de más compromiso del proceso y el más fácil de abandonar.
Ver los 16 hallazgos del registro
| ID | Hallazgo | Severidad | Cómo se resuelve | Pantallas |
|---|---|---|---|---|
| H-01 | Si el horario no tiene plazas, el aviso llega al pagar y se borra todo lo elegido | Bloqueante | Rediseño del flujo | Matrícula · Datos · Error |
| H-02 | El precio total aparece por primera vez al pagar, con costes que no se habían avisado | Grave | Rediseño del flujo | Ficha · Datos · Tarifas |
| H-03 | La confirmación no dice si hay plaza, cuándo empieza ni qué se ha cobrado | Grave | Rediseño del flujo | Confirmación |
| H-04 | No se mide en qué paso se abandona la matrícula | Grave | Ajuste rápido | Analítica |
| H-05 | Los desplegables permiten elegir combinaciones que no existen | Grave | Rediseño del flujo | Matrícula |
| H-06 | No hay ayuda para saber qué nivel elegir | Grave | Rediseño del flujo | Ficha · Matrícula |
| H-07 | La matrícula pide cuatro decisiones a la vez en una sola pantalla | Grave | Rediseño del flujo | Matrícula |
| H-08 | Se piden diez datos obligatorios, algunos innecesarios para matricularse | Moderado | Rediseño del flujo | Datos |
| H-09 | La casilla de publicidad viene marcada de serie | Moderado | Ajuste rápido | Datos |
| H-10 | La acción principal de la portada es «Más información», no matricularse | Moderado | Ajuste rápido | Portada |
| H-11 | El texto del carrusel de escritorio se lee mal sobre la foto | Moderado | Ajuste rápido | Portada · Escritorio |
| H-12 | Textos y bordes con poco contraste en toda la web | Moderado | Ajuste rápido | Todo el recorrido |
| H-13 | Al pagar no se recuerda qué curso se ha elegido | Moderado | Rediseño del flujo | Datos |
| H-14 | La matrícula de escritorio tiene una barra lateral con noticias y Facebook | Menor | Rediseño del flujo | Matrícula · Escritorio |
| H-15 | Los horarios solo están en un PDF | Menor | Rediseño del flujo | Ficha |
| H-16 | El logo no se lee a tamaño pequeño | Menor | Aparte (identidad) | Cabecera y pie |
Qué se rediseña y qué no.
Dentro del rediseño
- Portada: la entrada al proceso
- Ficha del curso, con el precio y los horarios dentro
- Los siete pasos de la matrícula
- Todos los estados y casos límite
Fuera del rediseño
La marca se mantiene
Los colores, la tipografía y el sello de Valdecantos siguen siendo los suyos. Un rediseño de flujo no es una excusa para cambiar la identidad de un cliente.
El logo, a un trabajo aparte (H-16)
El sello no se lee a 40 px: solo se distingue «AV». Es un hallazgo real, pero se resuelve con una versión reducida del logo, que es un encargo de identidad con su propio alcance. Queda registrado y derivado, no colado dentro de este proyecto.
Cuatro ajustes rápidos, fuera del flujo
Medición por pasos (H-04), casilla de publicidad desmarcada (H-09), texto del carrusel (H-11) y contrastes de toda la web (H-12) no necesitan rediseño: se corrigen sobre lo que ya existe.
Nada se decide por gusto.
- // 01
Una decisión por pantalla
En el orden en que se piensa: nivel, modalidad, sede y horario. Cada paso pregunta una cosa y da el contexto para responderla.
H-07H-06 - // 02
El precio acompaña todo el recorrido
Se ve en la ficha del curso y en el resumen de cada paso. El total real —cuotas, tasa y material— se desglosa antes de pagar, no al pagar.
H-02H-13 - // 03
Solo se ofrece lo que existe
Cada opción se filtra según lo elegido antes. Los horarios completos aparecen desactivados, con las plazas que quedan y el motivo.
H-05H-01 - // 04
Nada se pierde
Volver atrás, un error de validación o un pago rechazado conservan todo lo elegido. Cambiar un dato lleva al paso exacto y vuelve al resumen.
H-01 - // 05
La duda del nivel se resuelve dentro
Los niveles se describen por lo que sabes hacer, y hay una prueba corta dentro del propio flujo. Quien sale a hacer una prueba en PDF no vuelve.
H-06
El flujo, paso a paso.
En todos los pasos: barra de progreso y resumen desplegable de lo elegido hasta el momento. Las etiquetas H-XX son los hallazgos de la auditoría que resuelve cada pantalla.
Antes y después.
La portada dice qué hacer
El carrusel anunciaba «Matrícula abierta» y el botón decía «Más información». Ahora el mensaje va sobre fondo sólido, el botón dice lo que hace y la matrícula está a un clic desde cualquier página.
La ficha ya trae el precio y los horarios
Antes remitía a «Tarifas» y a un PDF de horarios de 2,4 MB. Ahora el precio mensual, los niveles explicados y los horarios con plaza están en la misma página, y el nivel se elige aquí mismo.
Cuatro decisiones pasan a ser una por paso
La pantalla que concentraba idioma, nivel, modalidad, sede y horario se convierte en pasos con progreso visible. Cada opción llega explicada y filtrada por lo elegido antes.
El total, antes de pagar y no al pagar
La pantalla de pago no recordaba qué se había elegido y sumaba dos costes nuevos. Ahora hay resumen editable, desglose de lo que se paga hoy y del curso completo, y la plaza queda reservada mientras se paga.
Las plazas se ven antes, no después
El aviso de «sin plazas» llegaba al pagar y vaciaba el formulario. Ahora cada horario muestra las plazas que quedan y los completos aparecen desactivados, con la opción de avisar si se libera una.
Son recuentos del diseño, no resultados conseguidos. Sin implantar el rediseño en un negocio real no hay resultados que enseñar, y prefiero decirlo.
| Web actual | Rediseño | |
|---|---|---|
| Decisiones en la pantalla crítica | 4 | 1 |
| Datos obligatorios | 10 | 6 |
| Cuándo se ve el precio total | Al pagar | Desde la ficha del curso |
| Pasos del proceso | 2 | 6 (5 si es online) |
| Apartados del menú en escritorio | 8 | 5 |
Y en escritorio.
La pantalla de matrícula
Estados y casos límite.
- Prueba de nivel
- Diez preguntas dentro del propio flujo y un nivel recomendado. Sigue existiendo la opción de hacerla en la sede.
- Horario completo
- Desactivado y explicado, con aviso si queda plaza. Nunca se descubre al pagar.
- Sin horarios en esa sede
- Se proponen otras sedes u online con el mismo nivel.
- Error en un campo
- Mensaje junto al campo, al salir de él. No se borra nada de lo escrito.
- Pago rechazado
- Vuelta a «Revisar y pagar» con todo intacto y la plaza aún reservada.
- Reserva caducada
- Pasados quince minutos se comprueba de nuevo la plaza antes de cobrar.
- Volver atrás
- Cada paso conserva lo elegido. «Cambiar» en el resumen lleva al paso exacto.
- Cargando
- Esqueleto de las opciones mientras se consultan las plazas disponibles.
(abre la imagen ampliada en otra pestaña)Prueba de nivel 
(abre la imagen ampliada en otra pestaña)Nivel recomendado 
(abre la imagen ampliada en otra pestaña)Horario completo 
(abre la imagen ampliada en otra pestaña)Error en un campo 
(abre la imagen ampliada en otra pestaña)Pago rechazado
Reglas de negocio inventadas para que el ejercicio se sostenga. En un encargo real se validan con el cliente antes de diseñar.
- La academia puede consultar las plazas de cada grupo en tiempo real y reservar una durante quince minutos.
- Hoy se cobra lo mismo que en la web actual: tasa de matrícula, material y primera cuota.
- Los datos obligatorios que quedan (DNI y fecha de nacimiento) son los que la academia necesita para la factura y para los grupos por edad.
Entregables
- Auditoría del flujo con hallazgos priorizados
- Estructura del flujo validada antes de diseñar
- Diseño UI de todas las pantallas, móvil y escritorio
- Prototipo navegable con todos los estados (para el cliente)
- Especificaciones de diseño y comportamiento
- Qué medir antes y después de publicar
¿Tu web tiene un proceso que la gente no termina?
Este ejercicio es conceptual, pero el método es el mismo que en un encargo real: primero se mira dónde se rompe y por qué, y después se rediseña. Cuéntanos tu caso y te decimos qué vemos.
Cuéntanos tu proyecto