EcoAI | Estudio de caso de UX / UI

Como residentes responsables de Vancouver, BC, reciclamos. Algunos de nosotros reciclamos porque nos interesa la sostenibilidad medioambiental, otros reciclamos porque la ciudad de Vancouver nos penalizaría en forma de multas.

¿Qué sucede cuando no sabemos reciclar?

(Sugerencia: ver abajo)
Foto de una tortuga en aguas contaminadas por Pascal Mauerhofer en Unsplash

Introducción

EcoAI se enfoca en usar soluciones tecnológicas e inteligencia artificial para ayudar a las personas a clasificar sus desechos con mayor precisión y reducir su huella de basura. Esto se logra facilitando el proceso de toma de decisiones para las personas en el momento de la eliminación de residuos, así como haciendo un cambio cultural al educar a las personas sobre el reciclaje.

Este proyecto fue planeado y ejecutado por mi equipo de cuatro:

Como líder del proyecto, mi función era realizar una investigación de la experiencia del usuario (UX) y crear un prototipo en el que se pueda hacer clic basado en los resultados de nuestra investigación.

El objetivo de este proyecto era diseñar una divertida aplicación interactiva (aplicación) para la empresa, EcoAI.

Cree una aplicación divertida e interactiva para facilitar el proceso de toma de decisiones para las personas en la clasificación de residuos al momento de la eliminación.

Objetivos de negocio

Aumentar la tasa de desvío de reciclaje al 90 por ciento en el campus de UBC.

Objetivos de usuario

Para recibir asistencia en el momento de la eliminación de residuos de una manera divertida y conveniente.

Objetivos del proyecto

Para atender una aplicación a los objetivos del usuario sin comprometer los objetivos comerciales en un plazo de 3 semanas.

Proceso de diseño de UX

Investigación y descubrimiento

El reto

El objetivo del proyecto era crear una aplicación para facilitar la toma de decisiones de reciclaje al momento de la eliminación, teniendo en cuenta lo siguiente:

  • La aplicación debe reducir la confusión de la clasificación de residuos.
  • La interfaz debe ser divertida e interactiva.
  • Utiliza inteligencia artificial con una función de cámara
  • Crear un incentivo para usar la aplicación.
  • Educar a los usuarios sobre el reciclaje.
  • Marca "futurista" (por ejemplo, minimalista)
  • Población objetivo: residentes de Vancouver

Hipótesis

La mayoría de las personas están interesadas en reciclar y contribuir a la sostenibilidad ambiental, siempre y cuando no les tome demasiado tiempo.

Investigación de dominio

Alrededor del 30% -40% de la población tiene dificultades para reciclar adecuadamente debido a la complejidad de la clasificación en el momento de la eliminación. Esta complejidad proviene de la diversidad de los materiales de consumo, así como de las diferencias en las corrientes de reciclaje basadas en la ubicación de eliminación.

¿Por qué el reciclaje es tan confuso? Para establecer las bases de nuestra investigación, mi investigación investigó por qué los canadienses experimentan dificultades en el momento de la eliminación de residuos. Para mi sorpresa, los canadienses están escribiendo sobre este tema y describiendo el problema como resultado de la mala educación y las ideas falsas (Global News).

Contextualizar los desafíos a los que se enfrentan actualmente los canadienses en el momento del reciclaje nos permitió comprender el problema y dirigir nuestra investigación en consecuencia.

Investigamos numerosas aplicaciones de reciclaje disponibles para descargar en Vancouver, BC y en todo el mundo. Las aplicaciones que descargamos y exploramos incluyen: BC Recyclepedia, Recycle bc, Surrey Rethink Waste y Poco Wasteline.

Análisis competitivo comparativo

Para ayudar a visualizar y comparar las aplicaciones mencionadas anteriormente, hicimos un análisis competitivo comparativo (CCA) (Figura A).

Figura A: Análisis competitivo comparativo

El CCA nos permitió referirnos fácilmente a nuestra investigación de dominio y comprender la información que reunimos.

Después de crear el visual CCA, se hizo evidente que la distinción clave entre EcoAI y las aplicaciones actualmente disponibles en la tienda de aplicaciones es que ninguna de estas aplicaciones utiliza inteligencia artificial.

Como se ilustra en la Figura A, algunas características populares en las aplicaciones de reciclaje incluyen la búsqueda de artículos por texto, acceso a geolocalización, calendario de recolección y recordatorios de fechas de recolección. Esta información se tiene en cuenta al crear nuestras encuestas de usuarios.

Encuestas de usuario

Después de recopilar una investigación preliminar, comenzamos a formular preguntas de la encuesta. La creación de las preguntas de la encuesta planteó obstáculos para nuestro equipo porque el objetivo de la encuesta no se definió claramente (por ejemplo, ¿queremos recopilar información demográfica de la encuesta?).

Todas las preguntas redactadas estaban bien escritas y serían informativas, sin embargo, no todas las preguntas eran relevantes para el proyecto en cuestión.

Figura B

Para resolver este conflicto, sugerí que creáramos un diagrama de afinidad para ayudar a visualizar en qué categoría se ubican nuestras preguntas (Figura B). Los investigadores de UX utilizan diagramas de afinidad para agrupar la investigación / datos en grupos significativos para su análisis. Por lo tanto, los diagramas de afinidad generalmente no se usan para crear encuestas. Sin embargo, esta actividad demostró ser valiosa, ya que le permitió a mi equipo extraer información relevante e ignorar información innecesaria.

Después de analizar el diagrama de afinidad para las preguntas de la encuesta, creamos nuestra encuesta usando Google Forms. El objetivo de nuestra encuesta fue comprender los puntos débiles de nuestros usuarios en el momento del reciclaje y lo que podría ayudar a resolver estas frustraciones. A continuación se muestra un ejemplo de una pregunta formulada en la encuesta:

Implementamos nuestra encuesta en la comunidad de Vancouver usando Reddit y Slack.

Mientras esperábamos que se recopilaran los datos de la encuesta, realizamos consultas contextuales visitando tiendas locales con estaciones de reciclaje.

Investigación contextual

Figura C: Estación de reciclaje de Whole Foods

Las consultas contextuales ponen al investigador de UX en el campo para observar el comportamiento de los usuarios objetivo en tiempo real.

Ubicación: Whole Foods
Duración: 45 minutos

La investigación contextual en Whole Foods sugirió que las personas pueden reciclar fácilmente cuando se les presentan ejemplos visuales de lo que se puede reciclar (Figura C).

Sin embargo, nuestra investigación contextual no era representativa de toda la población porque nuestra muestra estaba sesgada. Las personas que compran en Whole Foods generalmente son más conscientes de la salud y el medio ambiente, ya que Whole Foods se especializa en productos orgánicos y promueve una vida saludable.

Por lo tanto, tomamos nuestras observaciones en Whole Foods con un grano de sal.

Resultados de la encuesta

Recibimos un total de 83 respuestas a nuestra encuesta. Después de recopilar los resultados, analizamos los datos utilizando múltiples técnicas.

El primer método de análisis fue simple: leer y comprender los resultados.

Figura DFigura E

Los resultados parecían indicar que nuestros usuarios están interesados ​​en reciclar (Figura D), pero a menudo no están seguros de cómo reciclar correctamente (Figura E).

Estos resultados sugieren que existe una desconexión entre la intención de los usuarios de reciclar y ejecutar la acción.

Nuestra investigación también reveló que la mayoría de los usuarios prefieren recibir educación sobre el reciclaje utilizando imágenes (Figura F).

Figura F

Para complementar este análisis inicial, creamos un diagrama de afinidad para visualizar nuestra investigación y agrupar los datos en grupos significativos.

Diagrama de afinidad

Todos los puntos de datos recopilados de la encuesta y la investigación contextual se incluyeron en el diagrama de afinidad.

El diagrama de afinidad arrojó información clave sobre los resultados de nuestra investigación y permitió al equipo de UX extraer fácilmente información valiosa.

Usuario Persona

El diagrama de afinidad ilustrado arriba ayudó a crear la persona del usuario (a continuación) para este proyecto.

La personalidad del usuario fue una herramienta útil durante todo el proceso de diseño y colmó la brecha entre la investigación y la planificación.

Planificación

La investigación de UX sentó las bases para planificar el diseño y me permitió identificar los puntos débiles del usuario y las características clave de la aplicación.

(1) Alex quiere deshacerse de una botella de agua en una estación de reciclaje. (2) Alex no sabe a dónde va la botella de plástico. (3) Alex se frustra y tira la botella de plástico en el contenedor más cercano. (4) Alex experimenta culpa por no reciclar correctamente.

El guión gráfico anterior ayuda a generar empatía con el usuario y crea contexto para la aplicación.

Como se ilustra a continuación, mi equipo pudo identificar los productos mínimos viables y crear un flujo de usuarios simple.

Este flujo fue la segunda iteración después de eliminar las siguientes características:

  • Encuentra un depósito cerca de ti
  • Siga su progreso de reciclaje
  • Sistema de puntos

La priorización de características nos ayudó a eliminar las características anteriores y a centrarnos en el producto mínimo viable y a permanecer dentro del alcance de nuestra línea de tiempo del proyecto.

Diseño

El objetivo del diseño era utilizar la investigación UX para fomentar la simplicidad y facilidad de uso en la aplicación.

El mapa de flujo de usuario allanó el camino para la primera versión de wireframes. Sin el flujo del usuario, la estructura de alambre habría sido difícil y lenta porque las variaciones de diseño son infinitas.

Estructura preliminar de la pantalla de inicio de sesión.

Después de crear el wireframe inicial, realizamos pruebas de usuario para probar el flujo de la aplicación.

Pruebas

Las pruebas revelaron que el flujo era simple y que la aplicación era fácil de usar. La respuesta clave que recibimos fue que la pantalla de inicio de sesión debería leer "Iniciar sesión o Registrarse", en lugar de solo "Iniciar sesión". Esta retroalimentación se incorporó en la segunda iteración de estructura alámbrica.

Además, después de crear la estructura inicial, tuvimos una reunión de registro con nuestros clientes antes de seguir adelante. Esta reunión fue útil y aseguró que estábamos en el camino correcto y también fue una oportunidad para obtener comentarios sobre nuestra estructura alámbrica.

Por ejemplo, nuestro cliente nos solicitó que consideráramos eliminar la función "deslizar para obtener más información" en la pantalla de inicio de sesión. Tras una discusión adicional, el equipo de UX decidió eliminarlo porque alienta al usuario a comenzar a usar y explorar activamente la aplicación.

Prototipos

Utilizando los comentarios recopilados de la segunda iteración de la estructura alámbrica (como se discutió anteriormente), creamos el prototipo de fidelidad media (a continuación).

Prototipo de fidelidad media

A continuación, verá la pantalla de la cámara de media fidelidad. Aquí es donde se incorpora la inteligencia artificial en la aplicación.

Pantalla de cámara de media fidelidadFigura G

Según nuestra investigación, nuestros usuarios disfrutan de la facilidad de uso de Snapchat; el usuario puede capturar fácilmente una imagen con un solo clic. La función de cámara EcoAI permite al usuario tomar una foto de un elemento con la misma facilidad; Con el clic de un botón, el usuario capturará visualmente un elemento y la aplicación generará automáticamente los resultados (Figura G).

Seamos realistas; una aplicación de reciclaje no es la descarga más emocionante disponible en la tienda de aplicaciones. Para que nuestro diseño sea un poco más agradable, incorporamos humor para mantener al usuario interesado (ver más abajo).

Usando el prototipo de fidelidad media, continuamos las pruebas de usuario y comenzamos a diseñar las pantallas de alta fidelidad.

¡Eche un vistazo al prototipo de alta fidelidad en InVision!

Pruebas

Probamos en un total de 6 participantes en todas las etapas de creación de prototipos.

El método de prueba fue estructurado; Identificamos el alcance de la prueba y le dimos al usuario objetivos específicos. Tomamos notas detalladas sobre sus interacciones con el prototipo (por ejemplo, largas pausas) y tomamos nota de todos los comentarios.

Objetivo del usuario:
1. Busque cómo reciclar un elemento usando el ingreso de texto
2. Busque cómo reciclar un elemento con la función de cámara
3. Vea sus recordatorios
4. Vea su calendario

Prueba de versión 1:

Participante 1:

  • La pantalla de inicio de sesión también debe decir "Registrarse"
  • Asegúrese de que todas las etapas del proceso incluyan encabezados para explicar lo que está sucediendo
  • Asegúrese de que no haya ningún espacio en blanco

Participante 2:

  • Tener el icono del modo de cámara a la derecha en lugar de a la izquierda

Prueba de la versión 2:

Participante 1:

  • ¿La opción de iniciar sesión utilizando el inicio de sesión estándar y el inicio de sesión con Facebook debe ser su propia pantalla? Es decir, no debajo de la pantalla que solicita al usuario que inicie sesión
  • Las notas adhesivas son confusas durante las pruebas

Participante 2:

  • Sugirió una ventana emergente para la pantalla de resultados de la toma de fotografías
  • "¿No es lo que estás buscando? Intente la búsqueda de texto o tome una foto nuevamente ”
  • Debería poder deslizar los recordatorios o tener una X para eliminarlos.

Participante 3:

  • El ícono de la cámara debe estar muy a la derecha porque generalmente es más fácil acceder a él con la mano derecha usando una función de deslizamiento a la derecha

Prototipo digital

Participante 1:

  • La primera pantalla a la que debe dirigirse el usuario es la pantalla de "búsqueda" porque es la primera pestaña a la izquierda
  • El usuario debe poder hacer clic en el resaltado de “botella de plástico” después de seleccionarlo para dirigirlo a la página de resultados

Todos los comentarios de las pruebas se consideraron antes de pasar a la siguiente etapa. El equipo realizó revisiones, investigaciones de referencia y volvió a probar durante la fase de prueba.

Diseño de interfaz de usuario

Imaginamos un mundo inspirado y más conectado creando un impacto positivo en el medio ambiente.

La fase final de diseño para este proyecto fue completada por el especialista en UI de nuestro equipo.

El diseño de la interfaz de usuario requería muchos comentarios continuos y nuevas pruebas para crear el producto final.

Mood Board: Vida bajo el mar

El inicio del diseño fue fomentar un sentimiento de simplicidad, modernidad, innovación y naturaleza saludable. Esto se logró mediante el uso de espacios en blanco y colores vibrantes. El tipo de letra estable y serio utilizado crea una sensación innovadora para la aplicación.

A continuación encontrará la versión de alta fidelidad de las pantallas discutidas en la creación de prototipos de fidelidad media.

Iniciar sesión - Modo de cámara - Resultados de búsqueda - Confirmación de cuenta creada

Mejoras futuras

Siempre hay margen de mejora.

La línea de tiempo de 3 semanas del proyecto actual no permitió muchas características.

Las consideraciones futuras incluyen la incorporación de un sistema basado en puntos en la aplicación (por ejemplo, los usuarios son recompensados ​​por reciclar con puntos en la aplicación). Este sistema también consistiría en el seguimiento del progreso (es decir, el seguimiento del número o porcentaje de elementos que el usuario ha reciclado).

Para educar a nuestros usuarios y mantenerlos informados sobre los eventos actuales en su entorno, las mejoras futuras incluirían una función educativa (por ejemplo, blog).

Conclusión

En general, ¡el proyecto EcoAI fue un éxito! El equipo trabajó bien y duro para crear una aplicación simple, funcional y minimalista para mejorar la experiencia de nuestros usuarios en el momento del reciclaje.

El producto final excedió los objetivos comerciales, los objetivos del usuario y los objetivos del proyecto.

Eso es una envoltura, por ahora! Si le gustó mi estudio de caso, agradecería aplausos.

Puedes seguir mi trabajo aquí, en Medium, Instagram y LinkedIn.

Déjame saber lo que piensas en la sección de comentarios a continuación, ¡todos los comentarios son bienvenidos!

Gracias,

Karen Bhela.