Renfe
PUNTO DE PARTIDA
Hace unos meses atrás realicé el Máster de Usabilidad y experiencia de usuario que imparte Kschool. Y como en todo máster, durante el curso realicé el trabajo final de Máster (TFM). A mi compañera Andrea y a mi nos tocó hacerlo de Renfe.
EL PROBLEMA
El cliente tenía una necesidad muy clara: necesitaban evolucionar, dar un cambio y apostar por una nueva experiencia digital para mejorar la calidad del servicio.
Como solo disponíamos de 6 meses para realizar el trabajo, vimos necesario limitar el alcance al proceso de compra de la web, dejando las páginas internas fuera del proyecto.
HERRAMIENTAS UTILIZADAS
Herramientas:
Papel y lápiz, Axure, Sketch, Adobe Illustrator, Adobe Photoshop, Keynotes
Tareas:
Mapa de tendencias, Diagnóstico de la industria, las cinco fuerzas de Porter, Benchmark, DAFO, Reto, hipótesis y los porqués, Diagrama de prioridades, Entrevistas, Encuestas, Interacción constructiva, Test de usuario, Observación en la estación, Personas, Mapa de empatía, Escenario, Customer Journey, Proposition canvas, User statements, Scope canvas, Árbol web, Flujos de navegación, Sketching, Prototipo, Test, propuesta final.
PROCESO DE DISEÑO
El punto de partida no fue fácil. Nos entregaron un brief con una serie de condiciones sobre el encargo y teníamos pocas semanas para dar una respuesta. No sabíamos por dónde empezar pero consideramos que lo que debíamos hacer era buscar información para conocer a Renfe y verificar que lo que nos estaban pidiendo en ese brief era correcto, si teníamos que proponer nuevas propuestas o modificar algunas condiciones que nos habían pedido.
Una vez tuvimos claro lo que quería Renfe, nos pusimos a trabajar con una estrategia UX para conocer a los usuarios y crear un producto que solucionara sus problemas y necesidades.
El diseño fue centrado en el usuario (DCU) de principio a fin. Realizamos entrevistas, cuestionarios e interacciones constructivas para poder crear a las User personas.
Nos salieron dos personas:
El tercer paso fue definir la arquitectura de la página principal y los flujos de navegación para pasar a hacer el sketching y los wireframes.
Finalmente pasamos a la parte del prototipado. Durante todo el proceso fuimos realizando tests de usuario con el objetivo de conseguir que la web de Renfe tuviera un proceso fácil, guiado e intuitivo. En este apartado se muestra un análisis de los errores que nos fuimos encontrando y cómo rediseñamos el contenido hasta conseguir un producto fácil de utilizar.
Muestro un ejemplo de la evolución del buscador durante los diferentes test que fuimos realizando:
- Varios usuarios intentaron rellanar el destino en la fecha de vuelta.
- Usuarios con nivel bajo no intuían con facilidad que sucedía si apretaban a “(+) opciones”
- Pocos usuarios prestan atención a seleccionar que tipo de viaje van a realizar. Directamente introducen solo la fecha de ida o la de ida y vuelta.
- Conseguimos que la información sea más clara y no cree dudas.
- Demasiado complejo para ser la búsqueda inicial.
- Algunos dudan si realmente lo tienen que rellenar para poder hacer la búsqueda.
- No se entiende que es lo que se va a reservar o se ha reservado.
- Demasiada información a seleccionar y rellenar.
PROPUESTA FINAL WEB
En la propuesta web nos basamos en un usuario que entra por primera vez en la web de Renfe y no se ha registrado.
Lo que quisimos ofrecerle es un proceso sencillo en el cual se sintiera cómodo con la compra y viera que podía obtener su billete sin frustraciones.
Para ello seguimos un diseño minimalista y organizado en el que una vez finalizada una tarea, te pasa a la siguiente.
Home
Listado
En el siguiente video podemos ver como una vez se selecciona una tarifa, la página se desliza hacia abajo para llevarte a la siguiente tarea. Con la barra lateral, el usuario puede comprobar que lo que ha seleccionado es lo correcto y, obviamente, puede volver hacia arriba para rectificar aquello que ha seleccionado.
En el caso de que fuesen más de un pasajero a la hora de escoger la tarifa la página también te irá llevando una a una por cada tarea a realizar. Al realizar las entrevistas descubrimos que el 90% de los usuarios quiere comprar el billete más económico. Por eso hemos situado en la parte superior de la página la opción para que escoja para cada pasajero el billete más barato. Así, la tarea se puede hacer mucho más rápida. En este corto video se puede ver el procedimiento:
Página de selección de asiento
Página de pasajeros
Página de pago
Página de confirmación
PROPUESTA FINAL MÓVIL
En la versión móvil nos focalizamos en un usuario registrado que ha guardado información sobre los pasajeros, tarjeta de crédito y otros datos que son importantes para la compra.
Para optimizar la compra hemos creado botones que facilitan el proceso:
- Botón para seleccionar la tarifa más barata para cada pasajero. Según las encuestas nos salió que la gran mayoría de usuarios escogen los billetes más baratos. De esta manera, haciendo un simple click, el sistema asigna a cada pasajero la tarifa más económica.
- Botón de completar datos a los pasajeros: se puede activar y desactivar y lo que hace es autorellenar todos los datos para que pueda ir mucho más rápido a la siguiente tarea.
Para el método de pago, el sistema podrá guardar diferentes tarjetas y ofrecerá aquel sistema con el que el usuario paga habitualmente.
En definitiva, se ha intentando solucionar las necesidades de Noelia, una persona que compra habitualmente y necesita, entre otras cosas, un proceso rápido.
Finalmente te muestro un pequeño vídeo publicitario de la aplicación móvil realizado con after effects:
Aquí llegamos al final del resumen del proyecto, pero si realmente quieres saber más puedes ver toda la documentación del proyecto.