VAULT BREAKER LOCK
This project is our sensory based unlock system. For this project, we used the phone's built in gyroscope to simulate turning a lock. This idea was created to make users have to simulate breaking into a vault or safe to unlock their phone. Firstly the lock itself turns by using the gyroscope. There are three numbers the user has to find in the correct order to unlock the phone. These numbers are indicated by a clicking sound that cannot be heard if the stethoscope on the screen is not clicked. If unclicked, users can turn the phone the full 360 and no sounds or checkmarks will be revealed. Once the user taps the stethoscope, it will appear highlighted on the screen. From here users will attempt to slowly turn the lock in one direction until they hear a click indicating the user has hit the first number. From here a green check mark will also appear on the screen. The user must now change directions and tilt the phone in the other direction until they find the next number. When the next number is hit a second click will be heard and another green check mark will appear on the screen. Finally the user changes directions for the last time and rotates the phone until the third and final click and check mark appear and then the phone will unlock.
URSCREWED LOCK
This project is our multi touch/gesture based unlock system. When opening the phone users are presented with a fake screen with almost no interaction. Attempting to drag or tap the fake apps will do nothing, this prevents attackers from using the phone. To get past the fake screen. you have to unscrew the apps placed in each of the four corners of the screen. In our example we do: YouTube, Chrome, Settings, Apps as our for screws. The user has to rotate the application in the correct direction (for our project we did clock wise). Once the app has been rotated enough times, it falls off. The user must then continue by unscrewing the next application. The order for this matters, for our project users must unscrew YouTube, then Chrome, then Settings, and finally Apps. If the user does not unscrew these applications in the correct order, the screen does not unlock. If the user manages to unscrew each of the 4 apps properly and in the correct order, the screen falls off revealing the real screen and unlocking the phone.
GYRO-LOCK
We use this idea to simulate a safe lock and fulfill the sensor requirement of the assignment. We decided to use the gyro sensor that most phones today use. The basis of this idea is that the user would spin the phone as if they were trying to unlock a combination lock on a safe. This became the basis of our final sensory idea.
URSCREWED LOCKSCREEN (GESTURE)
In this design, the user is presented with a fake and seemingly non-functional app screen. This would ward off attackers because they would assume the phone is not working. In reality, certain apps on the screen are totatable like screws, and once they are rotated in a certain direction for a certain amount of times, the apps would fall off the screen. After unscrewing all the rotatable apps, the fake screen would also fall off revealing the real phone screen and unlocking the phone. We ended up going with this idea as it was more creative and interactive than our original multi-touch/gesture idea.
CONTRIBUTIONS
Sketches:
Our design process started with 10 preliminary design sketches from each of the three team members (30 in total). We selected 10 best preliminary designs to present in class and received feedback. We then chose three (one from each member) of our preliminary designs as the base design to develop 10 variants from each member. Among the 30 design variants, we selected our two best ones from both categories (gesture and sensory) as the final design decision for implementation and demo.
​
Base 10 Ideas:
We each drew 10 base ideas and from those each chose 3 ideas to contribute, and then we took one more which we all really liked from Tian’s base ideas.
Refinement 10 ideas:
Here we refined two of our ideas from the base 10 ideas. We took 1 gesture/multitouch-based idea and one sensor-based idea. We chose Macks’ multi touch for our gesture idea but later decided against it and switched to Macks’ screw lock idea. At first we chose a variation on Spencer’s finding Waldo AR game, but then decided to go with the gyroscope lock idea from Tian. Here we show all of our refinement ideas for the Gyroscope idea.
​
Coding:
For the Gyroscope, Spencer implemented the check marks, stethoscope and random number generation, while Tian and macks did the math to spin the lock. Macks also implemented the sound for each unlock. For the Screw lock, Macks and Spencer also implemented the rotational screen regions and apps, while Tian implemented the animations of the screws and screen falling. For both parts of the project, we all worked on the CSS to ensure that the images were properly sized and aligned.
Artwork:
Macks found royalty free images and sounds, edited the images used (either by removing the background or using image editing software to change the image to be what we wanted). Also edited the sounds to ensure they were to our satisfaction for use in the project.
​
Recording:
We all brainstormed what we wanted to record. We used Tian’s phone to screen record the application in use and at the same time Spencer recorded Tian using the application. Afterwards we decided to add some story to the videos and Macks and Tian acted in those scenes while Spencer recorded. Afterwards Macks recorded audio to be used in the video describing the applications. After all the parts were done, Tian edited and released the video on youtube.
​
SOURCES
Gesture:
1. [Doc] Docs of HTML, CSS, and JavaScript from MDN (https://developer.mozilla.org/en-US/) and W3School (https://www.w3schools.com/)
​
2. [Open-Source Library] Touch gesture library for rotation: https://zingchart.github.io/zingtouch/
​
3. [Code] Basic JS animation and interval setting and stopping: https://javascript.info/js-animation
​
Gyro:
1. [Code] Gyroscope code and JQuery basics code from the course instructor
​
2. [Doc] Docs of HTML, CSS, and JavaScript from MDN (https://developer.mozilla.org/en-US/) and W3School (https://www.w3schools.com/)
​
3. [Code] Code for playing audio files (same as P1): https://stackoverflow.com/questions/33723377/javascript-if-else-statement-that-plays-an-mp3-audio-file
​
4. [Code] Interval setting and stopping: https://javascript.info/js-animation
​
5. [Audio] Click. Youtube Royalty Free Music Library. Retrieved from https://studio.youtube.com/channel/UC-MFqGkHHI5IEpaT2jruRVg/music
​
6. [Image] Combination Lock. iStock. Retrieved from https://www.istockphoto.com/vector/combination-lock-realistic-metal-vector-illustration-for-safety-illustration-gm669015844-122240585
​
7. [Image] Combination Lock. iStock. Retrieved from https://www.istockphoto.com/photo/stethoscope-isolated-on-white-background-gm1307155544-397514439
​
8. [Image] Brushed Aluminium. iStock. Retrieved from https://www.istockphoto.com/photo/brushed-aluminium-xl-gm134809290-6450564?utm_source=unsplash&utm_medium=affiliate&utm_campaign=srp_photos_top&utm_content=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fmetallic&utm_term=metallic%3A%3Asearch-aggressive-affiliates-v1%3Ab