Mar 2021

Inspire Sneakerheads with Matchy Outfits to Boost Engagement

Mobile Design, Feature Exploration

I introduced hand-picked head-to-toe outfits to the Hibbett app to build seamless mobile shopping for sneakerheads.
  • Role: Product Designer
  • Team: 1 PM, 1 Product Owner, Dev, and QA
Text divider

About the Client

Hibbett | City Gear is a leading athleisure and sneaker retailer with more than 1000 stores in the US with a market focus in the suburban area. They have direct partnerships with footwear brands (e.g., Nike and Adidas) and get exclusive access to their premium shoes. If you are into sneak culture, you might already have the Hibbett app on your phone and probably signed up for a few shoe raffles before.

Heady has been running as Hibbett’s mobile team for years. We maintain, revise, and innovate Hibbett’s E-Commerce app (both iOS and Android). This March, they wanted us to roll out a series of features that leveraged Stylitics, a technology that helps retailers with styling content creation.

6 product detail pages featuring with red and black Jordan shoes.
The product detail page for Hibbett Sneaker app. The app routinely drops exclusive shoes that attract sneakerheads to enter raffles (to win the right to buy an in-demand sneaker).

Big Picture

Innovate Shopping Experience to Increase Retention and Engagement

2020 was a challenging yet extraordinary year for Hibbett. They attracted many new customers to their on/offline stores and had double-digit revenue growth from both channels. In 2021, they wanted to focus on retention and new ways of engaging with existing customers — bringing styling ideas to their fingertips was one of the initiatives.

Previously, they had pioneered Stylistics onto their E-commerce website and received very positive feedback. It signaled that there is a need for getting styling ideas while customers shop. In this feature exploration, we were here to trobile experience. A key metric for defining our success would be the number of items per order.

The outfit feature on implemented by their web vendor.

User Base

Our app users are mainly sneakerheads who keep the most-hyped kicks and new drops under their radar. They possess limited edition shoes only for display purposes and like to perfect their color-matching outfit (we called them matchy-matchy sneakerheads). Another smaller group of users are fashion-forward moms who shop clothes for their kids on the app. They like to leave reviews and talk about how their kids appreciated the product of their picks and enjoy dressing up their kids in their family time.  

Design Process

At first, my PM advised me to do cross-industry research for a holistic view of styling and industry practices beyond fashion. I spent a week exploring apps and websites from different industries (such as furniture, interior design, makeup, food, wedding, and social commerce) and gathered intriguing ideas with a Miro board for future inspiration.

A wall of ideas about how furniture, interior design, makeup, food, wedding, and social commerce industries engage with users on style.
My Miro board for ideas from furniture, interior design, makeup, food, wedding, and social commerce industries. I looked for examples to address research questions like "How do services inspire user?", "How do services direct customers to products?", "How do services lead them to purchase?" and "How do services ask for user preferences?".

After moving laterally, I dived deep into our mobile shopping experience and mapped out two customer journeys (one for sneakerheads; the other for fashionable moms) highlighted with opportunities for styling-related features. These customer journey maps helped set the tone for a design jam where PMs, designers, and a QA brainstormed on styling features and produced a pool of ideas. I took those ideas and ran a design sprint while the PM, my thinking partner, provided insights about business, users, and technical assessment. We bounced ideas together during our daily check-ins and gradually brought our ideas to life.

Having explored design ideas for two weeks, I presented a solid flow for outfit exploration and potential entry points for the flow throughout the experience. Our clients were very passionate about our designs and saw new business opportunities in them. “We can beat Nike!” a person from our client said.

Customer Journeys for matchy-matchy sneakerheads and mom shoppers.
Customer Journeys for matchy-matchy sneakerheads and mom shoppers. I mapped out their intention, actions, emotions, motivations, pain points, opportunities, and approaches as a baseline for ideation sessions.
A snapshot of my sketch playground with many design ideas and iterations.
Some rough sketches from our virtual brainstorming session, We use Zoom + Miro, and the experience wasn't too bad! (Make a guest which drawing style is mine?)
A snapshot of my sketch playground with Ideas progressed from low to high fidelity.
A snapshot of my dirty sketch playground. Ideas progressed from low-fi (at the bottom) to high-fi design (at the top).

Research Process

Because the Product Detail Page was one of the most important screens to an E-commerce app, there is a risk of introducing new features on the screen (i.e., hindering customers from purchasing products). To minimize the risk, I suggested we validated our designs before implementing them straight to the production app, and our client agreed.

Feeling pumped, I put on my researcher hat and drove the unmoderated usability study. Our research goal was 1) to understand the usability of the outfit viewing flow and 2) to find the optimal placement for outfits on the Product Detail Page. We recruited 10 sneakerheads and 10 general shoppers to test our prototypes and probe their impression, expectation, level of ease of use, thinking process while they explore the feature. After that, the participants would examine 2 versions of the PDP and compared them.

It turned out — most of our participants rated highly about the outfit viewing flow due to its simplicity, ease of navigation, and inspirational content. (Their feedback was so positive that at one point, I wondered whether my research protocols were biased or misleading). With the research results, we had more clarity on the business impact of the new feature, the viability of the product vision, and the placement strategy for outfits on the Product Detail Page.

A gif showing how a participant navigated the outfit viewing experience.
A video clip that shows how a participant navigated the outfit viewing experience. The prototyped was built in Invision, and I hosted the testings on UserZoom Go.

Design Explained

Here is how I conceptualized outfits:
instead of considering each outfit as a set of clothes that would go well with a shoe ( a more common way our competitors approached), I viewed related outfits as one collection of products that complimented a shoe. Within the entire collection, users should be able to browse through items easily, pick whichever they like, and add to the bag — all in one place. A typical use case could be: a shopper finds a shoe he likes and wants to see how to pair his clothes with it. He can choose to take a quick look at pairing outfits and return to the shoe detail page.

4 screens showing how to add items in an outfit to cart with few clicks.
We guide users to make purchase actions (i.e., select size and quantity) one step at a time to keep them in the flow of exploring outfit ideas (Do I like this? Yes - add it to cart; no - scroll to the next item).
3 versions of the Product Detail Page with different outfit placements
3 versions of the Product Detail Page with different outfit placements (i.e.,  show outfits in the carousel below, with an outfit thumbnail, and itemized outfit). The user testing results pointed us to the middle option.
3 screens with entry points for viewing outfits
We also sprinkled outfits on the Homescreen with Trending Looks, on the product listing page intermingled with outfits, and on the Product Detail Page,

One Fun Story

As a designer/researcher, the greatest joy is to find new values in your design through the lens of your customers. I had a little taste of that from a participant's quote:

“I don’t think I ever experienced this type of shopping experience for shoes or outfits before. It’s really slick. I like that experience rather than I had to go to the traditional more detail page and add it to cart that way.”

If I have a magic wand...

I would want to discuss my research plan with a senior user researcher to eliminate my bias embedded in my dual role as a designer and researcher. I hope to get his/her opinion on our test flow when merging two tests into one and the best way to ask participants to compare two versions of the same feature. Writing fool-proof tasks for unmoderated studies is challenging, so as asking questions that yield great insights. A book I just came across might help me do better next time (it's Product Research Rules by C. Todd Lombardo and Aras Bilgen), and I can't wait to dig in!

A gif of a user lost in the app prototype.
There's nothing more exhausting for a researcher/designer to watch participants got confused or lost in prototypes and do nothing. You  can feel their frustration. It's terrible!

Why This Project?

What I particularly loved about this project is its process: we ran a complete design cycle starting with exploration, brainstorming, iterations, validation, to revision. For an agency, it was rare to have the resource to diverge and converge multiple times for developing features. I have been evangelizing about user research many times to our other clients, but there was very little I could change how they work. But this time is different. It set a small milestone for me: driving the design process from conception to completion and delivered truly unique features backed by research.

I’m curious to see how our competitors react to the new features or this kind of mobile shopping. If you are struggled with shopping for matching clothes like some of our users do, please check out the Hibbett app on App Store or Google Play and let me know how you think!

Grab some tea together?
Hit me up (Linkedin)

More Projects

Jun - Aug 2020
My Lawn 2.0
Oct - Nov 2020
My Garden 2.0