Post on 24-Sep-2020
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.