[ Case 05 ]
ProductUX Engineering

HBK Happy Store

When the pandemic closed its store in Lima, we took it to an online shop built to sell in Peru and across the region, and refined it through tests with parents and kids.

ClientHBK Happy Store
Based inLima and Miami
Year2020
StagesMar - Jun and Oct - Nov
My roleProduct Marketer
HBK Happy Store online shop home page
10participants in two test rounds: 6 parents and 4 kids
3product changes that came out of the findings
87.5 %satisfaction after the changes, up from 62.5% in the first test
[ 01 · Context ]

An imported toy store with no digital channel

HBK Happy Store was born in 2018 as a kids' store in Lima, founded by Mildre and Sandra Castro, with toys, clothing and accessories from US brands.

[ 02 · Business problem ]

No store and no online shop

In 2020 the health crisis closed the store and the brand had no online presence. Inventory, orders and sales tracking didn't scale either. It needed a channel that could sell and grow beyond Lima.

Toys from many brands and franchises
[ 03 · What we did ]

Launch, test and adjust

I worked with the founders and two UX/UI designers. My role was product marketer: research, positioning, testing and prioritizing the changes.

  1. 01
    We researched the market on a small budget.

    Observation and analysis of competitors and references, and two segments: the parents who buy and the kids who choose.

  2. 02
    We defined the brand and the catalog.

    Logo, colors and an information architecture built around the catalog and the store's positioning.

  3. 03
    We tested before launching.

    Interactive prototypes for the founders and two rounds of usability tests with real shopping tasks and a satisfaction survey.

  4. 04
    We turned findings into changes.

    Collections by franchise, a clear notice about the account created at checkout, and a floating chat on every page, connected to Messenger.

[ Research ]

References and two audiences

Tai LoyCarambaMattelToys R UsLego

Using the business background, we separated those who make the purchase decision from those who influence it, and that shaped the personas and the empathy map.

Segmentation: adults who decide the purchase and kids who influence it
HBK Happy Store empathy map
Empathy map. Open it to read it in full.
[ Brand and catalog ]

A brand that smiles, a catalog by character

HBK Happy Store logo
Logo
Hind typeface in three weights
Typography
Palette: yellow #FFDC00, pink #FF395F, turquoise #00BFAC
Colors

The logo uses a legible typeface with a distortion that draws a smile, and the colors are associated with play. The sitemap was refined over several rounds, crossing catalog, positioning and the way people search.

Store sitemap
Information architecture.
[ Testing ]

Ten people, real shopping tasks

Remote, moderated sessions of about 30 minutes, with incentives of up to S/ 100. Using the high-fidelity prototype, they had to find a toy, filter by age and category, add it to the cart and pay, thinking out loud. At the end they rated their satisfaction from 1 to 5.

Interactive store prototype
Interactive prototype of the purchase flow.
Testing the prototype on mobile
Remote session with a participant
Participants during a session
[ Findings ]

What they said

I'd love to see the Frozen logo! I see the Disney one, but a lot of things are mixed together here.
Lucía, 32
Finding

Searching for products by character, series or movie was hard.

Insight

Collections, logos and filters by franchise.

Can I change the shipping address? I see there's a sign-in option, but I never even created an account.
Miguel, 41
Finding

They didn't know an account was created when they bought.

Insight

Say so in the confirmation and by email, with a guide.

It would help to have live chat on every page to get help right away.
Fernanda, 29
Finding

The chat was only on the home page.

Insight

A chat available throughout the purchase journey.

When I look for Paw Patrol toys, I don't want them mixed with other shows.
María, 8
[ Changes ]

Before and after

1. Collections, logos and filters by franchise

BeforePrevious menu with general categories
The manufacturer's brand and general categories came first.
AfterCollections by movie and character with their logos
Collections of movies, series and characters with their logo and images.

2. User accounts that make sense

BeforePrevious account menu
Nobody knew they had an account or how to edit their details.
AfterNew sign-in with the option to create an account
Notice of the created account in the confirmation and by email.

3. Chat on every page

BeforeChat only on the home page
Chat only on the home page and not very intuitive.
AfterFloating chat button on every page
Floating button on every page, anonymous chat and Messenger connection.
[ 04 · Result ]

Customer Satisfaction Score

The store went live, and going digital let the brand sell beyond its physical store and reach more countries in the region. Satisfaction was measured with the same survey before and after the iterations: it went from 62.5% to 87.5%.

BeforeCSAT before: 62.5%
October 2020.
AfterCSAT after: 87.5%
November 2020, after the changes.
[ The store ]

The finished site

Scroll inside each window to go through the full pages.

hbkhappystore.com
Full HBK Happy Store home page
hbkhappystore.com/collections
Collection catalog

Catalog by collection

hbkhappystore.com/products
Product page

Product page

Home on mobile
Home
Side menu on mobile
Side menu
Shopping cart on mobile
Cart
Paw Patrol collection on mobile
Collection
Open chat on mobile
Floating chat
[ 05 · Next steps ]

Next steps and future improvements

  1. 01
    Loyalty programs.

    A loyalty or discount program for returning customers to drive repeat purchases and referrals. The delivered platform already leaves that door open.

  2. 02
    More investment and a wider catalog.

    To make the most of e-commerce and growing demand, with a solid financial plan to support the improvements.

  3. 03
    Ongoing user testing.

    Use analytics to keep iterating on design and features based on what users say, trends and technology.

  4. 04
    Events and communities.

    The store already hosts meetups for kids with the Beyblade Fan Perú community. Initiatives like that can grow with new trends and partnerships.

[ Team ]

Credits

Project coordinatorMildre Castro
Product MarketerGonzalo Téllez Lazo
Logistics and catalogSandra Castro
UX/UI designIván Cabrel and Claudia Suárez