Ux Case Study Imaginarium
El UX detrás de la compra de juguetes.
Me estreno en esta plataforma con un case study realizado para el proyecto fin de master de Experiencia de usuario y Usabilidad de Kschool. Se trata del rediseño del site de Imaginarium y de la creación de una app para éste.
¿Qué es Imaginarium?
Para el que no lo sepa, Imaginarium es una marca especializada en el sector de los juguetes a nivel mundial, que se caracteriza por tratar de desarrollar el concepto juegoeducativo ligado a la magia y a la imaginación. El concepto Imaginarium se refleja con toda su magia en las tiendas y en su doble puerta para niños y adultos, una poderosa metáfora de bienvenida. La puertica, como la llamo yo.
Con 348 puntos de venta en 28 países, 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.
El equipo
El proyecto lo llevamos a cabo en equipo, encargándonos todos por igual de todas las áreas que abarca. Hemos tardado unos cinco meses, perdido en vida social y ganado en conocimiento y nos hemos vuelto adictos a los post-It… Worth it!
Briefing
Existe una gran disparidad entre cómo muestran la marca offline y online. El cliente nos plantea un reto de rediseño del site tanto a nivel visual como de estructura. Un rediseño que unifique su posicionamiento on y offline.
Además, quieren acercarse 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.
Investigación
Entendiendo el problema
Empezamos explorando todo lo que sabíamos sobre la industria del juguete, las nuevas tendencias tecnológicas, la competencia del mercado y los hábitos de consumo.
Lo primero que hacemos es un análisis heurístico para ver los puntos fuertes y débiles de la web. Efectivamente comprobamos que la identidad de la web no es consistente con tienda fisica, la estructura y la navegación es bastante compleja y la búsqueda puede resultar confusa. Seguimos con un Benchmarking donde comparamos Imaginarium con otras seis jugueterías. Cositas que nos gustaron: la opción de vista previa del producto, el proceso del check out y un buscador de regalos. También hicimos un DAFO para ver las fortalezas y las debilidades. Como fortaleza destacar que tiene un reconocimiento de marca debido a la tienda física.
Usamos otras herramientas de investigación para investigar el mercado del juguete: un Mapa de Tendencias y un Diagnóstico de la Industria.
Además llevamos a cabo una “investigación contextual” (vamos, la técnica del safari) y fuimos a varias tiendas Imaginarium por Madrid para ver el entorno y cómo se desarrollaban las ventas offline (como siempre que voy, me dieron ganas de entrar por la puertica). También hicimos una compra online para ver cómo era todo el proceso y descubrimos que les interesa mucho el feedback del consumidor, preguntando por el proceso de compra y la calidad del producto. Esto nos gustó y quisimos mantenerlo.
Hipótesis
Una vez lista la investigación previa, construimos cuatro protopersonas que creemos que encajan con la marca: una madre, un padre, una tía y un tío. También pensamos en las abuelas, pero vimos que, por el momento, pocas hacen compras online. Dentro de unos años nosotros seremos los abuelos y la cosa cambiará…
Entendiendo a las personas
Encuestas
Con esas protopersonas en mente empezamos con las encuentas online para entender a nuestro usuario. Diseñamos un flujo para la encuesta y la lanzamos en foros de padres, a personas con sobrinos y a profesionales que están en contacto con niños.
¿Qué queremos saber? Queremos verificar el target de la marca, conocer la imagen que tiene en los usuarios, cómo está la venta online y la fidelización.
En resumen, las mamás compran más juguetes que los papás pero muy pocas compran en Imaginarium online, las razones principales: no sabían que existía la tienda online y prefieren ir a la tienda física a ver el juguete.
Entrevistas
Una vez analizados los resultados de las encuestas pasamos a la acción con las entrevistas en profundidad. Realizamos 10 entrevistas de una hora aproximada de duración cada una de ellas a cinco mamás, dos tías, un tío y dos papás.
¿Qué queremos saber? Queremos conocer a nuestro usuario, saber sus hábitos de compra de juguetes, su relación con Imaginarium, saber cómo sería su compra online ideal y cómo podemos fidelizarle.
Puedes ver los resultados con calma en el link de abajo pero, si no te apetece leer ahora, te hago un pequeño resumen: La gran mayoría de los entrevistados suelen comprar online de forma habitual excepto los juguetes, que necesitan ver y tocar el juguete para decidirse, ver la calidad del material, la resistencia, el tamaño… y, por regla general, se encargan de ello las mamás o las tías, además disfrutan haciéndolo.
Hipótesis erróneas
Cositas que habíamos hipotetizado como claves y que después de las entrevistas descubrimos que no eran así:
No suelen buscar ayuda del vendedor, no necesitan asistencia personal
No tienen un blog o web de referencia, buscan en Google directamente
No les gusta la opción de compra por pack
Empatizando
Una vez recogidas todas las conclusiones e insights de las entrevistas verificamos que el target es el correcto y unificamos los perfiles dejando sólo dos personas:
La mamá
La mamá más o menos sabe lo que regalar a sus hijos pequeños, o parte de una base, y no busca algo que especifique que sea educativo, sabe que cualquier cosa con la que puedan jugar les va a ayudar en su desarrollo y por ello compran más variedad de juguetes.
La tía molona
La tía, por regla general, cree que los juguetes valorados como “educativos” son mejores para el desarrollo de su sobrino y va a intentar informarse y asegurarse de que los juguetes que compren tengan ese valor.
Las dos tienen un comportamiento muy similar con algunas diferencias. Para poder empatizar 100% con ellas, creamos varios recursos para tener siempre presentes y poder ponernos en su lugar siempre que lo necesitemos: persona, mapa de empatía, escenario, caso de uso, mapa de experiencia y customer journey. Puedes verlos pulsando en ‘conoce su historia’.
Os presento a Cris y a Marta:
Definiendo la estrategia
Fase de ideación
Después de la investigación ponemos a Cris y a Marta en el centro del proceso y realizamos varios Brainstorming definiendo retos y buscando soluciones a los problemas que fuimos encontrando en la investigación.
Los retos
Como en todos los Brainstormings, surgieron ideas factibles, otras no tanto e ideas locas, como por ejemplo hacer un site donde hubiera dos accesos, el de la puerta grande, para los adultos, con la tienda online, y el de la puertica, para los peques, con juegos y cosas para su desarrollo, que estuviera conectado de tal manera que según los avances del niño al papá le sugiriera juguetes… la idea molaba, pero se quedó en eso, una idea.
Algunas de las ideas factibles que nos surgieron:
Incluir videos e imágenes de los productos con los niños en todos los productos, para ver como se interactúa con él y su tamaño.
Mejorar y hacer más visible las especificaciones de seguridad, calidad y valor educativo (iconos descriptivos).
Crear la funcionalidad para comparar productos.
Crear la funcionalidad “Inspírame”, para recomendar regalos.
Facilidad para realizar servicio de devolución, con pegatina incluida en la caja del envío.
Con las ideas que surgieron hicimos una matriz impacto vs esfuerzo para saber cómo priorizar el proceso.
El siguiente paso que hicimos fue conectar los objetivos del negocio y las necesidades del usuario con las soluciones que proponemos para abordarlos, creando una propuesta de valor. Y estructuramos estos objetivos en el Scope Canvas para presentar a cliente.
La Propuesta final y el principio del nuevo Imaginarium
Llegó la hora de decidir cuales son los objetivos claves del negocio y atributos de UX que influyen en él y de recopilarlos para hacer una propuesta de cliente. En ella describimos cuáles son los objetivos del proyecto, cuál era la situación inicial del producto, y las debilidades detectadas en la misma, describimos las soluciones que aportamos en nuestra propuesta y a qué situación queremos llegar. Lo que viene siendo un resumen de toda la fase de investigación y estrategia.
Objetivo clave 1: Ser “el Amazon de los juguetes”
¿Cómo lo conseguimos? Proporcionando una información relevante sobre el producto para una mejor toma de decisión, facilitando el proceso de búsqueda, y mejorando el proceso de checkout y devolución.Objetivo clave 2: Unificar la presencia de marca
Creando una experiencia e imagen consistente entre los distintos canales, consiguiendo un reconocimiento de Marca y dar mayor visibilidad a la tienda online.Objetivo clave 3: Fidelizar a nuevas generaciones
Desarrollando un nuevo canal para satisfacer necesidades nuevos usuarios mediante una app móvil y haciendo más relevante la comunicación con clientes (Newsletter).
Arquitectura de Información Web
Una de las cosas que descubrimos en la investigación inicial, y más adelante en las entrevistas en profundidad, es que encontrar algo en la web de Imaginarium era un poco caótico, así que nos pusimos manos a la obra para mejorar la arquitectura de información.
¿Por dónde empezamos?
· Mapeo del árbol de navegación actual.
· Análisis individual de ese árbol.
· Puesta en común de nuestras conclusiones.
· Brainstorming grupal.
Concluimos que el árbol actual es muy extenso y complejo, hay mucho donde elegir y provoca frustración y miedo a equivocarse. Además, el sistema de filtros que tiene la búsqueda no ayuda a encontrar el juguete deseado… Hay que darle una vueltecita.
Diseñamos una nueva propuesta basada en las hipótesis de la investigación con nuestros usuarios y siempre teniendo en mente a Cris y a Marta, nuestras mamá y tía favoritas.
Cardsorting
Para comprobar que nuestra hipótesis es correcta, lo testamos haciendo dos cardsorting abiertos, uno online, mediante la herramienta OptimalSort, a ocho participantes, todos dentro de nuestro perfil, y otro presencial, donde participaron una madre, un padre, una abuela y un tío.
26 cards y varios días después tenemos los resultados con las categorías principales y qué elementos deberían ir juntos dentro de cada una de ellas.
Conseguimos pasar de 9 categorías a 4 con un filtro por edad. De 19 subcategorías a 26 pero ordenadas siguiendo el modelo mental de nuestros usuarios. Reducimos de 14 a 9 las opciones, agrupando los productos en niveles inferiores cumpliendo la Ley de Miller (7 +/- 2).
Treejack
Teníamos dudas sobre la taxonomía de las categorías así que realizamos una última prueba para asegurarnos de que los usuarios conseguían encontrar el producto que buscan. La prueba fue un treejack online donde pedimos a los usuarios que encontraran tres 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. La prueba se realizó a 2 tías y a 1 papá.
Diagramas de flujo
Revisamos los Casos de uso de Cris y de Marta, nuestras personas favoritas, y nos salieron cuatro diagramas de flujo:
- Compra de una mamá: más específico, sabe lo que busca.
- Compra de una tía: le gusta mirar y comparar más productos.
- Compra a través de una landing page: a través de páginas como Google…
- Devolución de un producto: proceso de devolución fácil y rápida.
Prototipado
Sketching a mano
Comenzamos a prototipar en papel y lápiz, vamos, lo de toda la vida, una manera rápida y barata de ver si las cosas funcionan o no antes de pasar a prototipos de alta fidelidad.
Wireframes
Empezamos a prototipar en axure, (programa que, gracias al autocorrector de una compañera del máster, empezamos a llamar Azufre, con cariño). Aquí os dejo las pantallas que hicimos:
Podéis ver el prototipo navegable en Axure pulsando aquí.
Wireframes de alta fidelidad
Esto fue lo que nos dio tiempo a hacer en el máster, en lo que se refiere a la mejora de la web (más adelante os cuento el trabajo de la app). A partir de aquí, todos los cambios realizados se han hecho individualmente, siempre en colaboración con los demás, iterando sobre las cosas que vimos que se podían mejorar.
Aquí os dejo los prototipos con algunas de las mejoras hechas y ya en alta fidelidad. Está realizado con Sketch.
Diseño Visual
Después testear el prototipo con dos usuarios, descubrí varios elementos que había que mejorar e iteré sobre ellos en el diseño visual, corrigiendo varios errores que encontré, como por ejemplo, incluir la opción de iniciar sesión con facebook y google en el proceso de compra (ya que la opción existe para registrarse) o incluir el botón para solicitar feedback del proceso de la compra en la página de confirmación, que habíamos decidido mantenerlo de la página original.
Flowchart
Realizamos un flowchart para comprobar que no nos hemos dejado páginas en el tintero.
App: La Puerta Pequeña
¿Qué es la puerta pequeña?
Nuestra app La Puerta Pequeña ofrece ideas para apoyar a los padres en el desarrollo sus hijos con actividades, experiencias, comidas y juegos personalizados. En ella puedes calendarizar planes completos o actividades sueltas que hacer en familia.
La App relaciona las actividades que has ido haciendo y valorando positivamente para recomendarte de manera personalizada nuevas ideas.
También dispone de una Hucha Virtual, llamada buenímetro, donde los padres pueden registrar el progreso de sus hijos, tanto en actividades complejas como en actividades rutinarias, y decidir con ellos cómo premiarles por la evolución que hayan tenido. Se trata de hacer un uso en familia y que el niño también registre sus progresos en su propio mural semanal con pegatinas, que Imaginarium envía gratuitamente al descargar la app. Así, adulto y peque pueden hacerlo juntos.
Por cada compra online que se haga se envía un pack de pegatinas para el mural gratuitas, teniendo la posibilidad de aumentar ventas.
Arquitectura de Información app
La estructura de la app es sencilla, hay tres categorías: Qué hacer, qué comer y a qué jugar, cada una de ellas con sus fichas de producto. Todo ello se puede incorporar en el calendario que se puede sincronizar con el del dispositivo y al que puedes añadir tareas personales. Por último contiene el perfil y el buenímetro.
Diagramas de flujo app
Volvemos a revisar los Casos de uso de Cris y de Marta, para ver los procesos clave de la app:
- Descarga de la app: Primera vez que usamos la app y todas sus funciones.
- Recibe notificación de próxima actividad: Recordatorio de actividad.
- Proceso del buenímetro: Inicio del uso de la hucha virtual.
Prototipado de la App
Sketching a mano
Volvemos a empezar generando la idea de la app en papel y lápiz, iterando sobre los errores antes de pasar al prototipado en sketch. Hay que decir que nos pillaron las vacaciones de por medio y seguimos dándole duro a distancia y poniendo en común el trabajo en videoconferencias semanales. ¡Gran equipo! Creo que no exagero si digo que el buenímetro cambió de concepto como cinco veces XD.
Wireframes
Una vez definidas todas las funciones de la app, empezamos a prototipar en sketch. Aquí os dejo las pantallas que hicimos:
Podéis ver el prototipo navegable en InVision pulsando aquí.
Wireframes de alta fidelidad de la app
Como con la web, hasta aquí llegamos en el máster. Los cambios a continuación se han hecho individualmente, iterando sobre las cosas a mejorar.
Aprovechando el lanzamiento del Iphone X, modificamos el tamaño para amoldarlo a este nuevo formato. Aquí os dejo los prototipos, realizados con Sketch en alta fidelidad.
Flowchart app
Como con la web, comprobamos que no nos hemos dejado ninguna acción suelta realizando un flowchart de la app.
Podéis ver el prototipo navegable hecho en InVision aquí.
Y llegó el fin
Este es el resultado de más de cinco meses de trabajo. Muchas gracias por haber llegado hasta aquí. Es probable que más adelante retome la app y complete este post con el visual, pero de momento termino aquí y os dejo un poco con espectativa :)
Podéis ver los detalles más visuales en mi Behance.
Si queréis saber un poquito sobre mí puedes leer este post.
También puedes localizarme en Twitter, LinkedIn o escribiendo a maitea83@gmail.com
Muchas gracias
Por cierto, a cuatro días de entregar el proyecto, Imaginarium hizo un rediseño de la web, dándole un lavado de cara al site. Coincidencias de la vida.
