Anaís Céspedes - Proyecto Final - Diseño de Experiencia de Usuario

De Casiopea


TítuloAnaís Céspedes - Proyecto Final - Diseño de Experiencia de Usuario
Tipo de ProyectoProyecto de Curso
Palabras Claveproyecto_ux_2022
Período2022-2022
AsignaturaDiseño de Experiencia de Usuario
Del CursoDiseño de Experiencia de Usuario 2022
CarrerasDiseño, Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Anaís Céspedes
ProfesorJaviera González

Proyecto final Diseño de Experiencia de Usuario; MetroVal


Presentación; MetroVal


Esta App te acompañará durante tu viaje, desde que decides viajar en metro indicando la estación más cercana desde tu ubicación y los tiempos de los próximos trenes. Lo más importante para hacer de tu viaje seguro y rápido es la función de pago mediante la App, olvídate de perder el tiempo buscando tarjetas extraviadas, todo lo que tendrás que hacer es registrar el código de tu o tus tarjetas al momento de registrarte en la App y al momento de tu viaje marcar la opción pagar viaje ya podrás acceder a las instalaciones del metro escaneando tu código QR en el torniquete. Para hacer más seguro tu pago te pedimos ingresar una clave numérica única antes de la salida de tu destino. La aplicación entrega la información de saldo de cada una de tus tarjetas y la opción de recarga online mediante la redirección a páginas de pago online. También cuenta con datos de las instalaciones de cada estación y sus accesos. Deber utilizarla siempre conectado a la red internet para así hacer efectivos pagos y ubicaciones, así optimizar tu tiempo haciéndolo más efectivo.

Link: https://youtu.be/xxAQOcQPqrw

Investigación y Observación

Servicio a Estudiar y desarrollar Metro de Valparaíso, App móvil

La App del servicio Metro de Valparaíso es parte de la red de trenes de Chile EFE. Al momento del estudio en la aplicación se encontraron y validaron grandes problemas de información, y por sobretodo el hecho de que no cubre una necesidad real, lo que la hace desechable fácilmente.

Como primer acercamiento al servicio se pueden encontrar los siguientes puntos con los que cuenta la app al momento del estudio, se plantean problemas identificados y sus posibles soluciones.

  • Información de la red; indica estado operativo y las estaciones en un mapa lineal

Problema identificado: Falta de información Propuesta de solución: información de instalaciones de las estaciones, interconección en caso de haber, estado operativo. En caso de estar viajando indicar en qué parte de la línea se encuentra.

  • Programar viaje: indica el tiempo del tren que se aproxima a la estación de partida.

Problema identificado: falta de información (solo entrega información sobre el tiempo estimado del próximo tren) Propuesta de solución: Se elimina la función programar viaje, sustituyendola por una función activa en el momento de realizar viaje. En la pantalla de inicio se desarrolla una categoría de información sobre la estación más cercana (de ese momento para el usuario) y próximos trenes con su tiempo estimado para llegar a esa estación. Al seleccionar dicha estación se muestran los accesos e instalaciones, y una opción de mapa (google maps con indicaciones para llegar).

  • Saldo de tarjetas: indica el saldo de las tarjetas registradas

Problema: como acción no cuenta con una falla directa, pero según las encuestas realizadas es una función de menor importancia, que no satisface una necesidad, ya que esta misma información se entrega al pasar por el torniquete.


WhatsApp Image 2022-06-07 at 8.55.47 PM.jpeg WhatsApp Image 2022-06-07 at 8.55.47 PM (1).jpeg WhatsApp Image 2022-06-07 at 8.55.48 PM.jpeg WhatsApp Image 2022-06-07 at 8.55.48 PM (1).jpeg
Mapa de Flujo App aactual

ObservaciónesComo App tiene un flujo muy breve, sin satisfacer una tarea o recorrido. Repite información en el menú y en Home, no hay una tarea clara, la propuesta de valor reconocible es información del tiempo del próximo tren que se hacerca y si es simple o doble, información que se entrega en las pantallas de la estación, lo que hace la app precindible. Diseño de pantalla es básico e intuitivo lo que hace que la usabilidad tenga mayor alcance.

Hipótesis

La hipótesis está centrada en la posible perdida de tiempo del usuario. En diferentes situaciones;

  • El usuario se dispone a entrar al servicio metro y no tiene su tarjeta, debe comprar otra o cambiar

su medio de transporte.

  • El usuario pierde tiempo al querer entrar al metro y no saber su saldo insuficiente.
  • El usuario sabe que el metro es su opción más ecologica para viajar, pero no sabe donde se encuentra

la estación más cercana.


Mapeo de la Experiencia

User Persona

Group 22 AnaisC ux2022.png Group 23 anaisC ux2022.png Group 24 anaisC ux2022.png

Primer momento: Journey Map

Primer Journey Maps Journey Maps resultado de las entrevistas realizadas

Transcripción Entrevista usuario

Link página tarea de investigación realizada https://wiki.ead.pucv.cl/C1_-_Journey_map_grupal_-_Valentina_Cofr%C3%A9,_An%C3%A1is_C%C3%A9spedes,_Daniela_Sifaqui,_Esteban_Rejas,_Nicol%C3%A1s_Dragas


Insights

Group 42 (1)Group 42 (1)Group 42 ux2022 anaisC.png.png

Propuesta

Propuesta de Valor

Tu medio de pago más eficiente y seguro. No pierdes tiempo en buscar la tarjeta, no generas desechos plásticos (de tarjetas fuera de uso), ahora tu medio de pago está en tu celular. Y te entrega información acttualizada del servicio.

Propuesta

Basándonos en esta premisa de satisfacer necesidades con respecto a la eficacia en el transporte Metro de Valparaíso se propone desarrollar un medio de pago del servicio desde la app, haciendo más eficiente el servicio, y satisfaciendo algunas necesidades del usuario tales cómo; optimización de su tiempo, dando mayor seguridad al momento de pagar (sabe que tiene su medio de pago en el celular y sabe cual es el saldo).

Solución Propuesta: crear la interfaz de una App nueva para el Metro de Valparaíso, donde su función principal es realizar el pago con éxito desde el celular, este cumplirá la funsión de tarjeta mediante un código QR que tiene la cuenta de cada usuario en su app. Tamabién se propone de manera paralela la realización de carga online de la tarjeta desde un link de la App a un medio de pago seguro.

Reconocer Necesidades

El usuario necesita acceder a información clara y actualizada sobre las instalaciones de la red metro. El usuario cuenta con un medio de pago confiable de la red (la tarjeta actual de metro), se necesita una actualización en el metodo de pago, manteniendo la seguridad, comodidad y eficiencia. Claridad sobre la información de saldos, actualmente el torniquete indica el saldo, no es su función primaria por lo que no siempre es accesible, por lo efímero del mensaje y características gráficas.

¿para qué? ¿con qué fin? ¿para quién? ¿a quién esta dirigido? ¿qué problema soluciona?


Desarrollo propuesta: MetroVal

Primera propuesta

La tarea a realizar es realizar un viaje en metro desde dirigirse a la estación hasta salir en el destino. En este caso desde la estación más cercanas RECREO a la estación destino EL SALTO.

Relato Una persona (usuario nuevo en el servicio) tiene la app del Metro de Valparaíso para lograr movilizarse de manera autónoma y segura. Abre la App para saber cual estación está cerca, (tiene la opción de guiarse por google maps para dirigirse a la estación más cercana). Para ingresar realiza el pago en el torniquete directamente con app del teléfono, pasando el codigo qr en la sección de lectura del torniquete. Estando dentro de la estación se le permite indicar en que dirección tomará el metro , así se muestran tiempos, localización y otras opciones. Para salir se pide el ingreso de clave numérica para autorizar el pago. La app ofrece información especifica por cada estación para facilitar la oferta de los los diferentes servicios que se pueden ofrecer (cómo quioscos, boleterías, librerías, entre otros.

Arquitectura de información

Dendrograms

Los resultados recibidos de los cadsort, nos hacen entender cómo las personas perciben los grupos de etiquetas que dimos como opciones en la encuesta para la aplicación. Consideramos dos opciones un home con las diferentes categorías o un menú de donde se desprenda todo desde un lugar, los gráficos de resultados muestran 4 subgrupos que contienen las etiquetas y van profundizando es la información específica. Esta visualización de información, nos lleva a proponer un flujo para desarrollar la aplicación, teniendo en consideración cómo las personas tienden a buscar información. Información general del servicio, información personal, tarjetas, y una categoría de varios. Hay varios temas que no tienen un grupo fijo en este momento del desarrollo, haciendo un análisis retrospectivo es posible que las tarjetas no se hayan explicado bien, la orientación previa es necesaria.

ANAIS Dendrograms.jpg Best merge method Anais.jpeg Similarity-matrix ANAIS.jpeg 


ARQ INFO DIUX.jpg [[Archivo:DIUX_Perfil.jpg] DISUX Tarjetas.jpg DISUX Info.jpg DISUX Contacto.jpg

Link página tarea: https://wiki.ead.pucv.cl/C2_-_Cardsort_-_An%C3%A1is_C%C3%A9spedes,_Valentina_Cofr%C3%A9#Cardsort_Ana%C3%ADs_C%C3%A9spedes

Flujo

Link página tarea: https://wiki.ead.pucv.cl/Wireflow_Ana%C3%ADs_C%C3%A9spedes

Test de usabilidad

Se realizan entrevistas con usuarios, testeando el prototipo desde figma. En general el usuario se ve satisfecho con el producto, lo entiende y en general sus comentarios son sobre que lo usaría frecuentemente. Como experiencias para un servicio completo comentan la importancia de la autonomía mediante el método online, haciendo independiente del servicio presencial. Agilizando el proceso de recargas y pagos, optimizando tiempos y la diferente información. Hallazgos (problemas de usabilidad) Falta de botón de cierre, finalización de acción. Cambios a realizar en el diseño Agregar botón de finalizar. Entregar mayor claridad al cerrar el recorrido.

Link Tarea https://wiki.ead.pucv.cl/Tarea_6_-_Ana%C3%ADs_C%C3%A9spedes

Referencias

App Metro Cuenta con un flujo fluido y consistente de información. Iconografía clara e información actualizada, cuenta con mapas completos de la red y de las líneas, cada estación cuenta con la información de infraestructura y accesos.

WhatsApp Image 2022-06-05 at 9.39.34 PM.jpeg WhatsApp Image 2022-06-05 at 9.39.35 PM.jpeg WhatsApp Image 2022-06-05 at 9.39.35 PM (1).jpeg WhatsApp Image 2022-06-05 at 9.39.35 PM (2).jpeg


Propuesta Final: Desarrollo

Journey Map

Group 10 (1) anaisC ux 2022.png

Mapa de Flujo

Mapadeflujo ux2022 anaiscespedes.png Mapadeflujo ux anaiscespedes1.png Mapadeflujo ux anaiscespedes2.png Mapadeflujo ux anaiscespedes3.png Mapadeflujo ux anaiscespedes4.png Mapadeflujo ux anaiscespedes5.png Mapadeflujo ux anaisceespedes6.png

Diseño visual

Group 30 anaisC ux2022.png

La distribución y tamaños están diseñados para la inclusividad, facilitando su uso a todo público. Se distribuye la información en 4 sectores, en la parte superior están 3 de ellos de izquierda a derecha; icono Home, centrado está el título del paso en que se encuentre el usuario, finalmente a la derecha iconos de perfil y menú hamburguesa. La distribución es bastante común para asegurar eficacia para el usuario. El cuarto sector distribuye el resto de la información, que sí puede ser harta, tiende a ser del mismo contenido. Se decide utilizar esta paleta de colores que pretende transmitir eficiencia, optimismo, seguridad.





Validación

SUS ux anaisC.png SUS ux anaisC1.png

Flujo Interactivo

Link

https://www.figma.com/proto/EkpSUxFIuYAiRDAFnYvCax/Untitled?node-id=10%3A14&scaling=scale-down&page-id=0%3A1&starting-point-node-id=10%3A14


Link Figma frame del desarrollo https://www.figma.com/file/EkpSUxFIuYAiRDAFnYvCax/Untitled?node-id=0%3A1