Unlock systems
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.
-
Implementation: We all worked together to implement the web application’s functions, including fake apps’ rotation (with the help of a JS open-source library, ZingChart), fake screen’s falling, binding the safe lock’s position to the gyroscope’s sensory data, and the realistic unlocking mechanism of the safe lock. Macks found royalty-free images and audio files on the internet and edited them to fit our project.
-
Demo: We brainstormed and filmed our demo video together. Macks recorded a voice-over describing our project design. Tian edited the videos and uploaded them to YouTube.
References
-
[Doc] Docs of HTML, CSS, and JavaScript from MDN and W3School
-
[Open-Source Library] ZingTouch, a touch gesture library
-
[Code] Gyroscope code and JQuery basics code from the course instructor
-
[Code] Code for DOM element movement and interval setting and stopping
-
[Code] Code for playing audio files (same as P1)
-
[Audio] Click sound. Youtube Royalty Free Music Library
-
[Image] Combination Lock. iStock
-
[Image] Combination Lock. iStock
-
[Image] Brushed Aluminium. iStock
-
[Image] Check Mark. iStock
Vault breaker
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.
​
10 Concept sketches
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |
These were our groups 10 base sketches, where we each drew our own 10 ideas, to which we then proceeded to pick the 3 we liked the most from our own drawings, and then our groups most liked idea.
These sketches above are the 10 base ideas we chose to present to the class. I chose my three (Musical Hand signs, Song arrangement, and multi - touch). We voted to pick the Gyroscope idea from Tians, I voted for it because as a kid I always enjoyed heist movies and thought the lock was a very unique and fun idea. My group members also chose their 3 favorite giving us 10 ideas to select from for our project.
10 Refinements
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |
The Two ideas our group chose from the 10 concept idea's were the Gyroscope lock and at the time the multi touch idea. After much consideration we decided against using the multi touch idea as it was not as creative as other ideas. So we chose to do the app screwing idea instead as it was more interactive and creative for the users. Displayed above is our refinement drawings of the gyro lock and two images of our app screwing ideas. We drew either variations of the two base ideas or ones that incorporated the same theme as the base ideas. Finally we ended up with our two project Ideas, the Vault breaker and the Urscrewed idea.
Urscrewed
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.
​
Note: We fit the visuals to work on an iPhone rather than an Android. For Android the position of the screwed in apps are not correct, but the rest of the rules still apply.
​