SNKRS App

Transforming Nike’s SNKRS app into what users really wanted: a safe place to score sneakers and show them off.

This project and the content presented here was for a student project and educational purposes only.
I am not affiliated with Nike.

Project context

Timeline: Completed within 3 weeks on a team of 5.

The Brief: Nike wants to add social interaction features to the current SNKRS app.

Responsibilities

Project Manager

User Research

UX Design

UI Design + Interactions

Tools used

Figma + Figjam

Google Apps

Project context

Timeline: Completed within 3 weeks on a team of 5.

The Brief: Nike wants to add social interaction features to the current SNKRS app.

Responsibilities

Project Manager

User Research

UX Design

UI Design + Interactions

Tools used

Figma + Figjam

Google Apps

The Goal

Create a way for users to connect within an existing app by:

  • Adding value between shoe drops
  • Guarding against bot creation to increase trust
  • Giving space for sneakerheads to discuss their love for sneakers

The Goal

Create a way for users to connect within an existing app by:

  • Adding value between shoe drops
  • Guarding against bot creation to increase trust
  • Giving space for sneakerheads to discuss their love for sneakers

As a result of my user research on this project I learned…

The initial goal of this product was to create a social media feature for the SNKRS app. User interviews uncovered a common pain point that I was able to address in my design, which brought security and trust to app users.

Keep Reading for In-depth Case Study

How might we create a platform that connects users on the SNKRS app and brings them value even between shoe drops?

Project Manager

From the start, I wanted to keep my team on task. I set up a modified SCRUM board. This document also included a list of our files and strategy documents, which helped us stay organized.

The biggest benefit of this strategy was visually seeing the tasks that needed to be done, what was currently being worked on, or what had been completed between our meeting times.

As the project manager, I helped to schedule and facilitate our group meetings. These meetings included brief “stand-up” type updates to get a sense of what we worked on since our last meeting and what we would focus on moving forward.

Project Manager

From the start, I wanted to keep my team on task. I set up a modified SCRUM board. This document also included a list of our files and strategy documents, which helped us stay organized.

The biggest benefit of this strategy was visually seeing the tasks that needed to be done, what was currently being worked on, or what had been completed between our meeting times.

As the project manager, I helped to schedule and facilitate our group meetings. These meetings included brief “stand-up” type updates to get a sense of what we worked on since our last meeting and what we would focus on moving forward.

User Research

Our secondary research showed us…

  • Users generally only open the app to prepare for a shoe drop (days leading up to release)
  • Forums on other platforms already exist for sneakerheads to discuss  (Reddit/Instagram/Tiktok)
  • Currently the app only broadcasts content from Nike, but it does occasionally highlight user posts from Instagram 

We conducted a survey and scheduled interviews to get a better understanding of the pain points for users…

Our UX Researcher created a survey that collected 26 responses. I moderated 2 of our 5 in-person user interviews. Our questions aimed to learn about our users, their current habits on the SNKRS app, and their interest in using a social feature within the app. 

I built an affinity map that collected all of our findings in categories…

My affinity map is where I began to fully understand that there was a shared pain point that was not part of my team’s initial goal of adding social features to the app.

The top findings were…

54% started their sneakerhead journey within the last 3-5 years

46% have loved sneakers since childhood

57% mentioned concerns about bots buying shoes before real users had the chance

43% did not mention this

46% did not think they would use a social feature

33% suggested that they might post photos of their outfits with their Nike sneakers

21% said they would promote information about the sneakers that are being sold

54% started their sneakerhead journey within the last 3-5 years

46% have loved sneakers since childhood

57% mentioned concerns about bots buying shoes before real users had the chance

43% did not mention this

46% did not think they would use a social feature

33% suggested that they might post photos of their outfits with their Nike sneakers

21% said they would promote information about the sneakers that are being sold

Value of social connection between shoe drops…

Because our data showed that almost half of users would not use a social feature, we explored as a team what it would mean to share content on the app and bring value to those users as well as those who already want it.

  • Where would user content show up? A separate page or mixed with content from Nike?
  • What would change about the home feed as a result? Would users be able to comment and interact with user content as well as Nike content?
  • What type of content would users post?
  • What interactions would they be looking to have with other users? Would direct messages show up on the current inbox page?

Users suggested that they might share photos of their outfits with their Nike sneakers. This type of comment is what we geared our designs toward. We also decided that user content would mix with Nike content on the home feed. Users would be able to comment and react to all types of content—whether it be from another user or from Nike. 

Bot prevention for shoe drops…

Even though this was not part of our initial goals, bot prevention became priority number 2, after social interaction, in our list of features because of how frequently it was mentioned in our interviews.

I initiated a conversation about bot protection and, as a team, we explored the idea of a picture lock that a user would use to sign in or verify their identity periodically. This idea turned into the picture combination lock that we ended up going with. It gives one more layer of protection and also creates an engaging moment with the user because the photos are of Nike sneakers.

This extra layer of protection would fold into a user’s profile setup.

Our User Flow

Below is our full user flow, created by our UX Researcher, which helped us organize our ideas. Our user flow outlined the login process, adding a shoe to a user’s profile, and interacting with other users on the app.

I focused on the profile creation section of our user flow.

From this point, each of us broke off to create individual designs. My designs are not as relative to the social feature, but I designed a solution to build trust and guard against bot protection.

Low-Fidelity

My Wireframes…

The profile creation flow which included:

  • A modal to prompt profile completion
  • Carousel to complete steps for profile
  • Unique photo combination lock (our idea to guard against bot creation on the app)
To create my wireframes, I looked at the current SNKRS app, other apps that I use daily, and social media apps. This step guided me in choosing how much information to include on each screen, where to position the buttons in my design, and how to pace the steps in the process as a whole.
My goal was to seamlessly guide the user through the profile creation process. 
I used simple shapes in greyscale and a little hierarchy to block out my design. My low-fidelity wireframes helped me stay focused on the function before the form. 

Due to time constraints, we were unable to conduct user testing on low- or mid-fidelity designs. We used our best design sense as we moved to high-fidelity, matching the existing app design conventions when possible.

High-Fidelity

During the high-fidelity phase, I worked on fleshing out the low-fidelity wireframes that I created. I continued to reference the app profile creation screen recordings I had taken in the low-fidelity stage as inspiration for the visual design of these screens.

While I worked, I made sure to pull from the style guide, the existing app design conventions, and from any crossover screens that my teammates were designing. This helped my screens work seamlessly with the existing app. The home feed, profile screens, sneaker tips, and discover screens in my flow were designed by three other members of my team. 

Iterations of Bot Protection Combination Lock

I conducted 3 usability tests on my design to test whether my design aligned with the user’s expectations and what problem areas existed.

My iterations on the combination lock: I wanted users to understand the significance of the combination and how to scroll through the combination images. But it took a few different changes before I got it right.

  1. In my first round of usability testing, the user skipped right through the step without creating a combination. 
  2. I then added arrows and a message about the purpose of this step. In my third round, the user tried using the arrow buttons instead of scrolling through the images, but I had initially accounted only for scrolling. 
  3. For my third iteration, I added a greyed-out image and a message instructing the user to scroll to create their unique combination.

 I was able to iterate until I got it right and gave the user multiple ways to complete the task.

The rest of my team built out the screens for user profiles, shoe verification, following other users, and the home screen with user comments and interactions.

The Final Product

At this stage, we combined our designs onto one page and renamed files as needed for the development handoff phase. This part of the process was tedious but was a good reminder to stay organized along the way. In the end, we created 6 flows that rounded out the new social interaction feature on the SNKRS app.

Our final product aligns with our initial goals while also addressing the concerns we found along the way. 

  • Users can create a profile that has multiple layers of protection against bot creation.
  • Their profile allows them to post content and showcase their shoes as well as follow and react to other user content.
  • Our design works seamlessly with the existing SNKRS app.

Want to try it out for yourself?

What I learned...

  1. Stay Focused! Our file management system helped us stay focused and organized. I liked having a central place where we could come back to and stay up-to-date as a team. There were a couple of times that we did a little bit of scope creep, but I drew us back to our project brief to get us back on track.
  2. Wireframing and testing are important. Due to our time constraints, we moved straight to high-fidelity from our wireframe stage. It would have been beneficial to talk as a team about our wireframes and test them before we moved into the high-fidelity phase.
  3. Create components together. There were times we had to merge two ideas or scrap one entirely if someone else had made a similar component. Next time I would like to have one team member create our main components so that we are all building off of the same framework.
  4. Remember to leave time and space for iterations in high-fidelity. Because we jumped from low- to high-fidelity, I got attached to my design in the high-fidelity phase and began to lose sight of the changes that could be made. I was reminded that these designs are iterations that will help me get to the best possible outcome.