Nike Node is an experimental computational design tool for Nike Footwear Designers.

Our Experience Design Team was challenged with the task of building a computational design web app. Based on the practice of using algorithms to create geometry, Nike wanted to introduce a new tool that would empower footwear designers to create original geometric patterns based on real data from athletes.

The Concept of Building Blocks

Since designing with generative algorithms is a step-by-step process, we experimented with using blocks that snap together to form a design.

Different Kinds of Blocks and What They Do

1. Grids
Grid Blocks establish points. Examples of grids are rectangular, triangular, hexagonal, random and variable.

2. Curves
Establish the vector lines that form around the points. Examples include Voronoi, Delaunay and Quad Tree.

3. Forces
Edits a point on the Grid by changing the surrounding points and altering the Curves.

The Anatomy

The tool would be composed of "libraries of blocks", a "building area", and a "stage". The user would be able to drag and drop blocks from libraries and connect them in the building area. This stage is where they would automatically see their designs come to life.

Importing Boundaries

The Boundary is the artwork created by the Product Designer and is usually one piece of the product. In this example we show a foot sole. The Designer can import a custom vector shape or import one from a library. Either way, this is the first step in creating a new custom pattern using the tool.

Final Wireframes

The final wireframes displayed how every feature would function in the app from importing artwork and data to connecting blocks to manipulating and outputting the final design. We ended the project by demonstrating how the click behavior would work and how a new designer would be on-boarded.

The Visual Design Team Created Final Visuals

We also worked hand-in-hand with the Visual Design Team as they created the final visuals based on our wireframes.