Nike Equipment Builder

Crafting an intuitive, personalized experience that empowers athletes to create gear tailored to their unique needs.

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 UX process I followed from concept to completion. I actively supported the development team to ensure the final product reflected the original design vision.

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.

Discoveries From Research

Research highlights a market opportunity for Nike to expand its reach.
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.

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 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

Admin Console.

The athlete’s experience with the Nike Equipment Builder is fully managed through the admin panel I designed. From glove types and color options to new design releases, admins control what athletes see and how they interact. Once a design is created in the admin panel, it’s sent to the athlete’s view, where players can either approve it or customize it further ensuring the experience remains consistent, flexible, and aligned with the brand.

Mobile Screens.

Web Screens.

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, and Miro for brainstorming sessions. This seamless integration of tools and teamwork contributed to the project’s overall success.

Jira

Confluence

Google Meet

Miro

Results & Impact.

🎯 Precision: Reduced manufacturing errors by ~30%, improving production accuracy.
🕒 Efficiency: Saved over 100 manual design hours each month through automation.
🙌 User Love: Athletes praised the intuitive, easy-to-use customization experience.
💬 Sharing: Enabled users to export their designs as PDFs, simplifying supplier communication.

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.