icono con un cuaderno con un diagrama de flujo y sobre el un celular con una pantalla con formulario

UX research – GreenTeacher

A continuación comparto el proceso de ux research utilizado en el proyecto final de la la Diplomatura de Experiencias Digitales en el transcurso del año 2020. Proyecto enarcado dentro de la temática «greentech» que se trabajo dentro de la diplomatura.

Mi Rol

En el proyecto realicé distintos roles como ser Ux Research, Project Manager, Ux designer, y Front-end.

Contexto

El proyecto fue realizado en el transcurso del año 2020 en el marco de la Diplomatura de Experiencias Digitales.

Quiénes me acompañaron en este proyecto

  • Jeremias Staldeker  – Desarrollador Full Stack
  • Manuela Berro Pacheco – Cineasta
  • Mariana Liso – Diseñadora Gráfica
  • Martín Masignano – Diseñador UX
  • Martina Eguizábal – Licenciada en Administración

Problemática

La falta de conciencia en cuestiones ambientales y principalmente referida a la separación de residuos reside principalmente en la falta de educación de nuestra sociedad respecto a este tema.

Solución Propuesta

Creación de un sitio que nuclee a todos aquellos que tienen la iniciativa tanto de formar como de capacitarse en la temática. Que genere comunidad.

Investigación

El primer paso de nuestra investigación de ux research fue la realización de un taller de mapeo que integró a personas de diversas características demográficas que no eran especialistas en la materia pero tenían inquietudes sobre los residuos.

Luego del taller los participantes nos comentaron sobre la necesidad de pertenecer a una comunidad para facilitar la adopción por parte de cada individuo y fomentar nuevas costumbres para llevar adelante un verdadero cambio social.

tablero que quedó como resultado de la actividad.
Actividad de cardsorting
Resultados mostrados en forma de treemap.
Treemap obtenido de la investigación

Delphi UX

Para abordar todos los temas que giran alrededor del tratamiento de residuos, utilizamos la técnica Delphi UX, que nos permitió:

  • Abordar todas las instancias de los temas o conceptos que se manejan en las sociedades, ciudades o comunidades.
  • Poder descubrir todo lo que sabemos que sabemos, lo que sabemos que no sabemos, lo que no sabemos que sabemos y por último (y tal vez lo más importante) descubrir todo aquello que no sabemos que no sabemos. 
  • El vocabulario específico que se emplea.
  • Conocer las necesidades priorizadas.
treemap que dejó la actividad de delphi ux
Resultado del Delphi UX

Wireframes y prototipado

Wireframe de la pantalla inicial del sitio
Uno de los wireframes utilizados en el proceso

En el primer momento se vieron las opciones de los wireframes en baja en las reuniones del equipo, cuando ya se habían definido los principales elementos se continuó con un wireframe en digital con la ayuda de la herramienta Sketch y en conjunto con InVision que permitió armar un prototipo interactivo digital en baja con los cuales se realizaron los diferentes test de usuarios y permitieron hacer los cambios de forma rápida entre testeo y testeo.

Wireframe digital que se utilizó para el prototipo interactivo
Wireframe digital

Accedé al prototipo en InVision

Pruebas con personas usuarias

En la prueba con personas usuarias se realizó la observación y análisis de las mismas al momento de utilizar el prototipo del sitio web, anotando los problemas de uso con los que se fueron encontrando cada una de las personas que realizaron la actividad para poder solucionarlos posteriormente, para la próxima sesión de testeo. 

Se realizó a distancia con las herramientas de reuniones virtuales y el prototipo en InVisión pidiendo a la persona usuaria que comparta la pantalla y que nos permitiese grabar su pantalla.

Prototipo HTML

Una vez definidos los casos de uso y con los resultados de las pruebas con personas usuarias, el siguiente paso fue el armado de los prototipos en HTML, tomando como base las recomendaciones sobre accesibilidad de las WCAG 2.1. (Profundizaremos sobre este tema en particular más adelante)

Prototipo del proyecto en html

Para realizar de manera colaborativa esta etapa, utilizamos la plataforma Github, lo que nos permitió trabajar en paralelo las distintas secciones del sitio.

Accedé al prototipo en HTML 

Accesibilidad

En el momento del prototipado digital se tuvo en cuenta las reglas de las W3C con respecto a la accesibilidad cuidando la misma en cada etapa del proceso, haciendo de GreenTeacher un sitio accesible. 

Wynia plugin de accesibilidad
Plugin de accesibilidad

Para poder cumplir con los estándares se incorporó a su vez un plugin en el que me encuntro trabajando, el cual  permite el cambio de los tamaños tipográficos, interlineado, interletrado, pasar el sitio a alto contraste. Como así también poder cambiar las fuentes por sans-serif únicamente, con serif y el uso de OpenDyslexic optimizada para personas con dislexia.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *