Design your own Nike footwear. Pick your colours, add your initials and implement your own styling. Start off by selecting your sport, then choose the product line that suits you and customise everything! Nike ID is a personalise and purchase service offered by the biggest sportswear brand on the planet.
Working on web apps at the time as a freelancer, I was approached to create some basic UI element styles that could be transformed throughout the product to fit their position. Once this was complete I was then responsible for creating transition and animation rulesets. The goal was to give users the feeling of progression and group sections of the journey through interaction.
Within the experience users will make a lot of changes to their creation. It was important to ensure any buttons taking the user out of their design studio didn’t clash with the customisation controls. They would also appear over a wide range of different backgrounds, so the ability to work in a variety of colours added to their flexibility. In-app buttons were always circular and often contained an image, pattern or gradient. The external buttons I created had a more “navigational” feel to them, separating them from control panel buttons.
One of the unique features to Nike ID is the ability to add unique personalisations to products. Over 98% of all purchases on the website include a text string or number chosen by the user. When designing the input field for these features it was important to make it the only available option once clicked. To keep people immersed in their product I also wanted to keep a visual of their creation on-screen. As the product’s image doesn’t update instantly, it needed to be obstructed or blurred to mask this.