Retrospective — Nike+ Check App

With an overwhelming amount of merchandise in-store, an opportunity for an iOS app was discovered to help any level of athlete find product information simply and efficiently.

Nike+ Check

Introduction:

My Role:

Visual Designer + Researcher on a team of 3.

Brand background:

Nike fosters a culture of invention and strives to build deep personal connections with consumers. Nike does this by delivering an integrated marketplace with compelling retail experiences.

Mission Statement

Nike’s mission statement really inspired us throughout our design process. The idea of accessibility to all body types and levels of athletic ability was something we kept in mind from beginning to end.

Our Approach:

Project Timeline:

Preliminary Research:

Nike currently has a few apps, we took a look at SNKRS and Nike Tech Book — both were designed to help shoppers outside of the store via look-books, release dates etc. We found that every Nike app was linked through a customer’s Nike+ account, so we kept that in mind while designing.

We also took a look at Lululemon’s website and found that they had a “favorites” list and an “inspiration” section that featured athletes and their stories and suggestions.

Contextual Inquiry:

We headed over to both the Nike Run store in Flatiron NYC & the Niketown flagship store on 57th St. to do some contextual research of the stores in action.

Niketown Flagship store
Niketown Flagship store

What we found was:

  • Nike provides an immersive store experience in a high-tech futuristic environment.
  • Sales associates are friendly, knowledgeable and proactive in helping customers find items throughout the store.
  • Niketown flagship store is currently testing an in-store app that is projected on a large screen. However, the large screen is only being tested on one floor at a time and only sales associates have access to the the mobile version.

Competitors:

We researched a variety of competitors, both directly competing against Nike and comparatively competing.

Nike Competitors

Some of the most interesting things we discovered were that Lululemon had an in-store scanning feature that allowed any customer to walk into the retail location, scan an item and find out information about it instantly. This piqued our interest, and we aimed to discover whether Nike could implement this as well.

While looking at Lookbook.nu we found that they featured outfit ideas posted by users, but it was the annotation of those outfits we found both aesthetically pleasing and informative.

Lookbook.nu

We mapped out three competitor user flows for Rent The Runway, Lookbook.nu and Lululemon based on the 3 flows we were focusing on for our app:

Product Discovery | Account Registration | Reviews & Availability

Rent The Runway
Lookbook.nu
Lululemon

Rent The Runway had the easiest way to check availability while Lookbook had the easiest account setup.

We found that Lookbook was also the most “delightful” and their aesthetic closely matched Nike’s (clean, simple, uncluttered).

We then performed a Heuristic evaluation on our three main competitors to narrow down which brands stood out in various categories:

Heuristic Evaluation

User Interviews:

In order to narrow down the users we wanted to interview, our first step was to send out a survey. After 45 responses we were able to select 15 interviewees.

Screening Survey

We interviewed a range of people with varying levels of knowledge regarding athletic wear.

Some of our biggest takeaways were:

  • Although our users expressed that they usually perform research on their athletic purchases beforehand, they still need to go into the store to check quality, feel & functionality.
  • Most users did not like asking for sales assistance unless it was for a specific produt.
  • Their main frustrations were store congestion and time spent in store.

Affinity Mapping:

We used a process called “Affinity Mapping” to gather all of the insights from our interviews and look for emerging trends.

Affinity Mapping

The biggest trends we came away with were:

  • Although our users varied in their knowledge of athletic wear, most seemed to fall within the medium range.
  • Users were not into sharing their purchases on social media.
  • About 75% of users would open up Google on their iPhones to check product information in-store to avoid asking for help.
  • Many users felt they were more knowledgeable than the sales staff.

Personas:

Through interviews & affinity mapping we developed the three personas that we would be designing for.

PRIMARY PERSONA
SECONDARY PERSONA
TERTIARY PERSONA

We created a storyboard to show Iman’s journey in the Nike store and why Iman chooses to open up the Nike+ Check App.

Storyboard- Iman

Design:

Feature Prioritization:

The first step in our design process was to use a method called MoSCoW to narrow down which features MUST, SHOULD, COULD and WON’T be included in our design.

MoSCoW Method

Below are the features we settled on and why we chose them.

Must-Have Features

Early on in the process we settled on using an iOS interface because 100% of our users were already accustomed to it and it would be an easy transition. Below are the aspects of Apple’s HIG (Human Interface Guidelines) that we used:

HIG Guidelines

Design Studio:

After deciding on a platform and settling on our main features, we used a method called Design Studio to quickly sketch out what we thought the app should look like.

Design Studio
Initial Sketches
Initial Sketches

App Map:

We then created an App Map to show how everything would flow:

Our next step was to digitize our sketches into low-medium fidelity prototypes and begin testing them on users.

Usability Testing:

We tested both medium and high fidelity on 4–5 users for each round which led to design iterations for each design, eventually leading to our final prototype.

Design Iterations Part One:

Design Iterations Part Two:

The biggest issue we tried to solve was the user problems with “Styled By Nike”. Our testers kept confusing it with an ad, and when they did make it over to the page they wanted every number to be clickable — we made all of these changes, but would still want to do more testing with our final design to make sure that the feature works properly.

Another issue we ran into was the spacing of our navigation and other buttons. Users were having a hard time clicking on what they wanted to, and we solved that issue easily but it was something we will take into consideration moving forward.

Nike+ Check User Flow

After all of our iterations we came up with our final prototype and final user flow based on our main persona, Iman’s journey through the store.

Nike+ Check User Flow

Prototype:

Click here to to watch a video of our final prototype!

Next Steps:

Should this project continue we’d like to continue testing and we have other features we’d love to implement such as a community & Nike sponsored events near you.

We’d also like to develop the app for Android. Lastly, we’d like to keep iterating on “Styled By Nike”. We found that our users were pleasantly surprised with this feature so we’d like to make it as seamless as possible.

Personal Growth:

This was by far my favorite project to date! Our entire team was passionate, talented and truly focused on creating the best possible solutions for Nike. We all grew throughout this process and discussed and iterated until we were all on the same page. Overall this was a wonderful experience and I came out a stronger UX designer because of it.