Nike E-commerce Redesign

UX/UI Case Study

Design Role: UX/UI, UX Research, Visual Design

Deliverables: User Research, Wireframes, Prototyping 

Software: Adobe XD,  Adobe CS

Challenge:

After investigating Nike’s dashboard and identifying usability issues that impeded the overall shopping experience, I discovered three main problems.

  • Too much initial information
  • Too many navigation sub-levels to get to main product page
  • Lots of vertical scrolling

Goal: 

Redesign the main mobile shopping and product page of a popular clothing and shoe brand.

Fast feedback, attractive product presentation, easy user flow and other important aspects can directly affect increasing profits for the business involved in e-commerce. Designers and cross-functional teams can work together to benefit the brand and target user. 

  • Effective use of visual elements and hierarchy
  • Minimize vertical scrolling/ navigation friction
  • Utilize design patterns for easy user flow

Process:

It’s important to understand that selling goods from a website or mobile application is about having a user get from A to B. Growing profits is a direct result of user retention. The objective is clear: Get people to reach the e-commerce platform and buy items on it. These are the four principals of the app.

  • Utility: helps users buy things/services they need
  • Usability: clear and easy customer journey. Minimize frustration.
  • Accessibility: access to products and info. Minimize sub-levels.
  • Desirability: App is immersive in look and feel making an enjoyable experience.

User Testing & Feedback: 

I used a small test group to determine pain points in the Nike app to discover what needed improvement. Here’s what they shared.

  • Users wanted ability to access shopping cart at all times from any product page.
  • Users got frustrated with too much information or vertical scrolling. They felt that it impeded their ability to focus on one thing as it was distracting.

Visual Design:

After finalizing the information architecture and visual layout, I moved into creating a style guide that incorporated a clean, modern approach while adding subtle gradients that are on trend. 

  • Interface that provides guidance & support in decision making
  • Reduce complexity
  • Dynamic color change for product color selection
  • Reduce friction between navigation & customization
  • Bold headers for readability