MainImage_JustDoIt3.jpg

JUST DO IT.

“A sneaker customizing AR app that enables users to easily and effectively customize their sneakers(Air Force-1) by mobile”

JustDoIt.jpg

Living in NYC, I’m surrounded by people who value fashion. And as a UX designer, I designed JUST DO IT which is an AR mobile app that allows people to customize their sneakers more easily. I created this app in order to tackle accompanying pain points within the process of customization. Luckily, the project was shortlisted in a startup incubating event, The Combine 2019 of NYC media lab.

 

Concept Background

Nike x Virgil Abloh: ‘The Ten’ Limited Edition Sneakers

Nike x Virgil Abloh: ‘The Ten’ Limited Edition Sneakers

The history of the custom-made shoe, at least in the modern, sneaker-obsessed world, can be traced back to when people like Bobbito Garcia were painting different colors on the Swooshes of their Nike Air Force 1’s to create one-of-one look at that would, effectively, blow people's minds. However, customizing sneaker is not easy in terms of time, cost and artistic output.

What if we use AUGMENTED REALITY to take a peek at how your customized sneakers would come out? Wouldn’t it be an awesome experience?

 

INSPIRATIoNS

sneakerness4.jpg

The Story of Sneakers-Lovers

nike-swoop-customization-666x333.jpg

Customization Industry & Needs of Personalization

The massive sneaker-head culture and the emerging desire of consumers to have individually customized gear from massive companies, Nike. As you can imagine, that is a huge challenge for companies where scale-ability relies on everyone wanting the same thing. The case was made that there is a market for customization of clothes and that the perfect way to try out this customization would be through AR.

 

Who Are Sneakerheads?

Source : Campless

Source : Campless

 

Problem

I noticed that the needs of customization and personalization were highly sought after, but the underlying barriers are the time and money required for process of the customization. Moreover, it was not easy to ensure an aesthetically high-quality finish. Therefore, I thought this could be an interesting approach to introduce AR to, so we applied this idea to Nike shoes by using AR stickers.(Photo Credit : sneakers-magazine.com)

 

Conceptual Thought

conceptual thought.png
 

TEchnical ideation

3dmodeling2.jpg

Markerless AR & 3D Tracking & Mass Production

With Vuforia, we were able to train unity to recognize the show in the real world and then place our 3-D model of the shoe on top of it. We were using Model-Target Generator from Unity which allowed us to embed mass-produced objects by 3D model on it as a marker.

Test1.gif

Using Ray-Casting to Draw on a 3D Object

In order to make an interaction with the real sneakers, we applied Ray-casting function which enables us to touch the shoes(3D object) while touching a 2D screen by finger interactions. So it requires calculations to convert those x,y points to the x,y,z points on your 3d object.

 

UX FLOW

UX+Flow.jpg
 

prototype

ipad.jpg
prototype2.jpg

As we were sketching out the UI and figuring out the interactions, I was playing around with the tech to make sure that we had the ability to do this. Above is the first proof of concept.

 

Iterations

In creating this platform, we faced several technical challenges. Among these major issues was how to apply AR customization to actual sneakers. So, before setting the UX flow, my teammate and I had to run through a technical test several times to ensure feasibility. We imported an exact 3D model of the shoe into Unity in order to build a 3D tracking system with real sneakers. Then, by making use of clickable buttons on mobile, we tried to apply AR stickers to the real sneakers.

Wrapping the Sneakers by Basquiat’s Artwork

Wrapping the Sneakers by Basquiat’s Artwork

Embedding Patterns to Surface

Embedding Patterns to Surface

Applying AR Stickers to My Sneakers

Applying AR Stickers to My Sneakers

Customizing AF-1 High at Nike Soho Store

Customizing AF-1 High at Nike Soho Store

 

USER SCENARIO

UserScenario3.jpg
 

UI Design

UIdesign.jpg
UIdesign.jpg
 

TECHNICAL FEATURES

unity1.jpg

Embedding 3D Model for AR Interaction

 
unity2.jpg

Model Target Generator for Detecting Real Sneakers

 

Controller.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Controller : MonoBehaviour
{
    public GameObject decalPrefab = null;
    private RaycastHit hit;

    private void Update()
    {
        if (Input.GetButtonDown("Fire1") == true)
        {
            // get position of mouseclick in scene
            Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
            if (Physics.Raycast(ray, out hit) == true)
            {
                SpawnDecal(hit);
            }
        }
    }
    private void SpawnDecal(RaycastHit hit)
    {
        GameObject decal = Instantiate(decalPrefab);
        decal.transform.parent = GameObject.Find("ModelTarget").transform;

        // 1. face decal same as surface 
        decal.transform.forward = hit.normal * 1f;
        

        // 2. position on surface
        decal.transform.position = new Vector3(hit.point.x, hit.point.y, hit.point.z);

        // 3. just above surface (so doesn't conflict for visibility)
        decal.transform.Translate(Vector3.forward * -0.01f);
        decal.transform.Rotate(new Vector3(90, 0, 0));
        
    }
    private void OnDrawGizmos()
    {
        // visualize the normal of the decal in scene view
        Gizmos.color = Color.red;
        Gizmos.DrawSphere(hit.point, 0.2f);
        Gizmos.DrawLine(hit.point, hit.point + hit.normal);
        Gizmos.DrawSphere(hit.point + hit.normal, 0.1f);
    }
}

TexturePicker.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TexturePicker : MonoBehaviour
{

    public Material[] BodyColorMat;
    Material CurrMat;
    Renderer renderer;

    // Use this for initialization
    void Start()
    {

        renderer = this.GetComponent<Renderer>();

    }

    // Update is called once per frame
    void Update()
    {

    }

    //render blue color
    public void DecalLight_Red()
    {
        renderer.material = BodyColorMat[0];
        CurrMat = renderer.material;
    }

    //render red color
    public void decalMaterial()
    {
        renderer.material = BodyColorMat[1];
        CurrMat = renderer.material;
    }

    //render greencolor
    public void Graffiti()
    {
        renderer.material = BodyColorMat[2];
        CurrMat = renderer.material;
    }


    //render yellow color
    public void kith()
    {
        renderer.material = BodyColorMat[3];
        CurrMat = renderer.material;
    }

    //render yellow color
    public void nikeMaterial()
    {
        renderer.material = BodyColorMat[4];
        CurrMat = renderer.material;
    }
}