Imaginarium UX/UI Case Study

Una nueva forma de crear juguetes

Imaginarium es la cadena de tiendas de juguetes más especializada del mundo, con 348 puntos de venta en 28 países, que ofrece a padres e hijos aprendizaje, diversión y la máxima garantía de calidad y seguridad. Imaginarium ayuda al desarrollo humano de los niños a través del juego promoviendo unos valores clave que contribuyen a formar mejores personas y, como consecuencia, a la construcción de un mundo mejor. La marca tiene dos objetivos fundamentales, por un lado conseguir que los niños se diviertan más y mejor, y por otro fomentar una completa formación y desarrollo de los niños.

A continuación se presenta el caso de estudio del rediseño de la experiencia de usuario online de Imaginarium y diseño de una nueva App para apoyar a los padres en el desarrollo de sus hijos.

El proyecto

Imaginarium es una empresa consolidada en venta en tienda física, con una marca que representa calidad y buen hacer en el mundo del juguete infantil pero su presencia online no corresponde con esta imagen. Existe una gran disparidad entre cómo se muestra la marca offline y online, y se cree que este es el motivo de las bajas ventas en la página web. La marca y las tiendas físicas son fácilmente reconocibles y se pretende que en Internet suceda lo mismo. Otro de los objetivos a alcanzar es el de acercar la marca a nuevos usuarios más jóvenes y más digitalizados por medio de una app para móvil.

Los compradores de Imaginarium son en su mayoría mujeres de entre 25 y 45 años preocupadas por ofrecer a sus hijos juguetes educativos de un diseño cuidado y responsables con la sociedad y el medio ambiente.

Entender

El primer paso en la fase de investigación es entender de dónde partimos, en qué contexto nos movemos y comenzar a trazar el camino a recorrer. Para ello utilizamos técnicas de análisis de usabilidad de la web actual, investigamos minuciosamente la competencia y nos metemos de lleno en la industria del juguete y de las nuevas tendencias a nivel de tecnología, retail y hábitos de consumo. Puedes hacer click en los enlaces para ver en detalle cada una de las técnicas:

Heurístico | Benchmark | DAFO | Mapa tendencias | Diagnóstico de la industria

Hipotetizar

Tras la fase inicial de la investigación se construyen varios prototipos de perfiles de usuario que encajan con el target de la marca. Inicialmente nos salieron cuatro protopersonas: una madre, un padre, una tía y un tío. También pensamos en las abuelas, pero nos dimos cuenta rápidamente que la mayoría no realizan compras online, por el momento. Dentro de unos años nosotros seremos los abuelos y la cosa cambiará…

Preguntar

Una vez definidos los perfiles iniciales, se toma como muestra a personas con esas características para verificar las hipótesis y obtener insights que nos ayuden a conocer las necesidades y frustraciones de nuestro target y construir perfiles lo más representativos posibles. Se realizan varias entrevistas y encuestas online a personas con hijos, sobrinos y profesionales que están en contacto con niños.

¿Qué queremos saber?

Se establecen varias temáticas a abordar y se diseña un flujo para ordenar las preguntas en la encuesta y se prepara un guión a seguir en las entrevistas. El objetivo de las encuestas online es reunir el máximo de resultados posibles, sacar estadísticas y datos cuantitativos y en cambio en las entrevistas se tiene un trato mucho más cercano con el usuario, donde se recogen opiniones y emociones mediante preguntas abiertas.

Flujo de la encuesta | Guión de una entrevista

Conclusiones investigación

Cuantitativas

Empatizar con las Personas

Con todos los insights conseguidos en la fase de investigación es el momento de definir a la perfección el perfil de los usuarios y poder diseñar una experiencia acorde a sus necesidades. Gracias a la investigación, conseguimos verificar el target que nos indicó el cliente en el briefing. Pasamos de tener 4 protopersonas a 2 personas, una tía y una mamá con las que emplearemos varias técnicas para empatizar con ellas, observar la experiencia actual con la marca y conseguir que todas las decisiones de diseño tengan como objetivo fortalecer las alegrías y aliviar al máximo las frustraciones.

Dar soluciones

Ponemos a nuestras personas en el centro del proceso y definimos los retos a los que nos vamos a enfrentar. Mediante varias técnicas de Brainstorming se proponen ideas y soluciones a esos retos. Después el equipo realiza una primera valoración y se priorizan las mejores soluciones con una matriz Impacto vs Esfuerzo donde las soluciones con mayor impacto y menor esfuerzo serán las que tendrán más prioridad.

Retos

Ver brainstorming | Ver propuesta de valor

Soluciones más valoradas

Bajo esfuerzo y alto impacto

Ver matriz impacto vs esfuerzo completa

Cuantificar el éxito

Antes de confeccionar la propuesta final, comparamos en un solo lienzo las necesidades de nuestros usuarios, los objetivos de negocio y las soluciones que proponemos para abordarlos. También definimos las métricas para cuantificar el éxito de la propuesta.

Ver scove canvas

La propuesta

Finalmente es junto con el cliente cuando se definen con exactitud las acciones de UX que se van a realizar y las fases en que va a constar la implementación.

Arquitectura de la Información

Análisis e hipótesis

El primer paso en la fase de prototipado es diseñar la nueva arquitectura de la información para facilitar la navegación, la búsqueda de productos y mejorar la conversión y el retorno en la web. Para ello seguimos los siguientes pasos:

· Mapeo del árbol de navegación actual.

· Análisis individual de ese árbol.

· Puesta en común nuestras conclusiones.

· Brainstorming grupal.

De este análisis extraemos que el árbol actual es muy extenso y complejo. En algunos casos el usuario tiene que elegir entre 14 opciones lo que provoca frustración y miedo a equivocarse. Tampoco se facilita la búsqueda ni tiene un sistema de filtros que ayude a encontrar el juguete deseado.

Se diseña una nueva propuesta mejorada basada en hipótesis fundamentadas en los gustos de nuestras personas.

Testear

Para verificar nuestras hipótesis elaboramos un test llamado Cardsorting donde planteamos la tarea de ordenar esas 26 subcategorías a criterio de cada usuario. En este caso realizamos un Cardsorting abierto en que los usuarios podían escribir la categoría padre y hacer tantos grupos como ellos considerasen. El test se realizó vía online y físicamente para poder obtener insights cualitativos.

Resultado

Con los resultados del Cardsorting obtenemos las categorías principales que existen y qué elementos deberían ir juntos dentro de una categoría.

Con esta propuesta pasamos de 9 categorías a 4 + un filtro por edad. De 19 categorías a 26 pero ordenadas siguiendo el modelo mental de nuestros usuarios. Se reducen de 14 a 9 las opciones agrupando los productos en niveles inferiores cumpliendo la Ley de Miller (7 +/- 2).

Ver árbol de navegación

Aún así, nos surgieron algunas dudas sobre la taxonomía de las categorías y realizamos una última prueba para asegurarnos de que los usuarios conseguían encontrar el producto que buscan. A 2 tías y a 1 papá les pedimos que encontraran 3 productos diferentes. La mayoría de nuestros usuarios consiguieron realizar las tareas con facilidad y detectamos que algunos de ellos buscaban por Edad primero y luego esperaban encontrar otro filtro con categorías.

Interacción Web

El usuario más representativo para la web es la tía. Marta es la tía responsable que quiere participar en la educación y el desarrollo de su sobrino. Quiere que los niños no jueguen solos, regalar cosas educativas, divertirse con sus sobrinos y regalar cosas prácticas.

Flujos principales

Se definen los diagramas de flujo que representan el camino que recorre un usuario al realizar las tareas más importantes en la web. El flujo de navegación de Marta, es muy sencillo: accede a la home y navega por el menú porque le gusta mirar y comparar los productos. Busca entre los resultados y analiza minuciosamente la información de los productos. Le convence uno de ellos y lo compra. Con esta técnica se visualizan las opciones de estructura, el alcance y el número de pantallas.

También se definen el resto de los flujos principales:

Proceso de búsqueda de una mamá. Más específico, sabe lo que busca así que lo hace desde el buscador directamente.

Proceso de búsqueda a través de una landing page. Búsqueda a través de buscadores como Google o cualquier foro o blog.

Proceso de devolución de un producto. Incentivando la devolución fácil y rápida.

Sketching

Estos son unos ejemplos de los sketch a mano que hicimos. Tras varias sesiones de divergencia se plasmaron en unos Wireframes en baja/media fidelidad con los que representábamos nuestras ideas.

Flowchart

A medida que se pintan los Wireframes se realiza el flujo de interacción de cada uno de los elementos con todas las pantallas. Posteriormente se construye un prototipo navegable para poder validar la propuesta con el cliente y testear con usuarios.

Prototipo navegable en Axure

Interacción App

Para el caso de la App, el usuario más representativo es la mamá. Cristina quiere que los niños aprendan pero que sobretodo se diviertan. No tiene mucho tiempo y tampoco sabe muchas veces que hacer.

Flujos principales

También para la App se definen los diagramas de flujo con las tareas más importantes. El flujo de navegación de Cristina, tendría los siguientes pasos: Añade el perfil de niños, rellena todos sus datos y las tareas en el Buenímetro. Guarda y accede a la Home. Navega con las tres categorías “¿Qué hacemos?, ¿Qué comemos? y ¿A qué jugamos?”. Utiliza el filtro, visualiza los resultados en el mapa y utiliza el buscador. Cuando hay algo que le gusta lo añade a la Whishlist y accede a la ficha de la actividad. Se decide por una opción y reserva las entradas. Automáticamente la actividad se le añade a su calendario.

Puedes consultar el resto de flujos:

Flujo a través de una notificación de próximas actividades. La mamá recibe una notificación informándole de las próximas actividades que tiene en el calendario

Proceso del Buenímetro. Añadir a los peques, añadir tareas, valorar, consultar la evolución y dar premios

Sketching

Como se hizo para la web, también para la App se invierte tiempo en hacer bocetos de todas las pantallas para conseguir una propuesta coherente y resolver todas la interacciones con los diferentes elementos de la interfaz.

Flowchart

Se plasman todas las pantallas en un Flowchart y se construye un prototipo navegable para testear la propuesta.

Ver flowchart completo

Una vez realizados los prototipos navegables de la web y de la App se validan con usuarios reales para comprobar si las soluciones implementadas son entendibles. Para ello se propone a 5 usuarios que realicen varias tareas en la Web y en la App y se registra el porcentaje de éxito en cada coso.

Usuarios que consiguen realizar una tarea

Web

App

Guía de estilos

Llega el momento de darle color y vida a todo el trabajo realizado hasta el momento. Profundizamos en la identidad visual de Imaginarium y sacamos patrones de estilos que seguirán en el diseño visual tanto de la web como de la App. Se plantea un moodboard con imágenes de referencia para validar el estilo, el tono y se definen las tipografías y los colores que emplearemos. También se realiza un gran trabajo en diseñar todos los iconos que representan cada una de las categorías y subcategorías.

Web

Aquí está el resultado. Un diseño donde el producto es el verdadero protagonista, fotos más grandes y vídeos de los niños interactuando con los juguetes. Se simplifica el menú de navegación, con iconos y texto para ver más rápido lo que buscas. También se ofrece en la home la posibilidad de acceder a los productos directamente por la edad. Como novedades encontramos el comparador, donde se pueden comparar todas las características de los juguetes y con un simple vistazo ver cual se adapta mejor a tus necesidades. La sección Inspírame, cuando no tienes ideas para regalar, te hacemos unas preguntas muy sencillas sobre la personalidad del niño y te damos soluciones acorde a tus respuestas. Y un checkout faseado y optimizado para mejorar la conversión.

Os dejo algunos visuales, para ver más detalles de las páginas principales podéis acceder al proyecto en Behance.

App

Siguiendo las mismas premisas que para la web, se presenta “La puerta pequeña”, una App para smartphone que ofrece ideas para apoyar a los padres en el desarrollo de sus hijos con experiencias, comidas y juegos. Encontramos numerosas opciones para planificar el tiempo libre con los niños, compaginarlo con las tareas diarias y sobretodo impulsar una dinámica para que esas actividades y tareas ayuden al desarrollo educacional de los más pequeños. A esta dinámica la denominamos “Buenímetro” y el objetivo es facilitar a los padres el seguimiento de las tareas y actividades y motivar a los niños. Los padres añaden las tareas y los premios, la App relaciona las actividades con esas tareas y toda la familia hace una valoración de cómo el niño va evolucionando en el aprendizaje. Para facilitar esta valoración en familia y que el Buenímetro sea más tangible para los niños, Imaginarium envía gratuitamente un panel semanal con pegatinas para que el niño pueda escribir sus tareas y pegar sus puntuaciones.

Recuerda que puedes ver más detalles del diseño visual de la App en el proyecto publicado en Behance.

Gracias por llegar hasta aquí

Puedes ver otros proyectos en mi perfil de Behance o seguirme en LinkedIn o Twitter para estar al tanto de otras cosas molonas sobre UX/UI.

También puedes dejar un comentario con alguna sugerencia o escribirme a pnavarroandres@hotmail.com