Phone Unlocks

Touch-based & sensor-based alternatives to "slide to unlock" mobile phones.

Yvonne Ng, Britney Phan, Alokik Kinra, Ariel Lin (me)

Finger Hopscotch

A touch-based lock screen that modernizes the classic playground game, requiring users to cycle endlessly through various hopscotch designs until the correct passcode is input.

Live Demo

Source Code

Tree Shaking

A sensor-based lock screen where users simulate tree shaking by tilting their device, and the phone unlocks only when a designated number of leaves remain on the virtual tree.

Live Demo

Source Code

Initial Concept Sketches

For my initial concept sketches, I started by exploring the internet for inspiration and then gathered insights from my family, combining both online trends and personal touches to inform our project's creative direction.

Touch-Based

Touch Pressure Sequence

Users would need to apply varying levels of pressure in a specific sequence on the screen using multi-touch. The pressure levels and sequence would serve as the unlock code.

Morse Code Unlock

Users could input a predefined Morse code pattern by tapping and holding on the screen. The device would recognize the pattern and unlock if correct.

Color to Unlock

Present users with a grayscale image or drawing and allow them to "color" it by touching specific areas. The colors and positions of touches would constitute the unlock code.

Multi-Touch Combination Lock

Implement a combination lock-style interface where users input a sequence of touch gestures (e.g., swipe left, tap twice, pinch in) to unlock the phone.

Sandglass Stopwatch

Users need to flip the sandglass at certain sand level before the sand runs out to unlock the phone.

Geometric Shape Recognition

As shapes drop from the top of the screen, and users must select specific shapes in a particular order using touch events. Each shape corresponds to a part of the unlock code.

Fruit Sequencing

Users must select a series of fruits in the correct order to unlock their phone.

Treasure Chest Unlock

Users interact with a virtual treasure chest on the screen. They must tap or swipe the device in a specific sequence to reveal the treasure and unlock the phone.

Test Answers Sequence

Users are presented with a number of MC questions, the sequence of correct and wrong answers is used to unlock the phone.

Dice Combination Lock

Display virtual dice on the screen, and users need to arrange them in a specific combination or sequence to unlock the device. The number and arrangement of the dice act as the code.

Touch Pressure Sequence

Users would need to apply varying levels of pressure in a specific sequence on the screen using multi-touch. The pressure levels and sequence would serve as the unlock code.

Morse Code Unlock

Users could input a predefined Morse code pattern by tapping and holding on the screen. The device would recognize the pattern and unlock if correct.

Color to Unlock

Present users with a grayscale image or drawing and allow them to "color" it by touching specific areas. The colors and positions of touches would constitute the unlock code.

Multi-Touch Combination Lock

Implement a combination lock-style interface where users input a sequence of touch gestures (e.g., swipe left, tap twice, pinch in) to unlock the phone.

Sandglass Stopwatch

Users need to flip the sandglass at certain sand level before the sand runs out to unlock the phone.

Geometric Shape Recognition

As shapes drop from the top of the screen, and users must select specific shapes in a particular order using touch events. Each shape corresponds to a part of the unlock code.

Sensor-Based

Combination of Expressions (camera)

Require users to perform a combination of specific facial expressions in a particular order to unlock the phone. (eg. smiling → wink → nod)

Gesture-Based Number Lock (camera)

Using a camera to recognize hand gestures that represent numbers for unlocking a phone. Each number in the user's chosen unlock code is represented by a specific hand gesture.

Command Matching Unlock (camera)

The phone displays a random command on the screen (eg. wave hand), then the phone will be unlock when user performs the requested gesture correctly in front of the camera.

Math Question Lock (microphone)

The phone displays a random math question on the screen (eg. square root of 121), then the phone will be unlock when user verbally provides the correct answer through microphone.

Music Lyric Lock (microphone)

The phone plays a song from a predetermined playlist. At a certain point in the song (e.g., at the end of a verse or chorus), the music playback pauses. The user must continue singing or provide the next line of lyrics from the song to unlock the phone. (eg. O Canada)

Sandglass Speed Unlock (accelerometer / gyroscope)

Simulates a sandglass on the screen. Users must achieve a specific sand flow speed and duration by tilting and rotating (simulated and detected by accelerometer or gyroscope sensors) the phone to unlock it.

Sandglass Level Unlock (accelerometer / gyroscope)

Simulates a sandglass on the screen. Phone will be unlocked when the bottom chamber reaches a specific level for certain duration. Phone orientation - vertical (sand falling); horizontal (sandglass pause).

Tilt-Based Maze Unlock (accelerometer / gyroscope)

Display a virtual maze on the phone screen. Users tilt and rotate their phone to navigate a virtual ball through the maze. The phone unlocks when the ball reaches the exit of the maze.

Count the Rolls (accelerometer / gyroscope)

Users shake their phones, simulating rolling dice. Users must roll the virtual die a specific number of times within a time limit.

Morse Code with Light (ambient light sensor)

The phone unlocks when it recognizes the correct Morse code sequence.

Combination of Expressions (camera)

Require users to perform a combination of specific facial expressions in a particular order to unlock the phone. (eg. smiling → wink → nod)

Gesture-Based Number Lock (camera)

Using a camera to recognize hand gestures that represent numbers for unlocking a phone. Each number in the user's chosen unlock code is represented by a specific hand gesture.

Command Matching Unlock (camera)

The phone displays a random command on the screen (eg. wave hand), then the phone will be unlock when user performs the requested gesture correctly in front of the camera.

Math Question Lock (microphone)

The phone displays a random math question on the screen (eg. square root of 121), then the phone will be unlock when user verbally provides the correct answer through microphone.

Music Lyric Lock (microphone)

The phone plays a song from a predetermined playlist. At a certain point in the song (e.g., at the end of a verse or chorus), the music playback pauses. The user must continue singing or provide the next line of lyrics from the song to unlock the phone. (eg. O Canada)

Sandglass Speed Unlock (accelerometer / gyroscope)

Simulates a sandglass on the screen. Users must achieve a specific sand flow speed and duration by tilting and rotating (simulated and detected by accelerometer or gyroscope sensors) the phone to unlock it.

Choice of Concepts

As a group, we collectively generated approximately 80 concept sketches, with 40 focused on touch-based approaches and another 40 on sensor-based approaches. After a thorough review of all these ideas, we identified a few concepts that showed promise and merit for further refinement.

Touch-Based

We initially narrowed down to Yvonne's "magic eraser/photo puzzle" and Britney's "infinite lock screen" concepts. After some consideration, we found the former too complex and the latter limiting in terms of creativity. Ultimately, we chose Yvonne's "finger hopscotch" concept for our project due to its creative potential and better alignment with our time constraints.

Sensor-Based

After considering multiple concept sketches, we narrowed our options down to Alokik's "tilting" and Yvonne's "tree shaking" concepts. We ultimately chose Yvonne's "tree shaking" as it offered a more specific and suitable direction, while Alokik's "tilting" seemed overly broad for our project's scope.

Refinement

In our refinement process, each team member contributed by creating refined sketches for the chosen concepts.

Selected refined sketches are shown in the gallery below.

Touch-Based

Sensor-Based

Detail (Yvonne)

Allow users to highlight 1-2 fingers at a time in any order, with the selected blocks disappearing upon selection.

Variation (Yvonne)

Explore diverse visual designs for hopscotch grid.

Detail / Variation (Britney)

Utilize multi-touch input, with background color changes (warmer for correct, colder for wrong) and dynamic hopscotch design alterations in response to user input.

Detail (Ariel)

Display a virtual hopscotch grid on the screen (varies every time user wants to unlock the phone). Users need to follow a predefined sequence of squares by tapping on the grid.

Variation (Ariel)

Each square on the virtual hopscotch grid represents a musical note. Users need to hop through the grid in the correct sequence to create a specific melody, which serves as the unlock code.

Detail (Alokik)

Feature multi-touch input, and in case of repeated failures, users are prompted to revert to a normal passcode unlock method.

Variation (Yvonne)

Dynamic time and weather changes based on horizontal and vertical tilting.

Variation (Yvonne)

Featuring the growth of various plants (e.g., bushes, palm trees) and the addition of scarecrows to deter birds.

Variation (Yvonne)

Tree on the screen automatically changes to match the current season based on the phone's date, and users can tilt to make the tree grow.

Variation (Britney)

Allowing users to capture a photo to determine the season displayed on the screen based on the colors and tones in the image, or altering the unlock method based on real-time weather conditions.

Detail (Ariel)

Adapts the unlock method depending on the current season based on phone’s date (spring / summer shown).

Detail (Ariel)

Adapts the unlock method depending on the current season based on phone’s date (fall / winter shown).

Detail (Alokik)

Users must tilt the device to a specific angle to enter their passcode.

Variation (Alokik)

Utilizes the color and quantity of leaves on the screen to unlock the device.

Final Design & Implementation

We held a poll to select our final designs. We opted for "Multiple Hopscotch" (Britney) along with "Hopscotch Code" (Ariel) for the touch-based approach, and "Tree Shaking Weather Variation" (Ariel) for the sensor-based approach.

The final design sketches are shown below.

Finger Hopscotch

Tree Shaking

We implemented our projects using HTML, CSS, and JavaScript on the Glitch platform, following the selected layouts shown above. For the sensor-based approach, due to time constraints, we implemented a simplified version of Ariel's seasonal variation lock screens, primarily focusing on the summer design and left-right tilting effect. Both projects were thoroughly tested and confirmed to be functional on iOS and Android devices. However, some minor scaling issues and a lack of haptic feedback support might arise depending on the device used.

There are three distinct lock screen designs that cycle through when an incorrect passcode is entered. Additionally, Android devices offer haptic feedback to signal incorrect entries.

Dynamic interaction based on the mobile OS version. Tilt gestures (left for iOS, right for Android) influence the growth and shedding of leaves on a virtual tree. Shaking the phone triggers random falling leaves and a corresponding sound effect. The phone unlocks when a specific number of leaves remain on the tree. If an incorrect number of leaves is left when attempting to unlock, Android devices provide haptic feedback (vibration) to signal the error.

Contribution

My contribution to the project primarily focused on the sensor-based tree-shaking lock screen. I was responsible for developing all aspects of its features, including the logic, layout, and styling. This involved creating animations for tree shaking, leaves falling, indicators fading, and lock enlargement. I also handled the logic for detecting and responding to shaking and tilting events, passcode verification, sound effects, and device vibration. To ensure its functionality, I conducted testing on both iOS and Android devices.

Resources

All referenced sites for the implementation have been cited inline within the source code.