A feature that allows sneakerheads the chance to enter and win highly-anticipated sneaker releases on the app.
__

The Brief

Getting highly-anticipated sneaker releases from Foot Locker banners previously required users to pick up their item from a physical store once they won a reservation. However, a large portion of these releases occurred in only a few main cities and there was a limited amount available to win. Looking to make winning convenient and fair for its customers, Foot Locker wanted to add another way to win drops.

The task was to add the ability to participate in reservation drawings online with the product shipped directly to the customer if they won. We added this option to the existing app reservation experience (with a few small tweaks along the way), with an initial roll out to North American banners.

Client:
Foot Locker Inc. Banners (Foot Locker, Kids Foot Locker, Champs, Footaction, Eastbay)

Role:
UX Designer

Team:
Product Owner, UX Designer, UX Content Writer, UI Designer, Development Teams

Deliverables:
User flows, Wireframes, Testing Prototypes

Project Goals:

• Expand the current offerings of ways to win sneaker launches on the app

• Communicate the new of ways of winning effectively to the user

• Allow for banners without physical stores to participate in big releases

• Simplify the entry process where possible so that it’s quick to complete and easy to understand

• Level out playing field to get drops in the hands of real buyers instead of bots, while also allowing users not located near the popular launch cities the chance to win

• Increase the convenience of launch reservation entries

Research:

A quick competitive was completed to kick off this project to get an idea of what is happening in the market for sneaker launches. The research team looked primarily at language used and the overall process of entering raffles for hype sneakers.

The biggest takeaway was that the term “reservations” was not often used. This aligned with a recent benchmark survey for the launch process which had mentioned this term was confusing to some users.

User Flows and How to Incorporate Online Entries

I created a few flows to explore ways on how to best incorporate an online entry into the existing experience. Up to this point, payment was handled in stores at the time of item pickup. We needed to consider how and when to prompt the user to provide their payment and address details when the online option was selected.

Ultimately, we integrated the user’s saved payment and address settings into the flow. Upon being selected as a winner for “ship to me” — the new online option — their preferred payment method from their account would be automatically charged and the item sent to their default shipping address, arriving in a few business days.

Wireframes:

Once we figured out how we would incorporate the online option, I sketched out some ideas and then created a few wireframe concepts to present to stakeholders.

Considerations for the conceptual explorations:

• What is the best approach to selecting the entry options — should it be an opt in selection, checkmarks or something else?

• Amount of information to display within a screen — should we show everything up front or break the process down into different pages?

• How can we create a seamless and easy flow when introducing payment methods and addresses?

Solutions

Out of the concepts, the checkmark version aligned best with timing and available resources.

The end approach:

• Grouped information into steps to help guide the user through the process.

• Used checkmarks for selecting entry options so that it’s clear that the user is able to select one or both option/s.

• Once an account has been set up, the user’s defaults will be pulled in for a seamless and quick way to enter upon selecting “ship to me.”

• Used the app’s “Default” labels for addresses/payment methods to support the connection to the user’s account information.

• Leveraged established address and payment bottom sheets used throughout app to maintain app holistic consistency.

• Added badges to indicate the entry status throughout the app (badges will be shown on the release product cards as well as on the product detail pages).

• Removed the disabled name field and the country call out since there weren’t necessary.

Improvements to the product page

There were a few additional enhancements tom the product page were made as well during this project:

• Relocated the search bar to be adjacent to the results to create a stronger connection. Additional improvements for viewing store availability are in progress currently.

• A sticky entry CTA was added to the page to provide more emphasis to entering the sneaker drawing as well as align with other product detail pages within the app.

• Redesigned the Head Start component portion to help visually simplify the page.

• Overall improved the page layout and hierarchy.

Final Deliverable

Different scenarios and states were built out that were needed to account for all the possible outcomes.

Wires were handed off the UI team at this point where we worked closely to complete the project with the team of developers.

An interactive Axure prototype from a copy user test that was completed can be viewed here.