Prácticas Diseño Interfaces de Usuario 2023-24 (Tema: Club de Lol )
Grupo: DIU1_ETSIITosos. Curso: 2023/24 Updated: 17/03/2024
Proyecto: Comunidad LOL
Descripción:
Nuestra propuesta trata de un club relacionado con el videojuego League of Legends, en el que los distintos miembros de la comunidad van a poder tanto participar como organizar eventos relacionados con la temática. La propuesta de valor es la de acercar a la comunidad del videojuego a eventos presenciales en los que conocerse y participar tanto en meetings como en torneos presenciales con organización previa. Tendremos cuatro roles: Organizador de eventos/torneos, el capitan de un equipo, miembros del equipo y espectadores. Luego tendremos tres actividades en nuestra comunidad: Torneos, jugar con otros jugadores al juego y quedadas/eventos presenciales.
Logotipo:
Miembros
- 👤 Juan Miguel Acosta Ortega
- 👤 David Serrano Domínguez
La plataforma a analizar es "Rutas de los vinos por Granada", esta ofrece diferentes tipo de actividades que se pueden realizar en Granada centradas en el vino y la enología, ofreciendo la oportunidad de realizar diferentes catas y actividades similares.
El propósito de este "User Research" es recopilar y analizar datos que ayuden al proceso de diseño y mejora de la experiencia de usuario en la plataforma a la hora de buscar y adquirir ciertos productos o experiencias.
| Objetivos | KPIs |
|---|---|
| Entender las preferencias y necesidades de los usuarios | - Porcentaje de usuarios que valoran la facilidad de uso de la plataforma como "excelente" o "muy buena" en una encuesta de satisfacción. |
| - Tasa de retención de usuarios después de la primera reserva, que indica el nivel de satisfacción y compromiso inicial de los usuarios con la plataforma. | |
| Ofrecer experiencias con el vino como núcleo central | - Experiencias contratadas por localización |
| - Experiencias contratadas por precio | |
| - Productos vendidos por precio | |
| - Productos vendidos por experiencias contratadas | |
| Mejorar la experiencia de usuario en la plataforma | - Tiempo medio que los usuarios tardan en completar una reserva, lo que puede indicar la eficiencia y la facilidad de uso de la plataforma. |
| - Porcentaje de usuarios que abandonan el proceso de reserva antes de completarlo, lo que puede señalar posibles fricciones o problemas en la experiencia de usuario. | |
| Aumentar la participación y la fidelización de los usuarios | - Número de usuarios que participan en actividades de enoturismo ofrecidas a través de la plataforma en un período de tiempo determinado. |
| - Tasa de conversión de usuarios que reservan una actividad de enoturismo después de explorar las opciones disponibles en la plataforma. |
-
Información cualitativa:
- Entrevistas en Profundidad: Realizar entrevistas en profundidad con usuarios para explorar sus experiencias pasadas con el enoturismo, sus expectativas de una experiencia ideal y cualquier problema que hayan encontrado al reservar actividades relacionadas con el vino.
- Grupos Focales: Organizar grupos focales con usuarios para discutir temas específicos, como las preferencias de actividades de enoturismo, las características deseables de una plataforma de reserva en línea o las barreras percibidas para participar en actividades relacionadas con el vino.
- Pruebas de Usabilidad: Realizar pruebas de usabilidad de la plataforma para observar cómo los usuarios interactúan con ella, identificar áreas de confusión o fricción, y recopilar retroalimentación sobre la experiencia de usuario.
- Comentarios y Opiniones: Recopilar comentarios y opiniones de los usuarios a través de formularios en línea, encuestas de satisfacción, reseñas de productos o redes sociales para entender sus percepciones y sugerencias de mejora.
- Observación Directa: Observar directamente a los usuarios mientras navegan por la plataforma, buscan actividades de enoturismo o realizan reservas para identificar patrones de comportamiento y puntos de dolor.
-
Información cuantitativa:
- Datos de Uso de la Plataforma: Recopilar datos sobre la actividad de los usuarios en la plataforma, como el número de visitas, la duración de las sesiones, las páginas más visitadas y las acciones realizadas (por ejemplo, búsqueda, reserva, cancelación).
- Conversiones: Seguir métricas de conversión, como la tasa de reserva por visita, la tasa de abandono del proceso de reserva o la tasa de retorno de usuarios, para evaluar la eficacia de la plataforma para convertir visitantes en clientes.
- Satisfacción del Usuario: Utilizar encuestas de satisfacción para medir la satisfacción general de los usuarios con la plataforma, sus características y el proceso de reserva, utilizando escalas de valoración o preguntas abiertas para recopilar comentarios detallados.
- Datos Demográficos y de Segmentación: Recopilar datos demográficos de los usuarios, como edad, género, ubicación geográfica e intereses relacionados con el vino, para comprender mejor su perfil y segmentar el público objetivo de manera más efectiva.
- Análisis de Retroalimentación: Analizar los comentarios y sugerencias de los usuarios para identificar tendencias, áreas de mejora prioritarias y oportunidades de innovación en la plataforma y las actividades ofrecidas.
- Turistas que busquen experiencias típicas del lugar
- Personas que realicen experiencias gastronómicas similares
- Personas interesadas en el vino y la enología
Hemos elegido la plataforma "Ruta de los vinos por Granada" porque nos saca un poco de nuestra zona de confort, y porque hemos encontrado defectos en ella que se podrían solucionar con un poco de esfuerzo y de mejor diseño.
Ya que hemos elegido esta página hemos decidido enfrentarla con una competidora en el mismo sector ( Cata del Vino ), y dos plataformas que ofrecen experiencias que pueden ser del mismo tipo ( Granada Cooking y SmartBox ).
Este sería un mapa de posicionamiento que cuadraría estas empresas según Calidad y Precio
Además podríamos hacer un breve análisis DAFO de nuestra plataforma para situarla aún más:
| Aspecto | Descripción |
|---|---|
| Fortalezas | - Se especializa totalmente en catas y actividades relacionadas con el vino. Por lo tanto, ofrece experiencias más especializadas y con más variedad. |
| - Hace de intermediario entre bodegas y clientes, haciendo de la comunicación una experiencia más sencilla. | |
| Debilidades | - Sólo ofrece actividades en la provincia de Granada. |
| - Al no ser nacional, no tiene tanta visibilidad como su competencia. | |
| Oportunidades | - Ofrecer productos de mayor variedad y relacionados con las experiencias que oferta. |
| - Tener convenios con bodegas de Granada, lo que hace que su oferta de experiencias sea más única. | |
| Amenazas | - Empresas líder muy consolidadas en el sector de la distribución de experiencias. |
| - Competencia que ofrece experiencias en todo el territorio español. |
El modelo de negocio de las cuatro plataformas es similar, ofrecer actividades gastronómicas, aunque “Ruta de los Vinos de Granada” ofrece también productos autóctonos de sus mismas actividades.
“Cata del vino” y “Ruta de los vinos Granada” no ofrecen un buscador general para la búsqueda, cosa que “Smart Box” y “Granada Cooking” sí hacen.
Aunque el peor diseño a simple vista es el de “Cata del vino” (paleta de colores, márgenes, demasiados elementos …), a la hora de buscar actividad refleja muy bien si tiene parking, acceso para personas con movilidad reducida …
Las cuatro ofrecen una usabilidad similar en cuanto a la búsqueda de actividades.
Ambas podrían ser personas reales, pues son deportistas, les encanta la naturaleza, y ambos tienen aluna razón por las que le podrían gustar este tipo de actividades. A Sofía le gusta el vino y las actividades al aire libre, por otro lado a Óscar le gusta conocer la gastronomía típica de los lugares que visita y no puede dejar pasar esta oportunidad.
Se podría decir que el "Journey Map" de Sofía es más típico, pues encuentra una actividad y organiza a su grupo de amigos para relizarla, sin embargo Óscar está sólo y aun así quiere realizar una de estas experiencias. Tendrá que ponerse en contacto con la plataforma para ver qué solución le ofrecen, ya que la opción de "rellenar grupo" no aparece en la misma página.
-
Enlace al documento: (https://github.com/JuanmiAcosta/Disenio_Interfaces_Usuario/blob/master/P1/UsabilityReview.pdf)
-
Valoración final (70):
- Comentario sobre la valoración:
Tras una revisión exhaustiva de la plataforma se ha llegado a la conclusión de las posibles mejoras:
Mejorar la Usabilidad de la Plataforma:
- Implementar una función de búsqueda general para facilitar la navegación y filtrado de actividades.
- Manejar todos los errores inesperados de forma nativa dentro de la plataforma.
- Abordar cualquier problema de usabilidad identificado a través de mejoras iterativas en el diseño basadas en la retroalimentación de los usuarios.
Ampliar la Oferta de Productos:
- Diversificar la gama de productos y experiencias ofrecidas en la plataforma para atraer a un público más amplio.
Mejorar la Cobertura Geográfica:
- Considerar la expansión más allá de la región de Granada para atraer a una audiencia más amplia e incrementar la visibilidad.
- Explorar alianzas con bodegas en regiones vecinas para ofrecer una gama más amplia de experiencias.
Fortalecer el Marketing y la Visibilidad:
- Invertir en esfuerzos de marketing para aumentar la conciencia y visibilidad, especialmente fuera del área local.
- Resaltar las ofertas únicas y los productos locales para diferenciarse de la competencia.
Investigación Continua con los Usuarios:
- Realizar investigaciones periódicas con los usuarios para mantenerse actualizado sobre las preferencias y necesidades en evolución.
- Utilizar los conocimientos obtenidos para iterar y mejorar continuamente la plataforma, asegurando que permanezca relevante y atractiva para los usuarios.
Al incorporar estas recomendaciones, "Ruta de los Vinos de Granada" puede mejorar su plataforma, ampliar sus ofertas y competir efectivamente en el mercado, mejorando así la satisfacción y el compromiso de los usuarios.
El mapa de empatía de nuestro proyecto quedaría de la siguiente manera:
Nuestro scope canvas sería el siguiente:
| User Groups | Organizador | Capitán | Miembro de equipo | Espectador |
|---|---|---|---|---|
| Registrarse | H | H | H | H |
| Iniciar sesión | H | H | H | H |
| Organizar quedada | H | |||
| Organizar juego online | H | |||
| Organizador torneo | H | |||
| Apuntarse a Torneo | H | L | L | |
| Apuntarse a Evento | M | M | M | |
| Apuntarse a partida online | H | L | ||
| Buscar los eventos/torneos/quedadas creados | M | H | H | H |
| Consultar mis eventos organizados | H | |||
| Consultar los eventos en los que participo | M | M | M | |
| Consultar “Sobre nosotros” | M | L | L | L |
| Contacto | H | M | L | L |
Ahora vamos a mostrar el task flow de tres tasks, en esta caso son: Iniciar Sesión, Buscar Evento y Apuntarse a Evento.
Iniciar Sesion:
Buscar Evento:
Apuntarse a Evento/Quedada:
Nuestro sitemap para la navegación por nuestra página quedaría de la siguiente manera:
| Label | Scope note |
|---|---|
| Búsqueda de eventos | Se podrá buscar tanto en un calendario ( en cada día se refleja los eventos que haya ) como en una barra de búsqueda insertando su id. |
| Organizar evento | Se podrá organizar mediante un formulario un evento (ya sea quedada, torneo… ) |
| Apuntarse a un evento | Al clickar un evento en el calendario o al apuntarse a un evento en general se nos reflejará un formulario para ello. |
| Mis eventos organizados | Puedo administrar los eventos que he organizado para hacer cambios si se requirieran. |
| Eventos en los que estoy apuntado | Puedo acceder a los eventos en los que estoy apuntado para desapuntarme en caso de no poder asistir. |
Para los wireframes, hemos hecho el diseño de la página principal, es decir, lo primero que se encontraría un usuario no registrado cuando entra por primera vez en nuestra página, el segundo wireframe es el formulario que tendría que rellenar un organizador para poder realizar un evento, ya sea online o presencial y por último la opción de buscar eventos, ya sea por su nombre o fecha de realización de ambas maneras puede buscar un usuario el evento que desea, además de un notón para que en caso de querer apuntarse a dicho evento pueda hacerlo.
Wireframe de páginal principal:
Wireframe de buscar eventos:
Wireframe de crear evento:
Este es el moodboard para nuestro proyecto que incluye:
- nuestra estrategia de la marca
- Nuestro logo final
- El eslogan
- La paleta de colores. Esta, aunque basada en los colores del logo original del juego, se basa en colores complementarios y sus variantes más claras para las adevertencias y notificaciones.
- la tipografía
- Imágenes de como serán los eventos e imágenes del estilo de la página
Nuestra Landing page tiene la motivación de atraer al público objetivo de este tipo de eventos y fidelizarlo a través de sistemas de organiozación y asistencia a eventos:
Los patrones usados en el diseño de la aplicación hasn sido los siguientes:
- Onboarding: Paǵina principal que ve un usuario al entrar a nuestra página
- Menu(Adaptada a móvil): Menú infrerior para navegar por las distintas páginas de nuestra app móvil.
- Carousel: Carosusel pada mostrar las actividades mas popukares, las que esta inscrito un usuario o las que ha creaod el mismo, cada uno de estos carousel en una página diferente de la app móvil.
- Search: Barra de búsqueda para buscar una actividad por su nombre
- Card items: Para representar las distintas actividades.
- Item details: Cada actividad tiene un nombre, descrpción de lo que se va a hacer en dicha actividad y la fecha de la misma.
- Reserva: En nuestra caso es inscribirse a una actividad.
- Form Input: Formulario para inscribirse en una actividad o crear una por un organizador de actividades.
- About: Una pequeña descrpción de quienes somos que hacemos y que eventos ofrecemos para que un usuario pueda inscribirse o crear el mismo uno.
Este sería nuestro diseño:
Este es un pequeño vídeo demostrativo del funcionamiento de la app:
Las siguientes imágenes resumen de manera breve nuestro UX-Case Study publicado en este mismo Readme de Github:
https://github.com/CarlosMunozBarco/DIU.bigotessucios
| ID USUARIO | SEXO/EDAD | OCUPACIÓN | EXPERIENCIA INTERNET | PLATAFORMA | PERFIL CUBIERTO | TEST | SUS SCORE | SUS GRADE |
|---|---|---|---|---|---|---|---|---|
| 0 | Mujer/48 | Recursos Humanos | Media | MAC | Minusválida/Habla varios idiomas/Triste | A | 75 | B |
| 1 | Hombre/35 | Ingeniero Eléctrico | Baja | MAC | Soltero/Opositor/Feliz | A | 77.5 | B |
| 2 | Hombre/21 | Estudiante | Alta | Windows | Soltero/Videojuegos/Tranquilo | B | 70 | C |
| 3 | Hombre/21 | Estudiante | Alta | Linux | Soltero/Triatleta/Muy Feliz | B | 72.5 | C |
El análisis que podemos proporcionar con las capturas anteriores es que el usuario en los dos proyectos visualiza rápido y de manera continuada lo que debería. En el proyecto B el usuario se distrae un poco por la gran cantidad de items en navbar y formulario pero no es nada grave.
Estos resultados nos indican que , aunque nuestro proyecto saca una ligera mejor puntuación, los dos proyectos están bien diseñados y generan un buen rendimiento. Los dos tienen campos en los que mejorar.
4.d Usability Report
https://github.com/CarlosMunozBarco/DIU.bigotessucios
El informe ha sido realizado por David Serrano Domínguez y Juan Miguel Acosta Ortega, y vamos documentar los puntos a destacar del proyecto de los compañeros:
Se trata de una aplicación dirigida a un club de juegos de mesa. Se realizan demostraciones de juegos, torneos de cartas... Por otra parte ofrecen un servicio de alquiler de salas de juego y juegos de mesa. Cuentan con un sistema de socios que les permite una fácil inscripción a actividades del club y otras ventajas.
La plataforma cuenta en primera instancia con una home page que invita al usuario a seguir navegando por la plataforma, sin embargo abusan del contenido escrito en los widgets "cards", cosa que puede distraer al usuario del objetivo principal(call to action) que es clickar en el botón "!!!Apuntame!!!". Tras esto, y como componente principal para navegar por la aplicación nos encontramos un nav bar que consigue de manera efectiva su objetivo, aunque como se puede ver en el mapa de calor roza el número de items máximo que puede soportar el usuario medio(Miller's LAW). Obviando todo esto nos encontramos un diseño bien pensado y estructurado con el uso de, por ejemplo, un wizard de ayuda a la inscripción de un usuario, un scroll infinito que muestra de manera simple y concisa los torneos próximos, y un buscador general de juegos.
| ID USUARIO | SEXO/EDAD | OCUPACIÓN | EXPERIENCIA INTERNET | PLATAFORMA | PERFIL CUBIERTO | TEST | SUS SCORE | SUS GRADE |
|---|---|---|---|---|---|---|---|---|
| 2 | Hombre/21 | Estudiante | Alta | Windows | Soltero/Videojuegos/Tranquilo | B | 70 | C |
| 3 | Hombre/21 | Estudiante | Alta | Linux | Soltero/Triatleta/Muy Feliz | B | 72.5 | C |
El resultado del eyetracking se documenta en apartados anteriores. Como se puede ver los dos usuarios inferiores que son los encargados de evaluar el proyecto B (Mesamanía) concuerdan y sacan una puntuación similar.
Gracias a el SUS Score suministrado por dos usuarios totalmente aleatorios que han consumido la plataforma y nos han ayudado en el eye tracking, mapa de calor, etc... además de los pequeños fallos detallados anteriormente, podemos concluir que el diseño y planteamiento de la plataforma esta bien pensado y ejecutado, aunque tenga todavia un amplio margen de mejora.
Como recomendaciones podriamos instar a nuestros compañeros a reducir el número de elementos tanto en el nav bar inicial como en el formulario de inscripción. Esto ayudaria a enfocar más al usuario en las tareas principales.
Esta última práctica 4 nos ha ayudado a tener un enfoque más amplio a la hora de realizar nuestros propios diseños, y nos ha aportado un punto de vista global acerca de todo lo aprendido sobre usabilidad, accesibilidad, reglas de la heurística...
La conclusión a todo esto es una sintesis de todos los puntos anteriores.
Durante nuestros estudios y en nuestras futuras carreras, dedicamos y seguiremos dedicando una cantidad considerable de tiempo a diseñar y desarrollar productos. A menudo, tendemos a enfocarnos más en los aspectos técnicos, descuidando un elemento crucial: un diseño de interfaz centrado en el usuario y su experiencia.
Estas prácticas nos han proporcionado una comprensión más profunda de lo que implica un desarrollo integral de diseño de usuario, brindándonos la oportunidad de adquirir experiencia valiosa para nuestra trayectoria profesional. No solo hemos creado nuestro propio diseño de usuario, sino que también hemos evaluado otros, lo cual nos ha enseñado a ser autocríticos y a entender que este trabajo debe realizarse con objetividad, considerando las necesidades de diversos grupos de usuarios.
Las diferentes tareas realizadas nos han hecho darnos cuenta de la importancia de los detalles, ya que pueden marcar una gran diferencia entre productos similares.
Ahora comprendemos mejor las responsabilidades de un Diseñador de Experiencia de Usuario (UX) y la relevancia de su trabajo en un equipo de diseño y desarrollo de productos.
Concluimos con una valoración muy positiva de los resultados obtenidos. Tanto el esfuerzo como la dedicación invertidos en estas prácticas han sido recompensados con un diseño que consideramos bueno para el tiempo invertido en este y todo lo que engloba. Además, el resultado refleja que hemos consolidado todos los conocimientos teóricos y prácticos adquiridos a lo largo del curso.