Product Designer

Disintegration Anxiety

Design Journal | code | thought process | Class Homework | Project Documentations & more. WIP workspace. Current Portfolio at:

Mobile Lab: Phone unlock experience

Timeline to build: 2 days

After going over some of the lessons from on device testing issues I got over to finally be able to test my apps on a live device.

Learnings from this week:

  • Laying out components on the UI viewcontroller

  • Using native components such as buttons & text fields

  • Conditional statements

This weeks assignment the task was to create a lock screen & the possible interactions for unlocking the phone


A lock screen fundamentally is an introductory portal meant to keep the contents of the device hidden from everyone else except the original user. Which means there is some information which only the user knows. But a code/combination/action can leak to a individual. So I wanted to have a randomly generated code which is displayed on a different device, adding a randomness & an added authentication factor separating the key into two halfs.

For the design this week I decided to play with controlling 2-3 different UI elements which I could change on event triggers. I sketched my ideas on pen and paper on how I wanted the experience to be and what the different states could be.


Some of the things I kept in mind while sketching out my ideas:

  • There should be a clear feedback of the actions the users is taking.

  • All the interaction elements should be present in the lower half of the screen and feedback on the upper half for better usability.


I found that writing all of my tasks in an logical order with increasing complexity helped in planning my work & keep testing as I went building in every step.

So, I created a workflow of the goals I wanted to hit based on the labs and swift introduction course which were part of this weeks assignment.


So, after testing what values different events return & writing control flow logic I finally was able to make this work in the Xcode simulator.

On Device Testing:

iPad lockscreen screenshot


The code for this project on github.

Possible Improvements:

The random system code could be triggered by detecting a specific coloured object, the user saying a specific phrase or going in proximity with a connected device.


From the labs this week I had some questions about some concepts I didn’t fully understand:

Swift Programming I: How are structs different from classes?

Auto Layout: What happens when I add extra constraints on an element which I have already applied constraints to?