Inked drag'n'drop app

Context

Inked website was a collaborative group project in a group of 5 people, aiming to learn agile methodology. I was responsible for creating the wireframes when given the sitemap of the website and thinking through the potential functionality of the try-on tattoo web app. After collecting content and designs, I proceeded to code the prototype of the website, having a couple of days to do it.

Overview

An interesting thing about this project is how reframing the problem can help to solve it. When first approached with “tattoo try-on/ preview” idea all I thought about was the complex 3d models and mapping the uploaded images on their surface, or existing AR apps for trying on in real-time. However, for the scope of the school project simple drag and drop with overlaying one image over another was enough, so I proceeded with that, using jquery UI for simplicity.

Problems and Solutions

• Uploading a design and making it draggable -> use HTML5 upload file API and jquery UI to make drag and drop events easier
• Resizing the tattoos for the specific bodyparts -> attach resizing script to the range input element
• Drag’n’drop HTML5 functionality not working on mobile -> use jquery UI polyfill