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.
Special Thanks
I would like to thank to Taglette team for their amazing work on implementing whole design to the code while making RFID technology work both in showroom and application.