Palantir Code 33 Object Transfer
Project Detail
Initially I was not responsible this component of the design, however, our architecture designer was quite overwhelmed by the work so I decided to help out.
As Palantir moves towards a suite of product accessible in the web, we want to leverage the benefit of being able to digest data objects via different applications.
Technique
Product Design
Visual and Interaction Design
Motion Design
Prototype
Design Problems
How do people manipulate objects?
How do we make the data hierarchy clear?
How do we deal with technical limitations such as load time and tab controls within browsers?
"Give physicality to moving objects, making their destination clear to the user"
It's been difficult to explain the different data concepts that exists in Palantir, so we need a clear way to demonstrate the information hierarchy.
Breaking
Below is the initial mocks made by our Architecture designer. Whilst the call to action is clear, the interface does not provide context of the destination. The use of dropdown is also hard to navigate. I wanted to create a more immersive experience.
Making
Eliminating duplicity
Using scale to create the sense of context, almost like picking up the objects from the table, lifting your head (zooming out) and then looking at other files and dropping the objects in (zooming in).
Coherent Design Pattern
After presenting the expose version, the design lead was excited about the preview and the change in scale. But he wanted me to more closely align with the behaviours of other buttons on the left where a grey panel flies out.
Below are all the versions I completed. I have multiple iterations and directions that can't be shown here (too many videos)
Adapting to Constraints
To ensure browser compatibility, we removed the 3D transformation and replaced it with a simple scale change to create the sense of context. Also replace the preview with a static image capture by Phantom.js to make the page load quicker and provide a clear dropzone.