Categories
Frontend Innovation Prototyping supply-side

Data ETL UI

(Bluxome Labs : 2/16-2/16)

Given only the following mockup from Design (created using InVision)

I did research until I found this.

I knew there would be a fair deal of work to do to re-purpose the idea to realize what Design had proposed so I started out small in my iterations.

First, I tried to standup the simplest POC using jQuery Draggable that I could in a single, local page.

Then, I added Bootstrap (the styling paradigm of the eventual target codebase) and continued to refine interactions

To get Product and Design’s feedback, I deployed the protoype on Heroku.

I was getting close to integration and that would eventually prove the most challenging (given pre-existing styling interactions and positioning.)

I incorporated my work into the main codebase and iterated on styling and interaction from there. Also, I created a CoffeeScript spec for covering the main features.

Here’s the final product

Results

  • Re-purposed an existing drag/drop example using jQuery Draggable in order to facilitate data management.