Llevamos unos meses desarrollando el nuevo vertical de compra de paquetes de vuelo más hotel. Desde el punto de vista de negocio era muy interesante, porque se pueden aplicar precios especiales a estos paquetes resultando muy ventajosos para los clientes y para la empresa.
Con conocimiento previo del desarrollo del vertical de vuelos, el equipo iba a ser mixto con integrantes de distintos perfiles:
- Equipo motor de búsqueda de vuelos (mismos participantes del desarrollo de vuelos)
- Equipo motor de búsqueda de alojamientos
- Equipo proxy, para recibir las peticiones del front y pasarlas al back
- Equipo front
- Equipo UX
Mi misión era doble, por un lado la coordinación del proyecto junto con otra persona técnica, y por otro lado la supervisión de los diseños.
Proceso de diseño
Con el equipo del UX lo primero que hicimos fue desarrollar un becnhmark de las principales empresas de la competencia para analizar como enfocaban ellos este funnel de venta tanto en la vista móvil como desktop y ver a que estaban acostumbrados los usuarios.
A la vez, entrevistamos a varios clientes potenciales para descubrir que les motivaba a buscar un paquete de vuelo más hotel, y cuales eran los puntos de dolor principales que encontraban durante el proceso.
Vimos rápidamente que la compra de un vuelo + hotel, era algo más compleja que la de un alojamiento por el mero hecho de tener más pasos y pedirse más información.
Tras analizar la competencia, vimos que había como 2 formas distintas de navegación. Cuando el usuario introducía un destino de salida, uno de estancia y las fechas había 2 posibilidades:
- Caso 1: Proponerle en una pantalla ya un alojamiento y unos vuelos, y que el usuario los editase si quería. Si le gustaban podría avanzar directamente al formulario de finalización de la compra.
- Caso 2: Llevarle por una serie de pasos (Alojamiento > Vuelo ida > Formulario) para que fuera el propio usuario quien eligiera su alojamiento y sus vuelos, pero ofreciéndole un precio desde con un alojamiento destacado y unos vuelos.
Pongo ejemplos de la vista en escritorio de ambos modelos, siendo el caso 1 de Atrapalo:
Ejemplo del caso 2 de Logitravel, donde el usuario primero selecciona un alojamiento, luego una habitación-pensión y finalmente el vuelo.
Hicimos pruebas rápidas interactivas de los 2 modelos:
Pero desde dirección prefirieron el modelo por pasos, como Logitravel.
Esto requería que el usuario tuviera muy claro en que punto del proceso se encontraba en cada momento y los pasos que tenía por delante. Es decir, los dos procesos mentales principales que actuaban era la facilidad cognitiva y el sesgo de atención.
Ejemplos de pasos de la competencia en desktop y movil:
Nuestra atención es un recurso escaso, y si percibimos un proceso de compra largo y complicado, el usuario no iba a querer ni comenzar el primer paso. Por eso, dividimos el proceso de venta en pequeños pasos donde el cliente solo tuviera que atender a un elemento de decisión, avanzando sin ese esfuerzo percibido de un funnel complejo.
No se trata del esfuerzo real, sino del esfuerzo percibido.
Al reducir esa sensación de esfuerzo, se mejora la conversión, y en eso nos centramos. A la vez que definíamos la interfaz visual para ofrecer contexto al usuario, decidimos que la extrapolaríamos al resto de verticales de la empresa para asi mantener coherencia de marca.
Aqui vemos el resultado final de la barra resumen de navegación, donde el usuario ve los parámetros de la búsqueda introducida, la acción para editarla y un precio desde. Debajo ve los pasos del funnel de compra, y en cual está en esté momento.
Aqi vemos un ejemplo de la navegación en el vertical de alojamiento, con la vista resumen de la caja de búsqueda, la pantalla en la que se encuentra el usuario y los pasos para navegar.
Junto con el equipo de desarrollo, fuimos analizando la información que nos iba a llegar o cual veíamos crucial para la experiencia de compra y no llegaba, para ver si la podían conseguir. Por ejemplo, un paint point destacado para el usuario era que se viera de forma clara, la información del equipaje incluida en cada vuelo, cosa que intentamos trabajar intensamente con la información que nos llegaba.
Pantalla por pantalla fuimos preparando los diseños, probándolos con prototipos interactivos realizados en Figma con usuarios. Los componentes y diseños que salían ganadores los íbamos incluyendo junto con el equipo de front en el sistema de diseño de la empresa «Onikore».
Aquí podéis ver el diseño final (hasta fecha de hoy) de los pasos del funnel de compra en escritorio:
Y aquí el ejemplo del funnel de móvil hasta el paso 1 del formulario, donde se ven los 2 posibles caminos de compra, el más directo donde el usuario puede en el paso 3 elegir los vuelos pre-elegidos (los más baratos) y pasar directamente al formulario de compra, o la pantalla 4, donde navega y elige otro vuelo de ida. Al cambiar el de ida, pasa al paso siguiente a seleccionar la vuelta.
Fueron meses intensos, y muchas pruebas de por medio pero estamos muy orgullosos del resultado. Por limitaciones del equipo del motor de alojamientos, el proyecto actualmente se encuentra en stand-by, pero esperamos que pronto lo podamos retomar y aprovechar todo su potencial.
Gracias a tod@s los implicad@s por el esfuerzo y su dedicación, sois un gran equipo.
Todos los derechos son de Centraldereservas.com. Queda prohibida totalmente la reproducción parcial o total del contenido.