Nike By You - UX Design

OVERVIEW

Users were having a difficult time transitioning from one area (of a shoe) to another on the 3D builder.

The goal of this project was to figure out a way for users to seamlessly navigate through the mobile platform to have the best customizing and shopping experience.

The Problem

Users were having a trouble figuring out how to navigate from one area of the shoe to another making it difficult to customize.

The current interface does not make it very clear for the average user to understand how to use it.

Research

I was given a screen recording of a user who was testing the 3D builder. The task was to successfully navigate and customize six portions of the shoe: Backtab Logo, Midsole, Midsole "Air" Logo, Outsole, Base, and Dubrae.

The short (<2 min) recording displayed the user struggling to figure out a way to go in and out of different shoe components.

The age of the user is unknown.

5 things I noticed about the 3D Builder

User Testing

I had several users (age 18 to 57) test the 3D builder. They were tasked with navigating and customizing the shoe to their liking. They were not told of the problem that the Nike By You team was faced with.

I gathered common likes, dislikes, habitual interactions, and suggestions.

LIKES

- Being able to visualize the entire shoe in 3D.
- It’s clear which options have been selected when making selections.
- The builder feels naturally responsive to touch.

DISLIKES

- Changing in and out of components was confusing.
- Having to always ‘go back’ (reset) in order to customize other components.
- The labels are nowhere to be found on the shoe.

INTERACTIONS

- Taps randomly on the shoe to ‘go back’.
- Tried to “pinch” with two fingers (thumb + pointer) to ‘go back’.
- Usually takes a few seconds before realizing there’s a back button.

SUGGESTIONS

- Allow selecting other components without having to reset the view.
- Components should have a label at all times.
- The selection window needs to have an indicator to exit.

Allow selecting other components without having to reset the view.

UX: This eliminates the confusion of navigating in and out of components.

UI: Make all component buttons available even while customizing other components.

Components should have a label at all times.

UX: Labels serve as a guide to those unfamiliar with the anatomy of a shoe.

UI: Labels shown when resetting the view with the button on the top left.

The selection window needs to have an indicator to exit.

UX: An indicator would suggest an interaction/ability to drag the dialogue box down.

UI: Added a slower animation and an added carrot above the dialogue box.

Outcome

After presenting these ideas, Nike By You may consider adopting the slowed, animated window and added carrot to their 3D builder to solve their issue of users’ trouble of navigating in and out of components.

This was a fairly short collaboration that I wasn't able to see through to the end with the NBY team, but it was a great opportunity for me to learn.