B2B Ecommerce Tool

NFX: Nike Future Experience

Mobile App

NFX – Nike Future Experience is digital B2B shopping experience tool which helps customers to locate products in the Nike showroom instantly with RFID technology to create their wish lists. It also helps to reduce the longer and harder process’ of the sales team preparations for sell in.

Techniques

Lean UX, wireframing, low and high-fidelity prototyping, and usability testing

Roles

UX Researcher, Interviewer, UX Designer, UI Designer, Visual Designer, Interaction Designer, Logo Designer, UX Strategist, UX Lead

Tools

Pen and paper, OmniGraffle: Process Flow, Wireframe
Sketch App: UX / UI Design, Logo Design, Map Design, Documentation
Invision App: Rapid Prototyping
Adobe Photoshop: Visual Design
Zeplin: Engineering Handover

Insights & Discovery

Problem Statement

How can we improve our B2B future sell in process in our showroom?

Research & Discovery

As a team, we have conducted user research with a dozen of people includes customers and account executives to pinpoint the current frictions:

Account Executives

  • Where is the sample in the showroom?
  • %5 of samples are lost.
  • Checking the differentiation excel list of products to find out drop / carry over products takes so much time.
  • Is this product offered to my client?

Customers

  • Where is the sample in the showroom?
  • Is this product offered to us?
  • Can I get paper to write down my wish list of products?
  • Limited amount of sell in time in showroom to decide which product to purchase.

Solution

We decided to create a mobile app that helps to locate desired product in our showroom instantly while creating shopping lists.

Research & Evolution

Defining the Personas

To create an optimal mobile application, we had to decide the user personas that are going to use the application. From the research that we’ve conducted at the beginning of the process we decided to create an app for our customers and account executives.

User Research

To create a tool that satisfies all users need, we’ve performed various numbers of interviews and surveys with the personas. We also created cross functional team from different departments to gather effective feedback for weekly and monthly design sprints.

Purpose of the Application

From the researches and feedbacks, we defined the strategy and functionalities of the mobile application:

  • Search, filter and QR scan functionality that helps to user to find the desired product.
  • Create and export functionality for wish lists.
  • Multiple language option for all countries.
  • Product information page that includes name, code, category, gender, season, channel, sample availability, carry over and drop information.
  • Showcase functionality to put forward seasonal stories.

Process Flow & Wireframing

Challenges

Branding

Even though personas of the users are decided, one thing was certain that all of the users are Nike users; therefore application should represent the brand guidelines perfectly. To achieve this challenge, I did comprehensive research while working with our brand team on other Nike applications like NRC, NTC, SNKRS APP and NIKE.COM to create pixel perfect experience from font to the other UI components.

Onboarding

Since the app is planned to be used by only customers and inner employees, alternations for onbarding screen were needed. One of our goal was to speed up the sell in process by saving time for our users, therefore we decided to limit the log in process with only email credentials of the user that is matched with their store code in the system.

Security

Because of the future product sell in process, the application needed be accessible to only the user personas. As a result of this, we restricted the usage of the application within our company network system. In order to use the application, one must be in company and user credential should matched with the store code in the database.

Brand Guidelines

Story

Name & Visuals

Along with the company strategy, our aim was to create a digital experience; hence the application was going to be used for future season products, we decided the name the product Nike Future Experience.

In order to create futuristic onboarding for application, I worked closely with our brand team to find the right visuals. At the end, I decided to use Spring 2019 Nike Tech Pack Collection visuals to give the out of the world feeling to the users.

Future Experience

The color look of futuristic Tech Pack Collection and neo-noir science fiction movies were the key inspirations for the colors of the application. As a fan of neo-noir science fiction, my first thoughts were the neon colors; as a result of this Navy Blue and Noir Green were chosen the represent the future experience. Far Purple was chosen as a secondary neon color in case of any addition to be added to the NFX for further releases.

Navigation & Iconography

Menu Icons

It was very important to create brand way, user friendly and simple menu bar for smooth navigation through mobile app. To achieve this challenge, with the help of the process flow diagrams that I created before, I did comprehensive research on brand’s and competitor’s mobile applications.

Product Status Icons

Including product status information like sample availability, drop and carryover in product information page was essential. In order to create instant visibility to the users, designing vivid shapes and assigning color to each icon was very crucial. Therefore, I designed three icons to represent the each status.

Showcase, QR Scan, Products & Search Screens

Product Filtering

One of the biggest purposes of the application was to offer rich and to the point product filtering option to the users.

Finding Products

In order to create premium experience for finding the product in showroom, I designed new and interactive showroom map with the help of the floor plan.

Wish Lists

360° Experience

Continuous Challenges & Improvements

Developers

It is very important to come up with mutual solutions with developers in order create feasible product. In our sprints, when developers are stuck with the design handovers, designing alternative work arounds regarding to the feedbacks is the top priority.

NFX 2.0

With the feedbacks that we receive from the users, our next step is to add recommended products functionality to the product page and improve the summary section in wish list detail page with creative and branded icons.