Diseño de la app Sonarcade
Carolina Rehbein
El producto:
Sonarcade es una app que te ayuda a encontrar los locales de árcade más cercanos y valorados por la comunidad. Puedes encontrar tus juegos favoritos y ubicarlos en locales cerca de ti.
Resumen del proyecto
Duración del Proyecto:
Desde finales de Junio 2023 a Agosto 2023
El problema:
Adultos que disfrutan de árcades no poseen una manera efectiva de encontrar locales de recreativas de manera eficiente en términos de tiempo, confiabilidad y dinero.
Resumen del proyecto
El objetivo:
La app de árcade es única en su categoría, pues además de que los jugadores puedan organizar su tiempo y presupuesto teniendo en cuenta el inventario disponible de las máquinas, también permite localizar locales de árcades con evaluaciones de su calidad votada por los mismos usuarios, creando así comunidad y seguridad para los que quieren volver a vivir el mundo del árcade.
Mi Rol:
Diseñadora UX para la app de Sonarcade desde la concepción hasta la entrega
Resumen del proyecto
Responsabilidades:
Realización de entrevistas, investigaciones, estudios de usabilidad, creación de wireframes en papel y digitales, diseño y prototipos de alta y baja fidelidad, iteración de diseños.
Entender al usuario
Investigación sobre los usuarios: resumen
Se entrevistó a 10 personas con edades entre los 23 a 42 años, la mayoría de género masculino que haya visitado o tuviera conexión la experiencia de jugar en árcades. Se identificó dos personas, Eduardo que representa a hombres de alrededor de 40 años, con trabajo, que tratan el jugar en árcade de manera más competitiva juegos árcades más clásicos. Y Jordan, que representa al tramo de gente más joven de alrededor de 25 años que juega de manera más casual que prefiere jugar máquinas tipo simuladoras.
En las entrevistas, muchos usuarios querían alguna herramienta que les permite además de ver un inventario de juegos, es la posibilidad de descubrir locales cerca de ellos.
Investigación sobre los usuarios: puntos débiles
Localización
Encontrar árcades en sectores cercanos a los usuarios (independiente si se encuentra en regiones)
Descubribilidad
Encontrar árcades o locales similares que posean la información de: el valor de ficha, método de pago, entre otras.
Catálogo
Disponibilidad real de las máquinas de cada local.
Capacidad de saber donde encontrar un juego en específico.
Confiabilidad
Encontrar locales y máquinas en buen estado y en sectores seguros.
1
2
3
4
Persona: Eduardo
Problem statement:
Eduardo es un contador que necesita jugar árcades de su infancia/adolescencia sin tener que adivinar donde ir porque no necesita malgastar su tiempo y dinero en locales de mala calidad.
User journey map
Realizar el mapeo de esta experiencia con Eduardo permite aterrizar ideas para aplicar en la app de inventario de Árcade, es importante saber que maquinas hay, pero también qué locales aún existen.
Comenzar el diseño
Esquemas de página en papel
(Paper wireframes)
Se elaboraron varios diseños se usó crazy 8 para una rápida obtención de ideas y en una segunda ronda se bajaron los elementos de diseño más útiles para resolver los puntos de dolor. El enfoque fue de usar una barra de navegación inferior para unificar las distintas pantallas.
Esquema de páginas digitales (Digital wireframes)
Cada elemento quiso englobar de la manera más completa y sencilla los puntos de dolor y necesidades de los usuarios. Especialmente en las tarjetas (cards) de los locales.
Barra de búsqueda para locales y juegos
Detalle de información importante para el usuario.
Valoración de local sencilla
Barra de navegación con las funciones más importantes
Botón de favoritos
Dirección y navegación al local
Esquema de páginas digitales (Digital wireframes)
Buscando incorporar accesibilidad, en las “cards” de los juegos indica “alertas” que describen características que podrían afectar a usuarios no tomados en cuenta cuando se crearon estos juegos.
Juegos favoritos de la comunidad
Alerta pensada en accesibilidad.
Barra de búsqueda para locales y juegos
En caso de no acordarse del nombre, una opción sería buscar por categorías
Detalle de información importante para el usuario.
Abre información detallada del juego, incluyendo locales que tienen este juego
Prototipo de baja fidelidad
El prototipo es capaz de seguir flujos de usuarios para buscar juegos en diferentes formas, buscar y mostrar localización de los árcades, agregar y quitar favoritos.
El prototipo fue usado para las pruebas de usabilidad.
Puedes revisarlo aquí:
Estudio de facilidad de uso (Usability): Hallazgos.
Realice dos rondas de pruebas de usabilidad, la primera ayudo a guiar los diseños de wirefame a mockup. En la segunda ronda se usó un prototipo en alta fidelidad que revela los aspectos donde los mockups necesitan refinarse.
Hallazgos de la Ronda 1
Mejoro el flujo y funcionalidad percibida
1
Experimentar una forma más integrada de valorar los locales
2
Hallazgos de la Ronda 2
Solo una barra de búsqueda al inicio, reorganización de secciones para mejor flujo
1
Eliminar redundancia de nombre e iconos en secciones
2
Mapas por local
3
Perfeccionamiento del diseño
Maquetas (Mockups)
En principio, las secciones se pensaron para usuarios sin necesidad de ingresar a una cuenta. Se hizo evidente que los usuarios querían una sección de perfil. Se relocalizaron todas las barras de búsqueda a la pantalla de inicio y se reordenaron las secciones para mejorar el flujo y la funcionalidad de la app. Se eliminaron los nombres e iconos redundantes de secciones.
Before usability study
After usability study
Maquetas (Mockups)
Para evitar problemas de escalabilidad y darle una mejor funcionalidad al componente del mapa, se decidió cambiar el mapa donde se mostraban los locales más cercanos al usuario por mostrar los alrededores del local y que la app externa de mapas de la información de ruta.
Before usability study
After usability study
Maquetas (Mockups)
Prototipo en alta fidelidad
El prototipo final de alta fidelidad presento flujos más limpios y directos, cumpliendo las tareas esperadas: Búsqueda de locales y juegos, valoración e información de locales, favoritos, etc. Participantes que participaron en la primera prueba encontraron que la iteración de alta fidelidad era una experiencia mucho más agradable y mejorada.
Consideraciones de accesibilidad
Uso de iconos que son culturalmente asociados a sus funciones además de tener descripciones (ej. navbar)
Se utilizó el chequeador A11y para asegurar la una evaluación AAA de contraste contra fondo. (Fuentes normales menores a 19 px, 7:1 y para Fuentes grandes mayores a 19px, 4:5:1) y paso el test de ceguera de visión.
En las “cards” de los juegos indica “alertas” que describen características que podrían afectar a usuarios no tomados en cuenta cuando se crearon estos juegos.
1
2
3
Futuro
Conclusiones
Impacto:
La aplicación ayuda a fomentar el encuentro de usuarios con locales árcades y mostrar las máquinas de juego en lugares específicos, revitaliza la experiencia y cultura asociada a estos espacios. Además, es de utilidad económica para los dueños de locales donde sus redes sociales o de marketing no llegan al usuario objetivo.
“Hubiera sido genial haber tenido algo así (app) en el para que no hubieran muerto árcades…”
Que aprendí:
Mientras diseñe Sonarcade aprendí que el diseño inicial puede a llegar a cambiar mucho y es necesario ser capaz de no obsesionarse con una solución que será rehecha por las pruebas de usabilidad. Además de escuchar todas las opiniones es importante discernir que realmente ayudara a la app a llegar a ser esa experiencia de usuario ideal. Necesito estudiar más la estética de apps actuales para mejorar la UI.
Próximos pasos
Mejoramiento de la app en el sentido estético. En el diseño actual la UI es funcional, tiene potencial y se puede mejorar y alinear a la estética actual.
Revisar la factibilidad técnica de las características y funciones de la app con algún desarrollador y definir para que plataformas diseñar.
Seguir iterando y probando la app, incluir más estándares de WCAG para mejorar los diseños. Más a futuro, ver qué tipo de monetización podría usarse.
1
2
3
¡Pongamonos en contacto!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Gracias por darte el tiempo de leer este caso estudio, si estas iinteresado en contactarme puedes hacerlo a traves de: