Project 1

Nike App UI Refresh

Product Design

Overview

The Nike App is a personalized mobile application designed to allow customers to be able to shop online with ease, explore new products, read up on new blogs, and allow for a seamless in-store shopping experience. As a Nike Athlete and cashier for the last two summers, I was able to gain valuable user research insights from interacting with my consumers that helped me design a UI that improve accessibility for customers of all ages.

Timeline

6 Weeks

Tools

Figma

Photoshop

Team

Solo Project

User Research

I personally assisted customers through the process of both downloading the Nike app as well as onboarding steps including account creation. As customers were guided, I prompted them with a question. Before letting customers leave the store, I would always make sure to ask the following:

“Do you feel comfortable navigating the app on your own?”
“If not, what made the navigation challenging”

Key Insights

• Buttons lack intuitive functionality when customers are connecting with their Nike cashier (often mistakenly click the scan button to get to the Nike Pass)
‍
• Minimal engagement between Interests and Following Sections (could be more personalized)

• Lack of consistency in visual language of tool icons between the in-store mode and profile page resulting in additional user confusion.

• “New from Nike” tab disconnects Recommended Products from products related to tags of interest (group content together for a more natural user flow)
‍

Action Statement

How might we simplify in-app navigation while catering to user interests in order to improve the overall shopping experience for all Nike app users?

Early Wireframing

1. Information was poorly listed and organized resulting in customers often asking what purpose the app served in their shopping experience (new version implements a bulleted list of the app's top features)
‍
2. Text overlayed on image can create slight visual tension (new version divides text and image more strictly to improve readability for users)

Home Page

1. Address was confusing and users would frequently ask us what kind of a Nike store they were at (new version has location type specified and address fully typed out)

2. Open button had accessibility issues (new version adds a white fill to the button to improve contrast and visibility)

3. Unclear how products are recommended (new version connects recommended products to interests)

4. Favorites and bag cluttered the navigation bar for a small feature (new version relocated the bag to group with the corner search and favorites to the profile to increase personalized feel and purpose of profile page)

5. Shop icon is confusing as a search icon already exists on the home screen (new version implements a shopping cart icon and an events tab to the navigation bar)

Profile Page

1. Edit profile button is bold and high in the visual hierarchy despite most users looking for the orders or Nike pass (new version reduces contrast on the edit profile to help ease the user flow)
‍
2. Orders are difficult to find, pass is named differently elsewhere, and events are difficult to find in profile (new version shifts orders with inbox, specifies pass icon and type, shifts rewards with favorites adding a giftbox to rewards to motivate users to click)
‍
3. Users don't remember following anyone or anything (new version adjusts the language to fit onboarding question which asked about user interests)

Orders Page

1. Title feels impersonal and does not match the language of the rest of the app (new version adjusts language to match language of the rest of the app and improve unity)
‍
2. Orders are listed out item by item making navigation feel complex and cluttered (new version chronologically organizes by order and users can click into orders to view all items within the order; "buy again" removed until user clicks into deeper view.

3. Lines are not consistent visually with other parts of the app (new version extends lines to match visual language)

Icon Set (18 total)

While redesigning many of the Nike app's UI, there were several icons in the current app that felt out of place. Namely, the shop icon in the navigation bar felt out of place and confusing especially given that there was already a search icon at the top of the screen for searching for products. Because of this, I ultimately found myself redesigning several as well as adding a few of my own. Overall, I attempted to maintain a consistent visual language across my icon set using mostly organic forms (circles and rounded corners).