Caso Práctico / Rediseño de Interfaz de las Máquinas Autoventa de Alsa
El presente artículo es un resumen del TFM realizado, en junio de 2018, para el Máster UX/UI de Edit en colaboración con Redbility.
Dicho trabajo consistió en rediseñar la interfaz de las máquinas de autoventa de Alsa para hacer su uso más fácil y accesible, mejorando así la experiencia de compra y además agilizando el proceso.
Estos dispositivos se encuentran por todas las estaciones y en ocasiones, representan la única manera de conseguir un billete puesto que en localidades pequeñas las ventanillas están cerradas los fines de semana.
0. Briefing
Actualmente los usuarios prefieren hacer cola en ventanilla para sacar el billete antes que usar las máquinas de autoventa. Son pocos los que prefieren este método y bastantes los que lo intentan y desisten en algún punto del proceso de compra.
Por esta razón Alsa requiere de un diseño propio, sencillo, intuitivo y fácil de usar. Tiene que ser accesible a todo tipo de usuarios aunque los dispositivos físicos no se van a reemplazar. Así que la altura y las dimensiones de la pantalla serán las mismas.
Los objetivos principales son:
- Simplificar los procesos de compra y consulta al máximo.
- Extrapolar patrones e interacciones propios de procesos de la web de Alsa.
- Fácil de usar para todos los usuarios con un mínimo conocimiento tecnológico.
- Elegir a qué idiomas se debe traducir la interfaz.
- Añadir las opciones de cambio y devolución.
El target lo comprenderán todos los potenciales usuarios de las máquinas de autoventa que posean un mínimo conocimiento tecnológico.
1. Análisis
Con el fin de tomar decisiones justificadas se realizó una labor exhaustiva de análisis. Para conseguir un buen rediseño, en primer lugar, había que conocer cómo funcionaba la actual interfaz detectando así sus defectos y posibles virtudes.
A. Análisis Heurístico
Se analizaron todos los procesos principales de compra y consulta. Pantalla por pantalla se fueron desglosando buenas prácticas, deficiencias y oportunidades.
Buenas Prácticas:
- Resaltar la siguiente acción.
- Opacar acciones todavía no interactivas en los procesos.
- Path siempre visible.
- Pocas pantallas, aunque la de buscador y pago están algo saturadas.
Deficiencias / Oportunidades:
- Todos los procesos al mismo nivel en el dashboard.
- No ofrece destinos principales personalizados según la localización geográfica de la máquina.
- Información no jerarquizada.
- Datos clave (hora, lugar, importe) no destacados.
- Alsaplus + poco presente.
- Algunos botones muy pequeños.
- Muy poca iconografía.
- Idiomas sólo en el inicio.
A pesar de que la actual interfaz presenta numerosos defectos se podría generalizar diciendo que:
Las principales deficiencias son la gran falta de jerarquización, sencillez, claridad y personalización de la información.
B. Personas
Una vez analizado qué usa nuestro target había que ver cómo lo usaba. Para ello se realizaron diversas técnicas de análisis: mapas de empatía, customer journey, encuestas, shadowing, etc.
“El 80% compra billetes para salidas inmediatas” Cristina.
En primer lugar se procedió a acotar el target. Para dicha labor fue indispensable la colaboración de Cristina y Dani, trabajadores de Alsa. Además, se realizó un análisis de mercado que, junto con las tareas de shadowing, definió el espectro de nuestros usuarios:
Personas de entre 18 y 60 años con un mínimo conocimiento tecnológico. De las cuales el 30% son extranjeras, principalmente Británicas, Alemanas y Francesas.
Posteriormente se definieron los arquetipos y se realizaron diferentes customer journey para detectar los posibles frenos y oportunidades.
Finalmente se procedió a validar las hipótesis mediante una encuesta en la que participaron más de 50 personas y que sirvió para confirmar la mayoría de las teorías. A continuación se muestran algunas de las conclusiones principales:
- El 80% quiere la opción de destinos principales.
- El 60% de los usuarios de alsaplus + no lo encuentra.
- El 70% quiere ver cuánto se ahorra en descuentos y promociones.
- Códigos promocionales y descuentos al principio.
- Una de cada dos personas no ve claramente la hora de salida.
Una vez obtenidas las diversas conclusiones relativas al análisis de nuestros usuarios había que ordenar y jerarquizar, en niveles de importancia, estas necesidades.
C. Benchmarking
Durante la fase de análisis, en paralelo a personas, se realizó una exhaustiva labor de Benchmarking. Dicha labor se dividió en:
1.Puntos de Venta Físicos
De la competencia directa: Avanza, Socibús y Renfe. De otros sectores: Cinesa, Iberia y La Caixa.
Debido a la escasa presencia de puntos de venta propios de compañías de la competencia y al no muy buen nivel de sus soluciones, en cuanto a interfaz, se decidió abrir las fronteras y analizar interfaces de otras compañías con mejores soluciones de las cuales obtener buenas prácticas.
2.Webs de Reserva
Genéricas: Booking, Kayak, Tripadvisor, Expedia y Skyscanner. Internacionales: National Express, Flixbus, Ouibus y Goeuro. Nacionales: Renfe, Iberia, Avanza y la propia Alsa.
Resultaba imprescindible analizar, no sólo puntos de venta físicos, sino webs de reserva puesto que la gran mayoría de nuestros usuarios están familiarizados con los patrones de uso que son comunes a todas ellas.
Se optó por analizar las 5 webs de reserva con mayor tráfico a nivel mundial. Además, se analizaron las webs de la competencia en los 3 países cuyas nacionalidades son predominantes en el target: Reino Unido, Alemania y Francia. Y obviamente había que estudiar el mercado nacional puesto que supone el 70% de nuestros usuarios.
Al finalizar la etapa de Benchmarking se concluyeron las siguientes Buenas Prácticas:
- Jerarquizar las acciones mediante el tamaño y el color. Sobre todo en la pantalla de inicio.
- Destinos principales al principio. Sin necesidad de teclear.
- Buscador sencillo. Opacar acciones futuras. Similar al de Alsa. Patrones.
- Botones más grandes. Principalmente en la selección de asiento.
- Información principal clara y bien contrastada. Horarios, fechas, etc.
- Pago desglosado, jerarquizado y claro.
- Uso de iconografía para facilitar el aprendizaje.
- Hora e idiomas siempre visibles durante todo el proceso.
2. Arquitectura y Procesos
Las conclusiones obtenidas en la fase anterior, de análisis, van a dar forma a la arquitectura y a los procesos que definen el producto.
A nivel de arquitectura se jerarquizan los procesos de modo que el más recurrente, salidas inmediatas, quede en un primer nivel. En un segundo nivel, la acción de comprar, como acción secundaria. El resto quedan en una capa inferior. Así los procesos recurrentes, salidas inmediatas y comprar, destacan claramente sobre los que no lo son.
A lo largo de estos procesos se pueden definir 4 etapas: buscador, horarios, asientos y pago. En algunos procesos habrá que pasar por todas y en otros no. Por ejemplo, a la hora de comprar, es necesario pasar por todas las etapas y responder a gran cantidad de información para completar todo el proceso. Sin embargo, para salidas inmediatas, la acción principal, el proceso es mucho más rápido ya que la información demanda es mucho menor. Esto provoca que, en un número pequeño de interacciones, el usuario realice la compra satisfactoriamente.
De este modo estamos priorizando y agilizando la acción más recurrente de todas puesto que el 80% de nuestros usuarios utiliza estas máquinas para sacar billetes con salida inmediata.
3. Prototipo
Una vez acabado el análisis y definida la arquitectura y los procesos tocaba transformar esas premisas en un producto. Para no perder el norte y ser consecuente con las etapas anteriores se definieron estas premisas en una imagen que se mantuvo presente hasta el final.
A. Proceso Servilleta
En primer lugar, se definieron todas las pantallas sobre papel, tantas veces como fue necesario, hasta dar con una primera solución que se adaptara a las necesidades. Se hizo especial hincapié en las pantallas principales: dashboard, buscador, selección de horarios, selección de asiento y resumen.
A continuación se muestran algunas de las mismas:
B. Prototipo Interactivo [Baja Definición]
Con todo este trabajo se procedió a montar un primer prototipo interactivo, de baja definición, en POP. Pincha aquí para verlo.
C. Test de Usuario
Con un dispositivo tipo tablet se realizó un test de usuario para validar la solución y/o detectar posibles mejoras de cara a seguir definiendo el prototipo.
Los usuarios elegidos para el test estaban dentro del target. Además, para someter a más presión y verificar la sencillez de la propuesta, se realizó el test con algunas personas de mayor edad y menor conocimiento tecnológico.
“Los procesos son muy ágiles y sencillos. Está todo bastante claro e intuitivo. Sin embargo, en la pantalla de pago (para salidas inmediatas) me ha costado encontrar el botón para añadir una vuelta” Ana, 24 años.
Los resultados obtenidos del test fueron bastante positivos. Todos los usuarios eran capaces de realizar los procesos de forma ágil y satisfactoria, incluso los más mayores. A pesar de los buenos resultados obtenidos, también se detectaron algunos puntos a mejorar. Todos estos datos sirvieron de base para definir un prototipo mejorado, de alta definición, posteriormente.
D. Prototipo Interactivo [Alta Definición]
A continuación se muestran algunas de las pantallas clave:
Para interactuar con el prototipo haz click aquí.
En esta última imagen se aprecian los dos flujos principales: salida inmediata y compra ordinaria. El primero es un proceso mucho más rápido y ágil. La compra se realiza sólo con 4 interacciones: seleccionar destino, elegir pasajeros, elegir asiento y pagar.
Comprar un billete, a través de las máquinas, es ahora más fácil, rápido e intuitivo que nunca.
En definitiva, podemos afirmar que la nueva propuesta cumple con todos los objetivos marcados por el Briefing y además responde a las necesidades de nuestros usuarios.
