VUI para Odea.

Gracia E.
9 min readAug 10, 2020

--

Hace unos meses desarrollé Odea, una aplicación móvil que ayuda al usuario a gestionar los productos que tiene en su nevera, ya sea para hacer la compra o para utilizarlos en recetas de aprovechamiento; y además contacta con una red pequeña y cercana de vecinos para compartir sus excedentes.

Le he dado una vuelta al diseño, implementando su uso a través de un interfaz de voz.

El uso de la interfaz se centra en ayudarnos a gestionar la compra y cocinar recetas de aprovechamiento con los alimentos que tienes en casa.

A continuación voy a contar el proceso que he llevado a cabo, desde la investigación hasta el prototipado. Antes de comenzar con el proceso quiero dejar claro que se ha desarrollado una skill para un dispositivo Alexa, por lo que parte del proceso se centra en investigar el mercado de skills de Amazon.

Research

Los interfaces de voz están en auge, pero aún no han conseguido suficiente reconocimiento por los usuarios. En Amazon encontramos una “tienda” de skills para Alexa, aunque muchas de las que aparecen no tienen apenas opiniones debido a que son utilizadas por pocos usuarios.

Al ser un tipo de producto que todavía no está implementado en nuestro día a día como sí puede estarlo una app móvil, el benchmarking ha sido de gran ayuda.

Benchmarking

Skills organizadas por categorías

Al no ser lo suficientemente populares, el número de valoraciones es excaso: en el 95% de los casos no llegan a más de 10 reviews. Para el desarrollo de la interfaz nos vamos a fijar en la última sección a la que he dado el nombre de “Control de alimentos”:

¿Qué funcionalidades tienen?, ¿cómo se han desarrollado?, ¿cuál es su propuesta de valor?

Skill “Mi despensa”

Según la descripción, esta skill ofrece las siguientes funcionalidades:

  • Introducir alimentos: nombre del producto y fecha de caducidad.
  • “Sacar” alimentos al cocinarlos.
  • Posibilidad de saber qué alimentos caducan próximamente.
  • Crear una lista de lo que hay en la despensa para mandarla al correo electrónico.

Podemos aprovechar al máximo la netnografía para nuestro diseño. Estas valoraciones de los usuarios nos ayudan a idenficar características que solicitan los posibles usuarios como:

  • Lenguaje claro y conciso. No decir más de lo necesario.
  • Puede que sea útil colocar el despositivo de Alexa próximo a la cocina.
  • Posibilidad de introducir todos los productos que quieras: sin límites.

Skill “Nevera estado”

Según la descripción, esta skill ofrece las siguientes funcionalidades:

  • Introducir alimentos: nombre del producto y fecha de caducidad.
  • Introducir fecha de caducidad al abrir un producto. Tiene en cuenta que el tiempo disminuye.
  • Sacar” alimentos al cocinarlos.
  • Opción de “info” de los productos.

De igual modo que en la skill anterior, las opiniones nos pueden ayudar a la hora de desarrollar posibles fundionalidades:

  • Necesidad de comprobar el listado fuera de casa, por ejemplo en tu móvil.
  • Abrir la app con una palabra corta y sencilla.
  • Avisar automáticamente de los productos próximos a caducar.

Protopersona

El protopersona es una representación esquemática del posible usuario, basado en una serie de supuestos. De este modo, se crea a partir de un target que deducimos tras el research.

Como ya sabemos, los altavoces digitales no son (todavía) un recurso que utilice la mayoría de la población. Según los datos, un 6'2% de los españoles tienen en casa uno de estos dispositivos y normalmente son hombres entre 25–44 años, activos digitalmente, con un poder adquisitivo medio-alto y conviviendo en un hogar con hijos menores de 18 años.

A partir de estos datos y una serie de supuestos creamos a Pedro Lázaro, un padre “moderno” al que le falta tiempo.

Protopersona: Pedro Lázaro

Placeona

Para diseñar estas skills es importante conocer el entorno donde se encuentran, es decir, el escenario. Así será más fácil adaptar las necesidades del usuario.

Un mini research: según el estudio de Prodigioso Volcán, estas son las actividades más realizadas a través de estos dispositivos:

Estudio Prodigioso Volcán

Tras el benchmarking podemos deducir que parece buena idea colocar el dispositivo en la cocina ya que es mucho más útil para llevar un control de los alimentos disponibles y proponer recetas de aprovechamiento. Además, viendo el tipo de actividades que se hacen a través de estos dispositivos y el momento en que el usuario las realiza, tenerlo en la cocina puede incluso potenciar su uso:

  • A muchas personas les relaja cocinar y escuchar música de fondo.
  • ¿Por qué no sustituir la televisión de las cocinas por estos dispositivos y fomentar los podcast y las skills que dan las noticias? No es fácil cocinar mientras ves una pantalla.
  • Aunque las tareas del hogar puede que se realicen una vez a la semana, la cocina se suele limpiar diariamente y estos altavoces pueden entretenerte durante la tarea.

De modo que así quedaría nuestro placeona. He marcado las diferentes zonas donde el usuario suele almacenar la comida, ya que resultaría más cómodo saber qué tiene en casa y en qué estado está viéndolo con sus propios ojos, sumándole la ayuda del altavoz.

Placeona: cocina tipo.

System persona

El system persona nos ayuda desarrollar la personalidad de la skill, su comportamiento. Para ello tenemos que darle una serie de características que lo definan como “persona”.

Nos ayudaremos utilizando el Voice System Persona Canvas que nos ofece Sngular.

Mapa emocional

Primero hay que identificar elementos típicos de la conversación que tendrá el asistente con el usuario y colocarlos en una matriz para definirlos:

  • Saludos y despedidas
  • Afirmaciones, negaciones y confirmaciones
  • Información
  • “No entiendo”
  • Amenazas
  • Preguntas sobre procesos
Mapa emocional de la voz

Rasgos del Voice System

¿Cómo nos gustaría que fuera nuestro sistema?, ¿qué queremos que piense el usuario cuando se comunica con él? Para responder a estas preguntas lo más fácil es dotar a asistente de una serie de adjetivos que definan su personalidad. La definición es más sencilla si nos apoyamos en el contrapunto: “mi asistente es simpático pero no cariñoso”.

Rasgos del Voice System

System persona (protopersona)

Una vez definidos los rasgos de nuestro asistente, es hora de hacer lo que conocemos como protopersona, pero en este caso de un asistente digital. Tenemos que imaginarnos un personaje y darle caracterísitcas comunes como: frustraciones, motivaciones, su día a día…

Protopersona (system): Carla

Protojourney

Definiremos un viaje de usuario simplificado, es decir, un protojourney. Pedro Lázaro ha llegado de la compra (física) y tiene que hacer el recuento por voz de todos los productos comprados. Además es la hora de la cena y quiere aprovechar algunos alimentos que están a punto de caducar. Para estos procesos necesita la ayuda de Carla, su asistente de voz conectado a su dispositivo Alexa.

Protojourney: Viaje de usuario simplificado

Diseño

Gracias al research determinamos una serie de funcionalidades que necesitan mejora y otras que tenemos que crear como nuevas. De esta manera, este es el listado de funcionalidades a implementar:

  • Introducir alimentos: nombre del producto, fecha de caducidad y forma de conservación (nevera, congelador o despensa. Esto vendrá predeterminado, ya que los usuarios suelen coincidir en cómo conservar muchos de los alimentos, tendrá la opción de modificarse). Se puede hacer: dictándolos 1 a 1 si has hecho la compra física o introduciéndolos automáticamente si la compra está hecha por internet.
  • Opción para decir que se ha abierto un producto ya que cambian su periodo de caducidad.
  • Avisar de los productos que se van a caducar. Proponer con ellos (y con los que hay en casa) recetas de aprovechamiento.
  • Sacar alimentos una vez cocinados/consumidos. Preguntar si se introducen en la próxima lista de la compra.
  • Información de los alimentos. Opción de preguntar por cualquier producto para saber su fecha de caducidad, cómo lo podría cocinar, cuándo lo compré…
  • Opciones de lista de la compra: mandar al móvil para facilitar la compra física en el supermercado o crear una lista para comprar online. Existirá la opción de comprar en el supermercado de Amazon o en otros, por lo que se necesitará el desarrollo de APIs.

Mapa de sitio

Un mapa de sitio nos ayudará antes de empezar a crear el prototipo como tal, organizando las ideas que queremos implementar en la interfaz de voz. Así, priorizaremos y definiremos cuántos caminos vamos a desarrollar.

Mapa de sitio. Ayuda antes del diseño

Podemos destacar los 4 caminos más importantes:

  • Introducir alimentos
  • Avisos y recordatorios
  • Compra
  • Recetas de aprovechamiento

Diagrama de flujo. Flowchart

Flowchart de Carla

Con los caminos decididos se plantea este flujo, donde podemos ver el desarrollo de éstos:

  • Compra. Se divide en dos, una parte dedicada a cómo vamos a comprar (online o supermercado) y otra que tiene que ver con la lista de la compra. Con la lista generada, se volverá al “cómo” comprar para completar el proceso.
  • Introducir alimentos. Este es el camino más simple, consiste en introducir uno a uno mediante un dictado los alimentos que has comprado.
  • Recetas de aprovechamiento. Puedes elegir si Carla te dice automáticamente qué alimentos están en mal estado en tu cocina, y a partir de ahí genera una receta; o bien dictar tú mismo los alimentos con los que quieres generar recetas.
  • Información, avisos y alertas: Esta sección es la más ambigua. La idea es que Carla pueda hablarte, darte consejos de cocina, avisarte, sugerirte comidas…

Prototipo

En el flowchart se han definido los cuatro “caminos” principales que debería tener la skill. Ahora bien, se ha desarrallodo en profundidad el primero: COMPRA.

Voiceflow

Para hacer el prototipo he utilizado Voiceflow. En el modelo se alternan bloques “speak” con bloques de “choices”, dependiendo si habla el usuario o el dispositivo.

Screenshot de la herramienta Voiceflow

Respecto a los bloques de “choices”, cada una de las opciones que tiene el usuario para responder viene reforzada con una serie de “utterances”, de manera que si el usuario hace una variación de lo que tiene predeterminado nuestro asistente, puede entenderlo igualmente. Por ejemplo, cuando la respuesta tiene que ser “automáticamente” se dan las siguientes alternativas:

Utterances para automáticamente

“Forma de hablar” de Carla

Como hemos definido en el system persona buscamos un asistente simpático, preciso y amistoso.

Ejemplo de bloque: Forma de hablar

Además, está demostrado que para el usuario es mucho más sencillo retener información cuando está al final de la frase, de modo que las preguntas que hace Carla siempre tienen la misma estructura:

Ejemplos de bloques: Estructura de preguntas

Pruebas: grabaciones

Una vez tenemos el modelo realizado en Voiceflow solo queda probarlo. Ahora mismo no dispongo de un Alexa, pero podemos utilizarlo también con la app que nos ofrece Amazon para nuestros móviles.

Compra en el supermercado
Compra online

Iteraciones

En cada producto que diseño las iteraciones son una parte fundamental del proceso, y en este caso estas son las más destacadas:

  • Hacer muchas pruebas y mejorar, siempre teniendo en cuenta al usuario.
  • Desarrollar en Voiceflow todos los caminos planteados en el flowchart.
  • Desarrollarlo con código y Javascript.
  • Crear APIs con otros supermercados, de forma que no solo funcione comprando en Amazon.
  • Diseñar las pantallas en AdobeXD para que funcione en dispositivos como Echo Show.

Conclusiones

Crear un asistente por reconocimiento de voz no es sencillo, sobretodo si quieres que realmente se valore la experiencia de usuario. Ahora bien, el proceso ha sido interesante por varios motivos:

  • Es algo nuevo para mí, no solo el hecho de utilizar una herramienta nueva como Webflow, sino las cosas que has de tener en cuenta a la hora de diseñar: dónde va a estar el dispositivo para que la comunicación sea cómoda (placeona), cómo es la personalidad del sistema, cómo habla (system persona)…
  • También es interesante que aún siendo un tipo de proyecto nuevo para mí, hay muchas fases que podemos reutilizar de otras metodologías como el Design Thinking o el Lean UX: protopersona, el modo de hacer benchmarking, el protojourney o el flowchart.
  • He intentado (y voy a seguir intentando) desarrollarlo con código y JavaScript. De momento no lo he conseguido, pero ¡lo haré! Al menos he aprendido cómo hacer que el navegador escriba a partir de mi voz… (Gracias a este vídeo)
JavaScript

Cualquier idea o posible mejora que pueda ayudar a mejorar el asistente de voz es bienvenida. ¡Gracias por leerme😊!

--

--

Gracia E.
Gracia E.

Written by Gracia E.

Diseñadora UX/UI | Arquitecta

No responses yet