Peek - Tilt to preview
Creating meaningful screen interactions at the same time exploring and learning new tools.
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.
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
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.