Nike
Equipment
Builder
Consumer Experience
About Nike
Nike, founded in 1964 by Bill Bowerman and Phil Knight, is a global leader in athletic gear. Known for its “Swoosh” logo and “Just Do It” slogan, Nike has revolutionized sportswear with innovative products and endorsements from athletes like Michael Jordan.
The brand empowers athletes by offering customizable sports equipment, including gloves, chest protectors, and leg guards, designed to enhance performance. Beyond sports, Nike has become a major influence in streetwear and pop culture, continuously shaping the athletic and fashion landscape worldwide.
The brand empowers athletes by offering customizable sports equipment, including gloves, chest protectors, and leg guards, designed to enhance performance. Beyond sports, Nike has become a major influence in streetwear and pop culture, continuously shaping the athletic and fashion landscape worldwide.
Problem Statement
Nike needs a responsive mobile and web application, “Nike Equipment Builder,” that allows athletes to customize gear like gloves, chest protectors, and leg guards. The app should support both individual and team customizations, enabling personalized designs. It will also streamline Nike’s product customization process, improving efficiency and the overall user experience.
My Role
I led the complete design process for the Nike Equipment Builder app, which included research,UX design, UI design, design system creation, presentations, and handoff, all within a tight 3-month deadline. Throughout the project, I collaborated closely with Nike’s administration team, helping them visualize, refine, and enhance the application’s features.
My Approach
Here’s the step-by-step UX process I followed for this project. For me, design is not just the end goal—ensuring a successful handoff to Nike and seeing the design realized in the final product is equally important. I remained deeply involved throughout the development phase, providing ongoing support to the development team. Even when they faced challenges, I guided them to stay true to the design, ensuring the final product met the intended vision and achieved the desired outcome.
Research & Discovery
The first step was to immerse myself in understanding Nike’s audience and objectives. I began by conducting extensive user research. This involved interviewing potential users, such as high school athletes, college players, and even professional athletes. The goal was to gather insights into how they shop for and customize their gear, their pain points with current platforms, and their expectations from a Nike customization app.
In addition to user interviews, I performed surveys to collect quantitative data on user preferences. I also conducted a competitive analysis of Nike’s key competitors like Under Armour and Adidas, analyzing their online customization tools. This helped identify strengths and weaknesses in the industry and opportunities for Nike to stand out with its web-based app.
In addition to user interviews, I performed surveys to collect quantitative data on user preferences. I also conducted a competitive analysis of Nike’s key competitors like Under Armour and Adidas, analyzing their online customization tools. This helped identify strengths and weaknesses in the industry and opportunities for Nike to stand out with its web-based app.
Discoveries From Research
Research highlights a market opportunity for Nike to expand its reach, with findings documented in Dovetail. Below are some key insights.
- Few market players offer customization, and options are highly limited.
- Customizing gear is often very expensive.
- Creating identical designs for team gear is challenging.
- Once an order is placed, customization cannot be edited or reviewed.
- The design editor is difficult to understand and not user-friendly.
- High schools and colleges hosting baseball and football seek easy customization tools.
User Personas & Scenarios
Understanding users, user behavior and usage patterns is crucial for this project. To achieve this, I created a set of user personas that define key aspects and guide the design process.
John Williams
Age:28
Occupation:Professional Baseball Player
Location: New York, USA
Tech Savviness: High
#1
Goals
- Customize athletic gear for personal use and team events.
- Ensure comfort and performance through tailored equipment.
- Access gear customization easily and quickly, during off-season or training
- Stay ahead of the competition with personalized, high-quality products
Frustrations
- Limited options for customizing gear from traditional sports retailers.
- The customization process is often time-consuming and inefficient.
- Hard to coordinate with team managers for group orders or uniform customization.
Needs
- A streamlined, easy-to-use app that enables quick gear customization.
- A platform that supports individual and team-level customization for uniformity. Mobile access to modify and view designs on-the-go.
Technology
- Uses a smartphone (iOS) and laptop (Mac) for work and personal use.
- Prefers mobile apps for convenience and speed.
Scenario
John is preparing for an off-season training camp and needs customized gloves and chest protectors for better performance. He opens the Nike Equipment Builder app on his smartphone to easily customize and order the gear. He selects his team colors, adds personal touches, and places the order for quick delivery. The app’s seamless interface allows him to visualize the final product and confidently make a purchase.
Expected Outcome: John receives his custom gear in time for training, ready to perform at his best.
Expected Outcome: John receives his custom gear in time for training, ready to perform at his best.
Sarah Thompson
Age: 35
Occupation: High School Softball Coach
Location: Chicago, USA
Tech Savviness: Moderate
#2
Goals
- Order customized gear for an entire team of players, ensuring uniformity in look and performance.
- Stay within budget while providing high-quality, customized gear for athletes.
- Easily coordinate team orders and customize multiple pieces of equipment (gloves, chest protectors, etc.) in one place.
Frustrations
- Difficulty tracking team gear orders and meeting players’ preferences.
- Limited flexibility in changing team designs after orders.
- Time-consuming to communicate individual player needs to suppliers.
Needs
- A tool to manage and customize team orders.
- Clear visibility of customization options for different players within the team.
- Seamless order tracking and the ability to make last-minute changes.
Technology
- Regularly uses a laptop (Windows) and a smartphone (Android) for coaching, planning, and managing team logistics.
- Prefers web applications for detailed planning but uses mobile for quick access during practice.
Scenario
Sarah, the coach of a high school softball team, needs to order customized gear for her players. She uses the Nike Equipment Builder web app to create designs for gloves, chest protectors, and leg guards for her whole team. She customizes each player’s gear based on their individual preferences while maintaining the team’s colors and logo. The app allows her to track the entire order process and make adjustments as needed.
Expected Outcome: Sarah places an order for the entire team with ease, ensuring each player receives their custom gear on time.
Expected Outcome: Sarah places an order for the entire team with ease, ensuring each player receives their custom gear on time.
Mark Davis
Age:40
Occupation: Accountant
Location: New York, USA
Tech Savviness: Moderate
#3
Goals
- Purchase customized athletic gear for child’s youth sports team.
- Ensure child’s gear is comfortable, functional, and unique.
- Easily browse and select customization options without feeling overwhelmed.
Frustrations
- Struggles to find personalized, affordable gear for youth sports.
- Overwhelmed by too many customization choices or unclear guidance.
- Cannot preview gear appearance before purchasing after customization.
Needs
- A user-friendly app with simple, intuitive steps to customize youth gear.
- Options to easily compare designs and visualize the final product.
- Clear pricing and customization limits for each product.
Technology
- Frequently uses a smartphone (iPhone) for personal and family needs.
- Prefers mobile apps for shopping and making quick decisions.
Scenario
Mark needs to purchase personalized gloves for his son, who is playing on a local baseball team. He browses the Nike Equipment Builder app and selects a pair of gloves to customize. He picks the team colors, adds his son’s initials, and visualizes the final product. The app offers an intuitive, simple process for Mark, allowing him to make a quick decision and purchase the gear for his son.
Expected Outcome: Mark orders the customized gloves effortlessly and his son receives the gear in time for the upcoming game.
Expected Outcome: Mark orders the customized gloves effortlessly and his son receives the gear in time for the upcoming game.
Information Architecture
The next step was to build the app’s information architecture (IA), ensuring users could easily find products, navigate customization options, and submit designs to Nike. I organized the structure logically, categorizing products by sport, type, and customization features for a seamless experience.
Wireframing
After setting the IA, I created low-fidelity wireframes in Figma and Sketch to visualize the app’s structure. These wireframes covered key screens, focusing on functionality to allow easy product selection, customization, and real-time design previews.
Design System
As I was building a responsive mobile and web application, I decided to reuse design components by creating a design system containing over 500 components, 10+ text styles, and a comprehensive color stack. I also included support for light and dark modes to enhance user experience.
Typography
After a long research, I decided to use a paid font called “Antenna”. The reason behind using this font is it loads fast on the web and brings a feeling of sportiness
Colors
I decided to use Nikes dark theme for this project too as it is their brand color. along with it I introduced 3 colors as primary
High Fidelity Screens
With all my research findings, Insights and data points I started working on UI design for this project. First I designed responsive mobile application so that I can scale it to web.
Collaboration
Collaboration played a crucial role in the success of the Nike project. Working closely with engineering and product teams, we held three weekly internal syncs and one detailed design discussion with Nike to explore possibilities and refine ideas. Incorporating their valuable insights, I iterated on my designs to ensure stability and usability.
We utilized Google Meet for meetings, Jira for task management, Confluence for documentation, Dovetail for research insights, and Miro for brainstorming sessions. This seamless integration of tools and teamwork contributed to the project’s overall success.
We utilized Google Meet for meetings, Jira for task management, Confluence for documentation, Dovetail for research insights, and Miro for brainstorming sessions. This seamless integration of tools and teamwork contributed to the project’s overall success.
Conclusion
The Nike Equipment Builder has been one of the most rewarding projects I’ve worked on so far. Collaborating with a client as iconic as Nike brought immense motivation and inspiration to every step of my design process. I’m proud to share that the application is now live and being used by countless athletes to customize their gear.