mobile pin

GOAL

Making the authentication process easier, fluent and intuitive for users, so they are always well-informed of the system state.

PROBLEM STATEMENT

Design the user authentication experience, for a mobile app, which include biometric as well as pin verification.

DELIVERABLE

Paper prototypes or Lo-fi prototypes in any prototyping tools

TIME

5 DAYS

TYPE

Class Assignment - Rapid Prototyping & Lean UX Methodology

PROBLEMS FACED

- Time Constraint (one of the 4 assignments due within a week)

- No user story was provided.

- There was no mention of a sequence in which the verification will proceed nor was the type of biometric scans mentioned.

NOTEWORTHY POINTS

- People often struggle with screens larger than their palm size and thus have issues operating the phone with just one hand. Having the keyboard shifted towards the left or right (an affordance provided in the iPhone keypads) or shifting the numeric keyboard, for typing in the pin, towards the very bottom of the screen might help.

- It is noteworthy that a different placement of keyboard in an application interface may influence the remembrance of passcode/pin associated with the application.

- All the messages or action responses on the screen that are being depicted by colors along-with text in the designs, are necessarily accompanied with appropriate icon animations, sound cues and haptics like vibrations.

BRAINSTORMING
IMG_5854.jpg
IMG_5856.jpg
IMG_5855.jpg
PROTOTYPES

The initial prototypes were done using pen and paper, and Sketch was used to develop the high-fidelity prototypes.

Mobipin-penDrawing-colorEyeMismatch.png
Screen Shot 2020-07-10 at 9.05.23 PM.png
Screen Shot 2020-07-10 at 9.05.03 PM.png
Screen Shot 2020-07-10 at 9.01.03 PM.png
Screen Shot 2020-07-10 at 9.01.22 PM.png
mobipin-SmallHanda.png

To gain more experience with the tool, I ended up prototyping a number of screens depicting various steps in the process. The screens are available below, however are not annotated as these were a part of my exercise of getting familiar with Sketch.

Screen Shot 2019-10-03 at 11.16.14 PM.pn
Screen Shot 2019-10-03 at 11.18.35 PM.pn
Screen Shot 2019-10-03 at 11.20.15 PM.pn
Screen Shot 2019-10-03 at 11.20.58 PM.pn
Screen Shot 2019-10-03 at 11.45.16 PM.pn
Screen Shot 2019-10-03 at 11.46.05 PM.pn
Screen Shot 2019-10-03 at 11.51.50 PM.pn
Screen Shot 2019-10-03 at 11.52.21 PM.pn
Screen Shot 2019-10-03 at 11.18.03 PM.pn
Screen Shot 2019-10-03 at 11.19.30 PM.pn
Screen Shot 2019-10-03 at 11.20.26 PM.pn
Screen Shot 2019-10-03 at 11.21.08 PM.pn
Screen Shot 2019-10-03 at 11.45.26 PM.pn
Screen Shot 2019-10-03 at 11.45.39 PM.pn
Screen Shot 2019-10-03 at 11.51.59 PM.pn
Screen Shot 2019-10-03 at 11.52.11 PM.pn
Screen Shot 2019-10-03 at 11.18.20 PM.pn
Screen Shot 2019-10-03 at 11.19.53 PM.pn
Screen Shot 2019-10-03 at 11.20.41 PM.pn
IMG_5853.jpg
Screen Shot 2019-10-03 at 11.45.49 PM.pn
Screen Shot 2019-10-03 at 11.51.40 PM.pn
Screen Shot 2019-10-03 at 11.52.48 PM.pn
Screen Shot 2019-10-03 at 11.52.30 PM.pn