Mobile Log In Wireframes

Class: DePaul HCI 430 Prototyping and Implementation Activities: Sketches, Interactive WireframesProblem: Design a mobile log in process with alternative pathsSolution: Allow users to simply log in or reset their password if necessaryDuration: 1 week

Ann Junker

Sketches

Brainstorm ideas - this shows a few of the sketches

Wireframes - Path 1: User logs in

Axure Wireframeshttps://h1blg4.axshare.com/#g=1&p=iphone_frame_for_desktop_view

Home page● User opens website.

● System shows home page.

● User wants to log in to their account.

● User sees the Log in button and touches it.

● Home page shows some content for users who are not logged in.

Wireframes - Path 1: User logs in

Login● System opens the Log in dialog.

● Login button is disabled to keep user from

trying to log in without entering account

information, avoiding user error and

unnecessary error messages.

● User enters login information.

● Login button enables.

● User touches login button to complete log in.

Wireframes - Path 1: User logs in

Alternate Path● User entered incorrect account information

● User entered incorrect information

● System displays error message.

● User can try again.

● User may enter incorrect information and need to show an alternate

path besides successful log in.

● The user can try again and then go on to the success path.

Wireframes - Path 1: User logs in

Success Path● User logged in successfully.

● System shows home screen with welcome message.

Wireframes - Path 2: User Forgot Log In

Home page● User opens website.

● System shows home page.

● User wants to log in to their account.

● User sees the Log in button and touches it.

● Home page shows some content for users who are not logged in.

Wireframes - Path 2: User Forgot Log In

Login● System opens the Log in dialog.

● Login button is disabled to keep user from

trying to log in without entering account

information, avoiding user error and

unnecessary error messages.

● User doesn’t remember account information.

● User touches ‘Need username or password

help?’ link.

Wireframes - Path 2: User Forgot Log In

Username and password help● System shows Username and Password

Help page.

● Continue button is disabled.

● User enters username.

● Continue button becomes enabled.

● User touches Continue button.

Wireframes - Path 2: User Forgot Log In

Email sent to user● Email has been sent to user.

● User follows information and link in email.

● System opens to the Pass code entry page.

● Continue button is disabled.

● User enters pass code received in email.

● Continue button becomes enabled.

● User touches Continue button.

Wireframes - Path 2: User Forgot Log In

Reset Password● User entered pass code correctly.

● Systems goes to reset password page.

● Reset button is disabled.

● User enters new password.

● User enters confirm password.

● Reset button is enabled.

Wireframes - Path 2: User Forgot Log In

Alternate path● User didn’t meet password criteria

● If passwords don’t match, System shows error

message.

● User re-enters new password and confirm password.

Wireframes - Path 2: User Forgot Log In

Success Path● Password successfully reset.

● System shows success screen.

● User touches button to go to homepage.

● Systems shows home page.

● User can try to log in with new password.