Project 1: Buy a ticket online
UX/UI Ironhack Bootcamp
En nuestro primer proyecto como alumnos de #Ironhack, se nos pide rediseñar la interfaz de una compañía de transportes de nuestro país. Nuestra elección ha sido Balearia.
Este proyecto se basa en el desarrollo de la capacidad de observar el comportamiento de las personas al navegar por la interfaz e interpretar sus puntos débiles. La base de su investigación es la observación directa, para atrapar a los usuarios en el acto.
La solución tiene que incluir una característica que ayude a un grupo de usuarios a lograr una tarea. Para ello, nos concentramos en un problema específico y discreto en la interacción del usuario con la web. De esta manera observamos más detalles concretos, lo que nos ayuda a construir una solución que se pueda integrar en un sistema más grande y que resuelva ese problema.
User type.
Para definir el tipo de usuario pensamos en las personas que en normalmente eligen este tipo de transporte. Para viajar en ferry con la posibilidad en nuestro caso de añadir tu propio vehículo en el mismo viaje, nuestro modelo de usuario debería ser una persona adulta, entre 30 y 50 años de edad. Es importante que al usuario le guste viajar y que esté familiarizado con las webs de viajes más habituales además de tener cierto poder adquisitivo para poder costearse esta opción.
Con las especificaciones detalladas anteriormente, os presentamos nuestro User type.
Benchmarking.
Hacemos un análisis de la principal competencia de Balearia en nuestro país, en este caso es la empresa Transmediterránea. Además estudiamos también a la competencia indirecta (transporte aéreo y ferroviario). Estos son algunos ejemplos de las empresas estudiadas como competencia:
Research.
Tras analizar la competencia, aplicamos las 10 reglas heurísticas de Nielsen en la web de Balearia obteniendo los siguientes resultados:
1. Visibilidad del estado del sistema: Durante el proceso de compra no hay ningún breadcrumb que permita al usuario volver para atrás.
2. Coincidencia entre el sistema y la realidad: En el momento de la selección de butacas, no se permite la opción de clicar en toda la caja, sólo puedes marcar la opción si clicas en el radio button. Esto se traduce en una pérdida de tiempo para el usuario a la hora de marcar una opción.
3. Dar libertad y salidas siempre al usuario: Durante el proceso de compra no se permite al usuario volver hacia atrás para modificar ninguna opción, y si quieres volver hacia atrás, pierdes todas las selecciones anteriores.
4. Consistencia y estándares:
- Al buscar Balearia en Google, hay dos tipos de Home distintas, con categorías de búsqueda diferentes.
- Se utiliza el mismo color (azul claro), para mostrar cosas tan distintas (a nivel de interacción) como botones, textos que no son botones o desplegables.
- Los iconos de “Info” no funcionan todos igual, algunos te abren popups (de diferentes tamaños), otros te redirigen a páginas distintas, otros te abren solo un cuadro de texto…
5. Prevención de errores: Los errores no se muestran de la misma manera (por lo que el usuario podría no identificarlo como un error) y se echa en falta el uso de colores como el rojo para que al usuario le quede más claro que debe modificar algo.
6. Reconocer antes que recordar: No se ayuda al usuario en ningún momento a saber en qué momento del proceso de compra está, ni cuántos pasos del proceso le quedan para acabar la acción que debe realizar, por lo que el usuario puede llegar a desistir antes de acabar el proceso.
7. Flexibilidad y eficiencia de uso: Al rellenar los campos del modelo y marca de coche (dentro de una base de datos que ellos ya tienen guardada), te sigue dejando marcar la opción de marcar que un vehículo es de +2m, cuando hay coches que una vez seleccionados ya sabemos que no llegan a esas medidas.
8. Diseño estético y minimalista: Aunque se siguen ciertos estilos como el color de marca, en muchas zonas de la página se echan en falta espacios en blanco (hay demasiadas imágenes o bloques de color) y hay excesos de cuadros y cajas que no son necesarios. Falta consistencia de estilo dentro de las distintas páginas dentro del sitio web.
9. Ayudar a los usuarios a reconocer errores: Los errores que saltan en la web, según el proceso que estés realizando, son diferentes. Al usuario le puede resultar complicado saber si tiene un error o no al no mostrarse todos de la misma manera (a veces aparece una ventana de error del propio buscador, otras es una ventana dentro de la propia página…).
10. Ayuda y documentación: Falta ayudar al usuario proporcionándole más información en secciones como “añadir código promocional”, precauciones excepcionales que tengamos que tomar en consideración a la hora de viajar, medidas COVID, etc.
Empathise.
Una vez analizada la web de nuestro cliente, la competencia y definido el tipo de usuario que necesitamos, empezamos a empatizar con ellos y a analizar su comportamiento.
Realizamos entrevistas personales y de manera individual a los usuarios elegidos.
En primer lugar, les hacemos unas preguntas previas a la prueba elegida para conocer los siguientes aspectos:
- ¿Ha viajado alguna vez en Ferry?
- ¿Con qué compañía? En caso negativo, ¿conoce alguna compañía?
- ¿En qué dispositivo suele comprar habitualmente sus billetes? ¿Por qué?
- ¿Qué considera más importante al hacer la reserva de un billete?
A continuación, le mostramos al usuario la web de Balearia y le proponemos la siguiente tarea para estudiar su comportamiento:
“Compra un billete ida/vuelta desde Valencia hasta Ibiza, para dos personas e incluye la opción de llevar tu vehículo a bordo.”
Tras finalizar el proceso de compra indicado, realizamos las siguientes preguntas para finalizar:
- ¿Qué parte le resultó más complicada?
- ¿Ha encontrado algo inesperado en el proceso de compra?
- ¿Echa en falta alguna funcionalidad?
- ¿Volvería a usar esta página en otra ocasión?
- ¿Cómo podríamos presentar la información de una manera más significativa?
Define (the Problem).
Tras realizar las entrevistas a los usuarios elegidos y analizarlas, nos encontramos los siguientes problemas:
Realizamos un mapa con el proceso de compra y nos centramos en observar el comportamiento de cada usuario en cada fase del mismo:
Tras el análisis, obtenemos los siguientes resultados. La mayoría de los usuarios encontraban problemas a la hora de seleccionar la tarifa del viaje y al configurar las opciones de su billete (añadir pasajeros, incluir vehículo…)
Ideate.
Una vez identificado el problema principal de la web de Balearia, empezamos a idear una propuesta para cubrir las necesidades del tipo de usuario estudiado.
Los principales cambios a realizar estarán en la home, en el cuadro de configuración de búsqueda del viaje, y en la pantalla de datos de los pasajeros y datos del pago.
Prototype.
Nos decantamos por hacer un rediseño de Balearia para desktop, ya que la mayoría de nuestros usuarios utilizan este medio de forma más habitual.
En este proyecto se nos pide hacer un rediseño rápido, sin profundizar en detalles específicos de diseño.
Para ello, realizamos un prototipo Lo-fi (baja fidelidad) que nos permite volver a realizar modificaciones en caso de que fuese necesario tras testear nuevamente su versión.
Para poder ver la versión interactiva de nuestros wireframes, adjuntamos enlace a Figma:
Los principales cambios se pueden observar en la home de Balearia, donde sustituimos las opciones actuales por una búsqueda más amplia para configurar nuestro viaje sin necesidad de cambiar de pantalla.
En este cuadro de búsqueda añadimos: origen-destino, fechas, pasajeros, tarifas, vehículos y bonificaciones.
El siguiente cambio notable, se encuentra en la pantalla donde seleccionar la tarifa deseada.
Balearia presenta un diseño limpio y claro, pero la información que muestra hace dudar a los usuarios a la hora de elegir. No están familiarizados con alguna nomenclatura utilizada, por ello decidimos adaptar esta parte con una visión más usual, al estilo de páginas como Iberia o Ryanair donde se prioriza la elección de billete por precio y la información de la tarifa y el asiento elegido es más clara.
Además damos al usuario la opción de “volver” a pantallas anteriores mostrando en la parte superior un breadcrumb que con la versión actual echaba en falta.
Por último, rediseñamos la página para mejorar tu viaje, donde el usuario puede configurar la opción de seguro que desee de una manera más clara y ordenada a como estaba antes.
En la misma pantalla añadimos los datos del pago para evitar hacer un click adicional.
Test & conclusions.
Una vez rediseñadas las opciones de la web que consideramos más importantes, volvemos a probar con usuarios distintos a los elegidos al principio del proyecto.
Observamos que el usuario navega de una manera más rápida por la web y la tasa de abandono disminuye.
Gracias a mi compañera Beatriz de Dios con quien he compartido el primer proyecto de Ironhack. Tras presentar nuestra propuesta al cliente, los comentarios en general han sido positivos, el resultado nos ayuda a mejorar siempre para futuros proyectos. En este caso, el core del proyecto se basaba principalmente en buscar posibles problemas y analizar los datos obtenidos, por lo que hay que buscar un equilibrio entre la información recogida y la propuesta de cambio a la hora de presentar.
¡Muchas gracias!
:)A.
