Siddharth Hirwani

banner.jpg
 

Peek - Tilt to preview

 

Challenge

Creating meaningful screen interactions at the same time exploring and learning new tools. 

Approach

Taking the opportunity to learn Framer.js and work in an agile manner. Developing the idea step by step to achieve the final desired outcome.

Outcome

We developed a wake -up screen concept, that uses 3D space as an interaction field to quickly view information and notifications on your phone.

 

Role in team

Working in a team helped quicken the development and learning process. I took equal part in the project, learning on the go and writing code to implement our design. Also helping to identify and solve errors in the code. I was also a part of ideating and discussing the fine nuances of the interaction to finally create a wonderful micro - interaction. Once the framework was ready I designed the layout the in Sketch, importing it into Framer.js to have the final working concept.

 

Being intrigued by the way mobile devices are woken up to view the time or quickly glance over your notifications we decided that we could improve this simple interaction of revealing information by the amount you tilt your phone in 3D space.

 

Umeå Institute of Design
MFA Interaction Design

Duration / Year
1 week / Fall 2016

Team Member
Christoph Zobl

 


Process

We decided to prototype our idea in Framer.js. Doing things in incremental steps, achieving small details at a time leading to our final outcome. We started by prototyping a square on screen which moves up and down on the degree you tilt your phone. Moving onto easing and snapping it at increments to reduce its sensitivity. We divided the screen into three sections for the data we wanted to reveal. Once we got the behaviour we wanted on the square, we replaced that with live date and time.  As we started to get the basics, we moved into fine adjustments of our interactions - how do things move around on screen, the speed, bounce, movement, direction etc. These fine details brought delight into the interactions.

 

Once we had the framework ready, we created a finished looking layout on Sketch to so we can easily import them into framer and replace the dummy content placed earlier. We also wanted to play with the landscape format of the phone to show notification which require more space. Presenting this to people around us revealed how exciting a small interaction like this can bring.

Reflection

This was my first time working with javascript/ coffeescript and it took me a bit of time to understand and be able to apply it. Although having worked on Arduino, processing earlier made it easy to pick up. Working with a team member helped quicken my learning time. It was great to work in a team, being able to bounce of ideas, analyse code and deconstruct it to get what we wanted, working together to get the result and splitting work at times to be able to present the final result in time.