Pre-work | Ironhack UX/UI: evaluación de usabilidad y rediseño del sitio.

Eli Reyes
6 min readOct 30, 2020

--

Tercer reto y nueva aventura, mi objetivo era encontrar las áreas de fricción y puntos débiles para los usuarios en la aplicación elegida y resolverlos con un nuevo diseño.

ESCENARIO. Mis usuarios, 4 parejas jóvenes, 20–40 años, su destino el próximo verano será Roma para visitar el Coliseo, una de las siete maravillas del mundo. Viajarán de Madrid a Roma (02/08/2021–08/08/2021), quieren tener todo organizado al 100% antes de comenzar sus vacaciones y ser eficientes para disfrutar mientras están allí.

Tras una investigación exhaustiva del destino elegido y los detalles del viaje, vuelos, horarios, desplazamiento en la ciudad, estancia etc. era el momento de evaluar la usabilidad de las aplicaciones (Tripadvisor, Kayak y Skyscanner). El resultado de la evaluación comparativa hizo decantarme por Tripadvisor, plataforma de viajes que mejor funcionaba para este tipo de usuario y sus necesidades. Era la única que permitía “organizar” el viaje, incluyendo la reserva de las cosas que quieras hacer. El resto de aplicaciones no te daban la opción de buscar o reservar esos eventos.

Una vez elegida la aplicación, las impresiones iniciales en las pruebas de usabilidad me ayudaron a decidir, de antemano, las 3 tareas que usé en la siguiente fase (ajustadas al tipo de usuario).

PRUEBAS. Fase imprescindible en la que observé la reacción del usuario frente al diseño y funcionalidad de la aplicación e identifiqué dónde tenían problemas y sentían confusión.

Prueba de 5 segundos: mi objetivo era saber la primera impresión que daba la página de inicio.

Móvil en mano, !comenzamos!, 5 segundos para echar un vistazo a la pantalla:

¿Recuerdas el nombre del sitio?

¿Qué producto o servicio crees que ofrece?

¿Qué te llamó la atención de esta pantalla?

¿Dónde buscarías un hotel?

Hallazgos: Ninguno supo la aplicación que vio pero todos identificaron el servicio que ofrecía. A cada uno le llamó la atención un detalle diferente pero todos accederían al mismo icono para buscar hotel.

Prueba y entrevista: elejí a 4 usuarios, pidiéndoles una entrevista de 20 minutos y permiso para grabar su pantalla mientras realizaban las pruebas de usabilidad.

Su objetivo era buscar información, guardarla y organizarla para compartirla con su pareja.

Tarea 1: Busca un vuelo Madrid-Roma para 2 personas. Fechas : (02/08/2021–08/08/2021). Vuelo: turista, sin escalas y con equipaje de mano + equipaje cabina, sin facturar. Franja horaria: ida (10:00–16:00), vuelta (14:00–19:00). Aeropuerto: Ciampino. Presupuesto: 400€ total. Si tienes tu vuelo ¡guárdalo!.

  • Hallazgos: el 100% accedió a “vuelo” en menos de 3 seg. filtrando por las características indicadas, excepto la elección del tipo de equipaje por no aparecer como opción. Otro problema detectado fue la frustración del usuario por no encontrar “Guardar” en el vuelo elegido.
Pantallas TripAdvisor

Tarea 2: Buscar dos entradas para el Coliseo el 03/08/2021 (Visita guiada del Coliseo, la Colina Palantina y el Foro Romano). Una vez localizadas “guárdalas”, te pedirá “crear viaje” y añade nombre “Roma 2021”.

  • Hallazgos: el 100% accedió a “Cosas qué hacer” en menos de 3seg, pero el 75% se desorientó al buscar un determinado evento por exceso de información e imágenes( Scroll extenso). Además, el 100% no vio la “lupa” para una búsqueda concreta ni el tipo de entrada que pedí, demasiado ruido visual que impidió al usuario ver con claridad “mostrar más entradas”. El 25% abandonó la aplicación para comprar la entrada en la página web Coliseo.
Pantallas “Cosas que hacer” TripAdvisor

Tarea 3: Accede al viaje que has creado para organizarlo, ya sabes que la duración de vuestra estancia será (02/08/2021–08/08/2021), incluye “tu entrada del Coliseo” al 3 de agosto y comparte con tu pareja “Roma 2021” por WhatsApp.

  • Hallazgos: el 75% tardó más de 3 seg. en encontrar “viajes”, lugar en el que se guardó por defecto su búsqueda inicial. Ya en “viajes”, el 100% localizó fácilmente el icono “Organizar” pero aquí comenzó el caos.
  • El 100% intentó mover el evento sin incluir las “fechas”, no era intuitivo. Indicadas éstas, el 100% no seleccionó “Añadir elemento” para organizar los eventos, optó por otras acciones, debido a que “elemento” era confuso y el usuario no supo el propósito de este botón.
  • El 50% quiso organizar tocando sobre el evento y arrastrándolo, no lo consiguió, tenía que mantener el dedo pulsado unos segundos y después arrastrar. El otro 50% intentó organizar el evento con clic en los 3 puntos, únicamente se mostró “quitar” bloqueando al usuario.
Pantallas “organizar” TripAdvisor
  • El 100%, tardó menos de 3 seg. en “invitar”, pero cayó en incertidumbre porque no vio la opción “WhatsApp”. Abandonó la pantalla, varias veces, hasta que la localizó dentro de “mensaje de texto”.
Pantallas “invitar” TripAdvisor

Con los hallazgos en mano, trasladé a un cuadro básico la información obtenida de cada usuario entrevistado (codificada por colores) e hice un mapa con los datos medibles del que deducí los problemas a resolver.

¿QUÉ ELEGÍ RESOLVER?. Llegó el momento de decidir, ¿en qué problemas centrarme? para ello tuve en cuenta a mi tipo de usuario, necesitaba organizar al 100% su viaje antes de partir. Si no era así se frustraría y abandonaría, impactando en la tasa de rebote.

Lo tuve claro, resolver todo problema encontrado en el flujo completo “organizar”, aportando claridad e intuición. Desde que el usuario guardaba un vuelo hasta que accedía a “viajes” para organizarlo, terminando con la invitación a otra persona por WhatsApp.

PROCESO DE DISEÑO. Era hora de proponer las soluciones a través de un prototipo interactivo. Para ello, recopilé los componentes que funcionaban y los que no. Hice un listado con todas las ideas que me venían a la cabeza eligiendo tres diferentes, puliéndolas hasta llegar a la solución final ( wireframe lo-fi antes del mi-fi).

Aquí muestro las soluciones y sus wireframes mi-fi.

1. VUELOS
2. ORGANIZAR
3. INVITAR

Como conclusión, he de decir que este reto fue divertido y gratificante, exploré diferentes áreas desde la investigación al diseño pasando por la fase de pruebas. Fase que me fascinó, por observar a cada usuario reaccionando de forma diferente ante una misma interfaz y por abrirme los ojos a puntos débiles que no detecté en las pruebas iniciales.

Una vez más, terminé el reto con muy buen sabor de boca.

¡Hasta la próxima!

https://www.figma.com/file/lKJ7tnb7OsuacodiavytVi/Challenge-3?node-id=0%3A1

--

--