Swonder | UI Case Study
App para invidentes y deficientes visuales.
¡Hola de nuevo!
Seguimos con la parte de UI (aquí os hable de la parte de UX) de mi proyecto final para el bootcamp de UX·UI en Ironhack. Solo nos quedan dos fases para ver el prototipo final.
Accesibilidad y diseño parecen ser dos temas reñidos. Es difícil hacer algo que sirva para todos los usuarios por igual. Llegamos a pensar que el colectivo discapacitado es pequeño, pero no debemos confundirnos: abarca una horquilla amplia. Ala hora de diseñar un entorno, producto o servicio; no se debe pensar únicamente en las personas con limitaciones en la movilidad, sino en todo el conjunto personas con discapacidad bien sea sensorial (visual y auditiva), psíquica y/o intelectual.
Cuarta fase: PROTOTIPADO.
Aún no tenía ni idea de cómo debía ser la aplicación. No conocía qué podría resultarle atractivo y fácil de usar al usuario, y más siendo una aplicación destinada a invidentes y personas con problemas de visión.
Para empezar, me cree un moodboard basándome en los gustos de mis User Persona creado en la fase de UX.
Del moodboard saqué los colores que creía que podrían utilizarse en la app. Pero decidí investigar sobre qué colores son los que mejor ven las personas con deficiencia, posibles combinaciones de colores que sean efectivas…
Por suerte, encontré una página web dedicada a explicar cómo garantizar que las páginas web y los documentos online puedan ser utilizados por usuarios con diferentes discapacidades. E incluso tienen resultados de test realizados a los usuarios sobre los mejores colores.
Me dí cuenta de que los colores que había extraído del Moodboard eran correctos, pero necesitaba afinar el tono de cada color un poco para que coincidiese con los estudios.
Después había que elegir los atributos con los que se refleja la marca y la fuente.
Respecto a los atributos, debía ser un producto Accesible (obvio), amigable, colaborativo, orientador y cercano; ya que se trata de una aplicación que intenta mejorar la calidad de vida de estas personas y ayudarles en su día a día.
Para la tipografía, utilicé la misma que utilizan en los medios online de la ONCE: Avenir Next.
El estilo gráfico que seguirá la aplicación, vendrá marcado por el atomic design system que se muestra a continuación.
Realicé un Low Fidelity en papel para poder “testearlo”. Debido al poco tiempo que tuve no pude testearlo con muchos usuarios reales, solo con dos, pero las dos pruebas fueron satisfactorias. Los usuarios encontraron el recorrido y la organización de la aplicación muy fácil de usar una vez que les expliqué en qué consistía el menú principal, de donde parten todas las acciones.
Pasé a hacer el Mid-Fidelity y volví a testear, ya con el producto bastante más formado y a ordenador. Ninguno de los usuarios que testearon la aplicación eran invidentes, y consideraban la app demasiado sobria y que no llamaba la atención. Ahí me di cuenta que necesitaba crear una pantalla para distinguir perfiles: usuarios invidentes y deficientes visuales.
Es por eso, que decidí hacer un On-Boarding en la aplicación explicando, paso por paso, en qué consiste cada una de las secciones del menú, además de explicar algun feature como qué es un beacon y cómo se utilizan.
Y por fin, llegamos al High-Fidelity:
Y por fin… el prototipo con interaciones y VOZ. Fue realizado con Flinto y la parte de voz con Adobe XD (te da la opción de elegir entre varias voces).
El vídeo es corto, puesto que en la presentación final tenía el tiempo muy limitado y no todas las partes tienen Voz a través de “VoiceOver”. Pero sirve para hacerse una idea de como funciona la app.
Mostraré varias secciones de la aplicación, las que considero más importante como la sección: “Dónde estoy”, “Notificaciones Beacon” y “Descripción de objeto en imagen”.
¡No olvides activar el sonido!
Este producto podría tener una gran escalabilidad: aplicarse a museos, transporte público o cualquier tipo de comercio o local. ¡Y hasta aquí Swonder!
Espero que os haya gustado, pero si queréis no dudéis en comentar, preguntar… ¡Hay que seguir aprendiendo!
