Logo of UI Challenges
Sign in
Wireframe example for PIN Code Lock Screen
An example interpretation of the prompt
Icon of target

PIN Code Lock Screen

Icon of book open

Design a mobile lock screen that asks for a 4–6 digit PIN using a telephone-style keypad. This is the first gate into the app, so the screen should feel secure, fast, and familiar on a phone.

The main focus is the PIN entry area and the numeric keypad below it. Show how the digits are masked, how many digits are required, and how the user knows they are making progress as they type.

Make the keypad easy to hit with one thumb. The layout should read like a native mobile lock screen, with clear number buttons, a visible delete control, and a simple way to submit once the PIN is complete.

The interesting part is balancing restraint with clarity: the screen has very little room, but it still needs to communicate state, progress, and the next action without feeling cluttered.

Icon of book open

Use the spacing and visual weight of the PIN dots to show progress; users should know they are 1 digit away from unlocking without reading any helper text.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.