[ Caso 05 ]
ProductUX Engineering

HBK Happy Store

Cuando la pandemia cerró su local en Lima, la llevamos a una tienda online pensada para vender en el Perú y en la región, y la ajustamos con pruebas con padres y niños.

ClienteHBK Happy Store
SedeLima y Miami
Año2020
EtapasMar - jun y oct - nov
Mi rolProduct Marketer
Portada de la tienda en línea de HBK Happy Store
10participantes en dos rondas de prueba: 6 padres y 4 niños
3cambios de producto que salieron de los hallazgos
87.5 %de satisfacción tras los cambios, frente a 62.5 % en la primera prueba
[ 01 · Contexto ]

Una juguetería importada, sin canal digital

HBK Happy Store nació en 2018 como una tienda para niños en Lima, fundada por Mildre y Sandra Castro, con juguetes, ropa y accesorios de marcas importadas de Estados Unidos.

[ 02 · Problema de negocio ]

Sin local y sin tienda online

En 2020 la crisis sanitaria cerró el local y la marca no tenía presencia online. Además, el inventario, los pedidos y el seguimiento de ventas no escalaban. Necesitaba un canal que vendiera y que pudiera crecer fuera de Lima.

Juguetes de muchas marcas y franquicias
[ 03 · Qué hicimos ]

Lanzar, probar y ajustar

Trabajé con las fundadoras y dos diseñadores UX/UI. Mi rol fue el de product marketer: investigación, posicionamiento, pruebas y la priorización de los cambios.

  1. 01
    Investigamos el mercado con poco presupuesto.

    Observación y análisis de competidores y referentes, y dos segmentos: las madres y padres que compran y los niños que eligen.

  2. 02
    Definimos la marca y el catálogo.

    Logotipo, colores y una arquitectura de información pensada para el catálogo y el posicionamiento de la tienda.

  3. 03
    Probamos antes de lanzar.

    Prototipos interactivos para las fundadoras y dos rondas de pruebas de usabilidad con tareas reales de compra y una encuesta de satisfacción.

  4. 04
    Convertimos los hallazgos en cambios.

    Colecciones por franquicia, un aviso claro de la cuenta creada al comprar y un chat flotante en todas las páginas, conectado a Messenger.

[ Investigación ]

Referentes y dos públicos

Tai LoyCarambaMattelToys R UsLego

Con los antecedentes del negocio separamos a quienes deciden la compra de quienes la influyen, y de ahí salieron los perfiles y el mapa de empatía.

Segmentación: adultos que deciden la compra y niños que la influyen
Mapa de empatía de HBK Happy Store
Mapa de empatía. Ábrelo para leerlo completo.
[ Marca y catálogo ]

Una marca que sonríe, un catálogo por personaje

Logotipo de HBK Happy Store
Logotipo
Tipografía Hind en tres pesos
Tipografía
Paleta: amarillo #FFDC00, rosa #FF395F, turquesa #00BFAC
Colores

El logo usa una tipografía legible con una distorsión que dibuja una sonrisa, y los colores se asocian con el juego. El mapa del sitio se refinó en varias vueltas cruzando catálogo, posicionamiento y la forma en que la gente busca.

Mapa del sitio de la tienda
Arquitectura de la información.
[ Pruebas ]

Diez personas, tareas reales de compra

Sesiones remotas y moderadas de unos 30 minutos, con incentivos de hasta S/ 100. Con el prototipo de alta fidelidad tenían que encontrar un juguete, filtrar por edad y categoría, agregar al carrito y pagar, pensando en voz alta. Al final calificaron su satisfacción del 1 al 5.

Prototipo interactivo de la tienda
Prototipo interactivo del flujo de compra.
Prueba del prototipo en celular
Sesión remota con una participante
Participantes durante una sesión
[ Hallazgos ]

Lo que dijeron

¡Me encantaría ver el logo de Frozen! Veo el de Disney, pero aquí se mezclan muchas cosas.
Lucía, 32 años
Hallazgo

Costaba buscar productos por personaje, serie o película.

Insight

Colecciones, logos y filtros por franquicia.

¿Puedo modificar la dirección de envío? Veo que hay para iniciar sesión, pero ni siquiera me creé una cuenta.
Miguel, 41 años
Hallazgo

No sabían que al comprar se creaba una cuenta.

Insight

Avisarlo en la confirmación y por correo, con una guía.

Sería útil tener chat en vivo en todas las páginas para pedir ayuda de inmediato.
Fernanda, 29 años
Hallazgo

El chat solo estaba en la página de inicio.

Insight

Un chat disponible en todo el recorrido de compra.

Cuando busco juguetes de Paw Patrol, no quiero que los mezclen con los de otras series.
María, 8 años
[ Cambios ]

Antes y después

1. Colecciones, logos y filtros por franquicia

AntesMenú anterior con categorías generales
Se priorizaba la marca del fabricante y las categorías generales.
DespuésColecciones por película y personaje con sus logos
Colecciones de películas, series y personajes con su logo e imágenes.

2. Cuentas de usuario que se entienden

AntesMenú de cuenta anterior
Nadie sabía que tenía una cuenta ni cómo editar sus datos.
DespuésNuevo acceso con opción de crear cuenta
Aviso de la cuenta creada en la confirmación y por correo.

3. Chat en todas las páginas

AntesChat solo en la página de inicio
Chat solo en la página de inicio y poco intuitivo.
DespuésBotón flotante de chat en todas las páginas
Botón flotante en todas las páginas, chat anónimo y conexión con Messenger.
[ 04 · Resultado ]

Customer Satisfaction Score

La tienda salió al mercado y la digitalización le permitió a la marca vender más allá de su local y llegar a más países de la región. La satisfacción se midió con la misma encuesta antes y después de las iteraciones: pasó de 62.5 % a 87.5 %.

AntesCSAT antes: 62.5 %
Octubre de 2020.
DespuésCSAT después: 87.5 %
Noviembre de 2020, tras los cambios.
[ La tienda ]

El sitio terminado

Desplázate dentro de cada ventana para recorrer las páginas completas.

hbkhappystore.com
Página de inicio completa de HBK Happy Store
hbkhappystore.com/collections
Catálogo de una colección

Catálogo por colección

hbkhappystore.com/products
Ficha de producto

Ficha de producto

Inicio en celular
Inicio
Menú lateral en celular
Menú lateral
Canasta de compras en celular
Canasta
Colección de Paw Patrol en celular
Colección
Chat abierto en celular
Chat flotante
[ 05 · Próximos pasos ]

Próximos pasos y futuras mejoras

  1. 01
    Programas de fidelización.

    Un programa de lealtad o descuentos para clientes recurrentes, que impulse la recompra y la recomendación. La plataforma entregada ya deja abierta esa posibilidad.

  2. 02
    Más inversión y un catálogo más amplio.

    Para aprovechar el comercio en línea y la demanda creciente, con un plan financiero sólido que sostenga las mejoras.

  3. 03
    Pruebas continuas con usuarios.

    Usar la analítica para seguir iterando el diseño y las funciones según lo que digan los usuarios, las tendencias y la tecnología.

  4. 04
    Eventos y comunidades.

    La tienda ya organiza encuentros con niños junto a la comunidad Beyblade Fan Perú. Ese tipo de iniciativas puede crecer con nuevas tendencias y alianzas.

[ Equipo ]

Créditos

Coordinadora de proyectoMildre Castro
Product MarketerGonzalo Téllez Lazo
Logística y catálogoSandra Castro
Diseño UX/UIIván Cabrel y Claudia Suárez