Screensets

This reference category enumerates all of the screens and related elements present in the Registration flow.

Sign-in/Sign-up Screen

This describes a screen in the default UI flow.

The Sign-in screen offers the user two ways to sign into your website when they arrive for the first time. A user may use a profile from a social network in order to proceed, or sign in using a traditional username and password.

From this screen, the user proceeds to either a Social User Data Confirmation screen, or a Traditional User Data Confirmation screen.

Alternatively, the user may also follow the Forgot your Password? link to being the password retrieval process.

Figure 1: Sign-up/Sign-in Screen

Figure 1: Sign-up/Sign-in Screen

Traditional Registration

Once a user completes the initial Sign-in screen using the traditional registration, they see this screen, and need to enter their profile data.

From here, the user continues on to the Sign-in Completed stage, and the data is stored in the user profile, which may be managed later using data management screens such as Edit Profile, or Confirm Password.

Figure 2: Traditional Registration

Figure 2: Traditional Registration

Social Registration

Once a user completes the initial Sign-in screen using the Social registration, they get this screen, and need to complete and confirm their profile data.

From here, the user continues on to the Sign-in Completed stage, and the data is stored in the user profile, which may be managed later using data management screens such as Edit Profile, or Confirm Password.

Figure 3: Social Registration

Figure 3: Social Registration

Resend Email Verification

In case of email verification failure, the Resent Email Verification screen prompts for a an address to retry.

Figure 8:  Resend Email Verification

Figure 4: Resend Email Verification

Email Verification Success

Once a user’s email has been successfully verified, a confirmation screen is displayed.

Figure 5: Email Verification Success

Figure 5: Email Verification Success

Registration Confirmation

Once a user has completed a successful registration, a confirmation screen appears.

Figure 5: Registration Confirmation

Figure 6: Registration Confirmation

Return Social Experience

When a user has previously used a social sign-in to register with the site, and they return for another visit, they see the Return Social Experience screen.

From this screen, the user may continue on to the Sign-in Completed screen, or choose to sign-in using a different method, which takes the user to the initial Sign-in screen.

Figure 5: Social Return Experience

Figure 7: Social Return Experience

Create New Password

When a user clicks the Forgot Your Password link in the Sign-in/Sign-up screen, the UI prompts for an email address.

Figure 10: Create New Password

Figure 8: Create New Password

Create New Password Success

A screen confirms instructs the user the email has been sent.

Figure 5: Create New Password

Figure 9: Create New Password

Change Password

This screen appears when a user opts to change the current password.

Figure 6: Change Password

Figure 10: Change Password

Change Password Success

The user completes the Forgot Password screen, presses enter, and then is transferred to the Change Password Success screen.

Figure 7: Change Password Success

Figure 11: Change Password Success

Multiple Accounts Detected

When a user has signed in with multiple accounts, a prompt is displayed to determine whether to link accounts or not.

Figure 10: Link Accounts?

Figure 12: Multiple Accounts Detected

Link Accounts

When a user registers with a social profile that shares an email address already present in an account in registration, they are given the option to link these profiles together on the screen shown.

Figure 8: Link Accounts

Figure 13: Link Accounts

Sign-in to Link Accounts

Once a user opts to link multiple accounts, an additional sign-in is need.

Figure 10: Link Accounts Success

Figure 14: Link Accounts Success

Edit Profile

After the sign-in UI flow is complete, the user may change their information using the Edit Profile screen.

Figure 10: Edit Profile

Figure 15: Edit Profile

Photo Selector

A prompt allowing a user to search for a photo to add to a profile.

The following formats are supported: JPEG, PNG, and GIF.

Figure 11: Photo Chooser

Figure 16: Photo Selector

Photo Editor

When editing a profile, the user may opt to change their profile image. Registration provides a screen to edit the uploaded image, as shown.

Figure 9: Photo Editor

Figure 17: Photo Editor

Public Profile

Once a user has completed the Registration sign-in process, the user may view their information on the Public Profile screen.

Figure 11: Public Profile

Figure 18: Public Profile