Experiencia de compra | Balearia: UX Case study
La visión del grupo Baleària se caracteriza por ofrecer unos servicios de calidad excelente mediante la mejora continua y la excelencia en la gestión […]. (https://www.balearia.com/es/grupo-balearia)
El reto
En este proyecto se decidió analizar el funcionamiento de la web de la compañía Balearia para poder detectar qué fallos encontraban los usuarios durante el proceso de compra de un billete.
Planteamos varias preguntas y escenarios para localizar en qué lugares podría haber conflicto: ¿Qué problema encuentran los usuarios para viajar en ferry?, ¿la información se presenta clara?, ¿los usuarios suelen llevar carga a bordo?, ¿cómo se configura un vehículo a bordo?
Contestando a estas preguntas, encontramos que el principal problema se reducía a la información, tanto a la que los usuarios tienen acceso como a la que no. De esta forma, decidimos utilizar el método de Design Thinking para abordar el proyecto.
Research
Antes de empezar, realizamos una fase de investigación donde analizamos la competencia, tanto directa, como Trasmediterránea, como indirecta, como pueden ser compañías de transporte aéreo (Ryanair, Skyscanner) o ferroviarias (Renfe).
De cada una de estas opciones, observamos cómo funcionaba el proceso de compra y vimos las alternativas que podríamos ofrecer. Las cualidades positivas que obtuvimos fueron: limpieza en el diseño, configuraciones más rápidas de los procesos, mayor libertad del usuario o información más clara y disponible.
Una vez comparada la competencia, realizamos un análisis completo de la web de Balearia a través de las Heurísticas de Nielsen:
- Visibilidad del estado del sistema: se cumple en ciertas partes de la web, como al cambiar de una sección a otra. Por otra parte, no tenemos forma de saber el progreso en el proceso de compra, a excepción del menú superior que desaparece al hacer scroll.
- Coincidencia entre el sistema y el mundo real: se cumple la norma general, como por ejemplo, utilizando iconos representativos de los procesos de forma reconocible.
- Control de usuarios y libertad: en la mayoría de los procesos el usuario no puede retroceder o no tiene ningún tipo de forma de saber dónde está ni si puede modificar su reserva sin perder información.
- Consistencia y estándares: se utiliza terminología concreta para los usuarios que es muy probable que desconozcan.
- Prevención de errores: a veces aparece un pop-up propio de la página pero otras aparece una notificación de Google, por lo que habría que unificar y aclarar qué ocurre en el error, ya que da poca información.
- Reconocimiento en lugar de recordar: encontramos el fallo del menú de migas de pan, que solo aparece en determinadas secciones y no en toda la página, por lo que el usuario tiene que acabar recordando dónde está o qué tiene que hacer.
- Flexibilidad y eficiencia de uso: dificultad para elegir la tarifa adecuada. No te permite realizar determinadas elecciones si no has completado otras antes ni deshacer acciones.
- Diseño estético y minimalista: en rasgos generales la web presenta un diseño acorde a su mensaje y que sigue un patrón más o menos establecido. En ciertas partes hace falta una unificación de estilo, como por ejemplo en los botones.
- Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: funciona en cierta medida ya que, como hemos mencionado anteriormente, a veces aparece información de error dentro de la propia web y otras veces nos la proporciona Google, aunque en las dos opciones la información es insuficiente.
- Ayuda y documentación: probablemente este sea uno de los puntos más conflictivos, ya que si no has utilizado nunca esta web ni otra parecida, la cantidad de información y la falta de ayuda puede hacer que abandones el proceso casi de forma instantánea.
Empatizar con el usuario
En primer lugar y para detectar el problema más a fondo, decidimos realizar entrevistas a un tipo de usuario concreto. Para elegirlo, nos preguntamos qué tipo de persona suele viajar en ferry y por qué. Naturalmente el ferry es la única forma de viaje marítimo donde puedes llevar tu vehículo contigo y llevar todo el equipaje que quieras, por lo que el usuario deberá ser mínimo mayor de edad y, además, tener cierto capital que le permita costearse el viaje.
Establecimos una media de edad de 30 a 50 años, definiendo a nuestro usuario como un adulto con un nivel económico medio y que, además, estuviese acostumbrado a navegar por páginas de viajes y hacer las reservas por internet.
La entrevista se realizará con una pequeña muestra de usuarios y será personal e individual.
Una vez establecido el user persona, definimos unas preguntas previas a la entrevista para conocer un poco más la personalidad de nuestro usuario:
- ¿Ha viajado alguna vez en Ferry?
- ¿Con qué compañía? Si la respuesta es no, ¿conoce alguna compañía?
- ¿En qué dispositivo suele comprar los billetes? ¿Y por qué?
- ¿Qué considera más importante al hacer una reserva de un billete?
Más tarde, se programó una tarea dentro de la web para ver cómo se manejaba el usuario y la forma en la que la resolvía.
La tarea definida fue la reserva de un billete con vehículo a bordo, para dos personas desde Valencia a Ibiza. La gran ventaja de viajar en ferry y la razón por la que se suele elegir este medio de transporte, es poder llevar tu vehículo a bordo, por lo que es importante conocer cómo funciona la web cuando se trata de hacer este tipo de reservas. Al terminar, se debían contestar una serie de preguntas en relación al proceso realizado:
- ¿Qué parte le resultó más complicada?
- ¿Ha habido algo inesperado en el proceso?
- ¿Echa en falta alguna funcionalidad?
- ¿Volvería a usar esta página otra vez?
- ¿Cómo podríamos presentar la información de una manera más significativa?
Resultados y definición del problema
Analizando las respuestas, todos los usuarios llegaron a conclusiones muy parecidas:
“Reservar no es lo difícil, lo complicado es reservar lo que quieres”
Para concretar exactamente en qué parte surgían los problemas, realizamos un flujo de tareas desde que se entra en la web hasta que se finaliza el proceso de reserva.
Con esta información, clasificamos las tareas según la dificultad y encontramos que los pain points de los usuarios se encontraban en la configuración del viaje (seleccionar ida y vuelta, vehículos, fechas, etc.) y la selección de asientos/tarifas.
Además, los usuarios tuvieron problemas o les surgieron dudas en los apartados de “mejora tu viaje” y en “datos y pago de la reserva”.
Además de los pain points, identificamos ciertas funciones o errores que debían corregirse y que veremos más adelante en cada pantalla.
Idear
Ahora que teníamos claro el problema a tratar, emplearemos la metodología de UCD (User centered design), para aportar una solución que se ciña a las necesidades de nuestro usuario.
Como nuestro user persona está acostumbrado al uso de páginas de viaje, decidimos adaptar los procesos conflictivos para que fueran mucho más reconocibles y los sujetos se sintieran más cómodos durante la reserva.
Realizaremos cambios en la página principal, configuración de búsqueda, selección de tarifas y página de datos y pago.
Prototipo
Es importante tener en cuenta que una de las conclusiones que sacamos de las entrevistas fue que nuestro user persona tiene mayor preferencia por el uso de ordenador antes que dispositivo móvil, por lo que nuestra solución y prototipado irá dirigido a una opción de ordenador.
Al ser un proyecto en su primera fase, se realizará un prototipo en Lo-Fi (baja fidelidad) en papel, para presentar al cliente nuestra solución de una forma rápida y eficiente, para así poder hacer varios test y modificaciones sin problemas. Al final de esta sección adjuntamos un link para ver de cerca el prototipo de forma interactiva en Figma.
Página de inicio
En la página principal hemos decidido sustituir la búsqueda central por una ventana más grande donde poder configurar el viaje de una forma rápida y en una sola pantalla. Al hacer clic en “Origen” para introducir el lugar, se abrirá una pestaña inferior donde podemos elegir todas nuestras preferencias y ver las posibilidades que tenemos de una forma más visual y ágil. Además, una de las opiniones que nos ofrecieron nuestros usuarios fue la duda de saber si podías llevar vehículo abordo o no, ya que en la opción actual no puedes añadirlo hasta la fase final de la búsqueda.
Proponemos una alternativa que se encuentra más en la línea de lo que realizan otras plataformas web de viajes, para que el usuario se sienta más cómodo y realice la selección de forma más rápida.
Página de tarifas
En este caso, vemos que el diseño en general es correcto y claro. El problema lo encontramos cuando tenemos que elegir una opción concreta, ya que hay muchos puntos de información ocultos que al abrir te causan más dudas.
Optamos por una configuración más sencilla e influenciada por páginas como Ryanair, donde puedes elegir la fecha conveniente teniendo en cuenta el precio que hay en el mismo día elegido, los próximos días o los anteriores. Esta cuestión es importante ya que uno de los aspectos que más valoraban nuestros sujetos era el precio, por lo que de esta forma tienen una visión general de las tarifas y total libertad de la opción a escoger.
Al seleccionar en la tarifa deseada, se desplegará una ventana donde podemos elegir el tipo de asiento que deseamos, con sus características y ventajas, para colocar toda la información disponible a mano del usuario y con un simple clic elegirlo todo.
Una parte importante es añadir un menú de migas de pan navegable, ya que el actual que tienen no te permite hacer clic en ninguna opción, aparte de no poder ofrecerte ir hacia atrás o volver al inicio sin perder el progreso.
Página de mejora tu viaje
Para la página de Mejora tu viaje, encontramos que hay gran cantidad de espacio desaprovechado. Contamos con una sección principal donde nos informan de incidencias o cambios en nuestro viaje y debajo tenemos varias opciones para cambiar nuestra tarifa o añadir diferentes complementos como seguros, comidas, etc. La parte tanto de información como de seguros quedan poco destacadas, por lo que debido a nuestro público objetivo, queremos darle más importancia.
La distribución se ha realizado a modo bloques, colocando primero la parte de información, después añadir extras y para terminar una sección amplia con los seguros disponibles. Además, hemos modificado la parte inferior con un resumen corto y conciso donde adjuntar los detalles de la ida y la vuelta.
Página de pago y datos
Para finalizar el proceso de reserva, nos encontramos en la parte de rellenar datos personales y realizar el pago. Toda la información podría distribuirse de forma más efectiva o indicando al usuario la cantidad de información que le queda por rellenar. Se mantiene el problema de que no podemos retroceder, mandando a la página de inicio si decidimos darle a la flecha del navegador de “ir hacia atrás” y perdiendo el progreso de reserva.
Proponemos una sección más intuitiva donde la información se distribuye en bloques, tanto para rellenar los datos de los pasajeros como para rellenar los datos del vehículo. Por último, colocar de una forma clara y directa las opciones de pago. Cuando se hace la selección de una de las opciones, se despliega una ventana inferior con los datos a rellenar para finalizar la reserva.
Una vez terminado este proceso tendrá disponible su billete.
Para más detalles y ver el proceso más de cerca, adjuntamos el link del prototipo interactivo en Figma:
https://www.figma.com/file/CdHiRGZjLYvtYCo31Lyyza/Prototipo-Balearia-Copy?node-id=1%3A3
Nuevo testeo y resultados
Para finalizar, realizamos un testeo de las soluciones propuestas con diferentes usuarios a la primera entrevista, donde obtuvimos que las mejoras fueron bien recibidas por todos ellos.
Como conclusión del proceso y resumen de los beneficios, los usuarios encontraron más fácil e intuitiva la navegación y las configuraciones, aumentando la rapidez del proceso y efectividad de la reserva.
Se han mejorado las heurísticas de la web explicadas en el apartado de research, como por ejemplo reduciendo la frustración de los usuarios, dándoles mayor libertad y poder sobre sus decisiones u ofreciéndoles información sobre el estado del sistema.
Por último, descender el número de clics y pantallas necesarias para realizar la reserva, sumado a lo explicado anteriormente, contribuye a disminuir la tasa de abandono del proceso, además de conseguir que el usuario acabe mucho más contento la compra y así asegurando su vuelta a la web.
Conclusiones
Este ha sido el primer proyecto realizado en la escuela de Ironhack, junto a mi compañera Alba Fernández. Todo el desarrollo realizado siempre es bajo nuestra experiencia actual, la cual esperamos ampliar y perfeccionar a medida que avance el curso.
Las limitaciones de tiempo y la dificultad de encontrar usuarios para realizar tanto entrevistas como testeos, son unos de los aspectos que quizás nos han supuesto mayor problema. Con una mayor investigación y recursos podrían perfeccionarse y validarse de forma más efectiva los resultados, además de encontrar otras soluciones o ideas que puedan ayudar a mejorar la experiencia de usuario.
¡Gracias por leer!
Si le ha parecido interesante este Case Study o tiene algún comentario, me encantaría leerlo. Puede contactarme mediante mi perfil de Linkedin :)
(Nota: este es un proyecto de carácter personal, no estamos relacionadas de ninguna forma con la marca)
