Revolucionando el Zoo de Barcelona (2ª parte: UX Design)
En el post anterior os hablé de la investigación que llevamos a cabo mi equipo y yo para convertir el Zoo de Barcelona en un modelo para otros zoológicos del mundo y un lugar de visita obligada para los turistas y residentes.
Después de una semana de trabajo intenso, nuestra propuesta fue desarrollar una pantalla interactiva que se colocaría en el espacio de cada animal y que proporcionaría información sobre él. La pantalla tendría que ser educativa, permitir a los visitantes conocer las labores de conservación de los animales e incluso contribuir a ellas, así como permitir que los niños se divirtiesen aprendiendo.
La metodología que empleamos en este proyecto fue el design thinking. En el post anterior os hablé de las fases 1 (Empatizar), 2 (Definir) y 3 (Idear). Una vez determinada la propuesta de valor, entramos en la fase 4.
Fase 4. Prototipar
Padre e hijo visitan el zoo
Antes de ponernos manos a la obra para desarrollar nuestro prototipo, creamos un storyboard que representaba, en varias viñetas, el camino de un usuario que visita el zoo y se encuentra con nuestra pantalla interactiva, así como las principales acciones que realiza con ella.
En esta historia, un padre está de visita en el zoo con su hijo pequeño. Cuando se acercan al espacio del oso, les llama la atención una gran pantalla. Al acercarse, descubren que esta pantalla es interactiva y que con ella pueden descubrir mucha información sobre este animal. Además, el niño está feliz porque puede jugar con la pantalla, y el padre puede conocer las maneras en que el zoo ayuda a los animales y puede incluso participar en su protección. También pueden informarse de las actividades del día relacionadas con el oso. Al final, padre e hijo se quedan con una buena sensación, ya que sienten que han aprendido, que se han divertido y que el oso está bien atendido.
La nutria común
Aunque nuestra propuesta incluía una pantalla interactiva para cada especie, ¡no podíamos desarrollarlas todas! La nutria común (de nombre científico Lutra lutra) fue el animal que escogimos finalmente para diseñar la pantalla interactiva. Es un animal que había quedado arrinconado en las zonas menos pobladas de Catalunya pero que, con la colaboración del Zoo de Barcelona, ha sido re-introducido en diferentes ríos, así que nos pareció un animal ideal para desarrollar nuestra idea y mostrar la labor de protección y conservación que hace el zoo.
Inspiración visual
Para inspirarnos en el diseño de la pantalla, estuvimos investigando y buscando referencias de otras pantallas interactivas para coger ideas de funcionamiento, estructura e interacción. También buscamos inspiración visual en webs y aplicaciones para definir el look&feel de nuestra pantalla: colores, tipografías, etc. Todo esto lo plasmamos en un moodboard que nos serviría como referencia a la hora de diseñar la pantalla.
Diseñando la pantalla interactiva
La creación de la arquitectura de contenidos fue un momento clave en el proceso de diseño, ya que era el momento de decidir qué información y funcionalidades iba a incluir nuestra pantalla. Para esto tuvimos que investigar y conocer las principales características de la nutria, su nivel de amenaza como especie o las iniciativas que se llevan a cabo para protegerla.
Decidimos que nuestra pantalla tendría cuatro secciones principales:
- Un apartado con información sobre el animal, desde el cual el usuario podría conocer sus características, su hábitat natural, el nivel de amenaza de la especie o qué otros tipos de nutria existen.
- Una sección desde la cual el usuario podría colaborar en la protección del animal con un código incluido en su entrada. El hecho de introducir este código permitiría que parte del dinero invertido en la entrada se destinase a acciones de preservación y protección de la especie. Desde esta sección los visitantes también podrían conocer qué iniciativas se llevan a cabo desde el zoo para proteger a al animal.
- Un apartado desde el cual se podrían consultar todas las actividades del día relacionadas con el animal (alimentación, charlas de expertos, etc.)
- Un juego de preguntas sobre el animal para que los más pequeños disfrutasen y a la vez aprendieran sobre la especie.
Además, decidimos incorporar tres funcionalidades adicionales:
- Una aplicación para hacerse selfies, desde la cual niños y adultos podrían hacerse una foto con el animal y recogerla gratuitamente a la salida.
- Un apartado desde el cual se podría, a través de unas cámaras situadas dentro del espacio del animal, hacer zoom y ver a los animales más de cerca, o observarlos en los momentos en que no se ven a simple vista.
- Un mapa del zoo para que los visitantes se orientasen fácilmente dentro del recinto.
Una vez tomadas estas decisiones, creamos los wireframes y el wireflow para determinar cómo sería cada sección: qué elementos se incluirían y como se iban a distribuir, como sería la navegación entre páginas, etc.
Dando vida a nuestro prototipo
Finalmente, llegó el momento de crear las vistas finales y convertir nuestra idea en realidad. En primer lugar, desarrollamos todas pantallas con Sketch, para después unirlas y crear el prototipo interactivo con InVision.
Creamos una pantalla con un menú lateral siempre visible, con el logotipo del Zoo de Barcelona y una serie de botones para acceder a cada apartado. El resto de la pantalla se utilizaría para mostrar la información sobre la nutria. Un botón en la esquina superior, además, permitiría cambiar de idioma, haciendo la información accesible para las personas extranjeras.
Aquí os dejo un vídeo dónde podéis ver el resultado final de nuestro prototipo para la pantalla interactiva.
Fase 5. Testear
Finalmente, llegó el momento de probar el prototipo con usuarios reales. Seleccionamos unas cuantas personas para probar nuestra pantalla interactiva, y así obtener feedback sobre su funcionamiento.
Para simular la pantalla, que en el zoo se colocaría junto al espacio de la nutria, utilizamos un televisor. Aunque el televisor no era táctil, animamos a los usuarios a tocarlo como si fuera una pantalla interactiva, mientras uno de nosotros simulaba los “clicks” del usuario a través del ordenador.
El testeo de la pantalla con usuarios nos permitió obtener una gran cantidad feedback de calidad sobre nuestra pantalla, y nos permitió ver qué partes funcionaban y cuáles no. En los siguientes apartados os cuento a qué conclusiones llegamos con este feedback.
Aspectos positivos
La pantalla interactiva tuvo muy buena acogida por parte de los usuarios. En general, les pareció útil y divertida, especialmente para los niños, ya que, en palabras de una de nuestras usuarias, les permitía “aprender jugando”. También lo consideraron una mejora respecto a los carteles que tiene actualmente el Zoo de Barcelona.
Las funcionalidades que más éxito tuvieron fueron el Quiz Game, el Selfie y el Zoom. Una usuaria comentó que los niños, hoy en día, están muy habituados a utilizar las nuevas tecnologías, así que esta pantalla era un buen recurso para atraer su atención.
Los usuarios también opinaron que la navegación de la pantalla era bastante intuitiva, y que no habían tenido problemas en encontrar aquello que buscaban. Además, se comentó que la pantalla hacía que los usuarios se sintieran más cercanos al animal (“porque el zoo no es un museo”, comentaba una usuaria).
En definitiva, los usuarios consideraron que el uso de estas pantallas suponía una mejora y una modernización del zoo.
Aspectos negativos
Un problema que detectamos con el test fue que algunas de las pantallas se pasaban por alto, probablemente debido a que la navegación entre las pantallas del mismo apartado no estaba suficientemente destacada.
Descubrimos también que la sección que permitía a los usuarios ayudar a la nutria mediante el código de su entrada no era lo suficientemente clara: los usuarios no terminaron de entender de qué manera estaban ayudando al animal.
Los usuarios también comentaron que en las actividades mostradas en la pantalla debería indicarse para qué edades estaban recomendadas. Lo mismo se comentó respecto al Quiz Game.
Por último, en general, los usuarios comentaron que el hecho de que el Zoo de Barcelona pudiera contar con estas pantallas interactivas no cambiaría su visión sobre las condiciones en que viven los animales, y algunos usuarios echaron en falta información sobre esas condiciones.
Qué haríamos a continuación
Todo el feedback obtenido en el test con usuarios nos sirvió para determinar cuáles eran los aspectos más urgentes a mejorar en nuestro prototipo:
- Replantear la navegación para que los usuarios la identificaran claramente y no se perdieran ninguna información.
- Hacer que el apartado “El Zoo Ayuda” fuera más visual y más claro para los usuarios, dándoles a entender cómo contribuir con su entrada y de qué manera estarían ayudando al animal si lo hicieran.
- Ampliar la información sobre las condiciones en que se encuentran los animales del zoo, y hacer más visibles las acciones de protección y conservación en las que el zoo participa para proteger a los animales.
- Especificar la edad recomendada para las actividades y para el Quiz game.
Conclusiones y agradecimientos
Formar parte de este proyecto ha sido una experiencia muy emocionante. Tras días intensos de trabajar sin parar, conseguimos desarrollar y testear una propuesta para mejorar el Zoo de Barcelona y, aunque nuestro prototipo requiere algunas mejoras, estoy muy satisfecha con lo mucho que hemos logrado en tan solo dos semanas de trabajo.
Tras el design sprint de hace unas semanas, participar en este proyecto utilizando la metodología design thinking me ha ayudado todavía más a entender la importancia del research para conocer las necesidades de los usuarios. Y es que ¿cómo se puede crear una solución si antes no conocemos a las personas a quién nos dirigimos?
Por otro lado, el diseño y desarrollo del prototipo (desde la arquitectura de contenidos, pasando por los wireframes y wireflows, hasta llegar a las pantallas finales) me ha permitido seguir practicando y perfeccionando mis habilidades de diseño de interfaz. Al fin y al cabo, la interfaz es la cara visible de todo el trabajo de investigación que hay detrás del producto y, si esta no funciona, no estamos cumpliendo nuestro objetivo.
Aprovecho para dar las gracias a todas aquellas personas que nos dedicaron un rato de su tiempo para ayudarnos con nuestro proyecto, tanto respondiendo a nuestras preguntas en la fase de investigación como probando nuestro prototipo en el día del testeo. Gracias también a Pere y Nuria por su apoyo y sus consejos. Y, por supuesto, a mi equipo: Xavi y Helena.
¡Nos vemos en el siguiente proyecto!
