Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Table of Contents

UX

Click model

https://overflow.io/s/G1KSA64Y

UX Assets

https://gpworrell428458.invisionapp.com/console/share/GN28XA643A

Mobile views

https://gpworrell428458.invisionapp.com/overview/FIO---Account-Creation---Mobile-Views---April-12th--2021-cknewdhnf00kf0115be92b111/screens

Create Account

Visual

Functionality

Email & Password

  • Collect

    • Email Address

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Password

      • By default password is displayed as •••••••

      • When 👁 clicked show password for both Password and Password Confirm

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Password Confirm

      • By default password is displayed as •••••••

      • When 👁 clicked show password for both Password and Password Confirm

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Promo email opt-in (default checked)

  • Validate

    • Email Address

      • Validate onfocusout

        • On validation error

          • Turn border red

          • Display error message:

            • Invalid Email Address

            • This Email Address is already registered, Sign-in instead

      • Validation rules

        • Must be a valid email address format

        • Must be not yet registered

    • Password

      • Display validation rules on onfocusin

      • Validate onkeyup

        • Display when validation rules satisfied

      • Validate onfocusout

        • On validation error

          • Turn border red

          • Display error message:

            • Invalid Password

      • Validation rules

        • Min 10 characters

        • Min 1 lowercase letter

        • Min 1 uppercase letter

        • Min 1 number

        • Special characters optional

    • Password Confirm

      • Validate onkeyup

        • On validation error

          • Turn border for Password and Password Confirm red

          • Display error message:

            • Passwords do not match

      • Validation rules

        • Must match Password

  • Display

    • NEXT link

      • On click display PIN Code Page

    • Log-in link

      • On click display Log-in Page

PIN Code

  • Collect

    • PIN Code

  • Validate

    • PIN Code

      • Validate onkeyup

        • No action if non-digit entered

      • Validation rules

        • Exactly 6 digits

  • When 6 digits entered display PIN Code Confirm Page

  • Display

    • Back link

      • On click display Email & Password Page

PIN Code Confirm

  • Collect

    • PIN Code Confirm

  • Validate

    • PIN Code Confirm

      • Validate onkeyup

        • No action if non-digit entered

        • On validation error

          • Turn ••••••• red

          • Display link to PIN Code Page

      • Validation rules

        • Must match PIN Code

  • When 6 digits entered and match display Account Confirm Page

  • Display

    • Back link

      • On click display PIN Code Page

Account Confirm

  • Display on Show Account Information click

    • Email Address

    • Password

    • PIN

  • Display

    • CREATE ACCOUNT link

      • On click display Account Creation Confirmation Page and create account

Create account

Account Create Confirmation

  • Reload to Home Page Authenticated after 3 seconds or after account is created whichever is last.

  • Force Verify Email Blocker Page after this step

Secret Questions

  • Overlay Secret Questions pop-up is shown only immediately after Account Creation

  • Collect

    • Secret Question 1

    • Secret Question 2

  • Validate

    • Secret Question 1

      • Validate on NEXT click

        • On validation error

          • Turn border for Secret Question 1 red

          • Display error message:

            • Please select question

        • Validation rules

          • Secret Question 1 selected

      • Secret Question 2

        • Validate on NEXT click

          • On validation error

            • Turn border for Secret Question 2 red

            • Display error message:

              • Please select question

        • Validation rules

          • Secret Question 2 selected

  • Display

    • NEXT link

      • On click display Secret Questions Answer Page

    • Skip link

      • On click display Secret Questions Skip Confirm Page

    • X link

      • On click display Secret Questions Skip Confirm Page

  • List of questions - as provided by EDGE API

Secret Questions Skip Confirm

  • Display

    • SKIP ANYWAY link

      • On click show Home Page Authenticated Page with Secret Questions Skipped Warning

    • X link

      • On click show Home Page Authenticated Page with Secret Questions Skipped Warning

Secret Questions Answer

  • Collect

    • Secret Question 1 Answer

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Secret Question 2 Answer

      • X appears when first character is entered

        • When licked it clears the content and disappears

  • Validate

    • Secret Question 1 Answer

      • Validate onfocusout

        • On validation error

          • Turn border for Secret Question 1 Answer red

          • Display error message:

            • Please enter at least 3 characters

        • Validation rules

          • Min 3 characters

    • Secret Question 2 Answer

      • Validate onfocusout

        • On validation error

          • Turn border for Secret Question 2 Answer red

          • Display error message:

            • Please enter at least 3 characters

        • Validation rules

          • Min 3 characters

  • Display

    • NEXT link

      • On click record secret questions and answers and display Home Page Authenticated Page with Account Created Notice

    • Skip link

      • On click show Secret Questions Skip Confirm Page

    • X link

      • On click show Secret Questions Skip Confirm Page

Record Secret Questions and Answers

Home Page Authenticated Page with Account Created Notice

  • This notice is shown only once, when the user is lands on the Home Page directly after registration.

Home Page Authenticated Page with Secret Questions Skipped Warning

  • This notice is shown continuously on the Home Page until on of the 2 things happen:

    • User sets up Password Recovery

    • User clicks

Sign-in

Visual

Functionality

Sign-in

  • Collect

    • Email Address

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Password

      • By default password is displayed as •••••••

      • When 👁 clicked show Password

      • X appears when first character is entered

        • When licked it clears the content and disappears

  • Validate

    • Email Address

      • Validate onfocusout

      • On validation error

        • Turn border for Email red

        • Display error message:

          • Invalid Email Address

      • Validation rules

        • Must be a valid email address format

    • Log-in

      • Validate on Sign In click

      • On validation error

        • Turn border for Email and Password red

        • Display error message:

          • Invalid Email Address or Password

      • Validation rules

        • Email/Password match

  • Display

    • Sign In link

      • On click display Home Page Authenticated Page

    • Forgot Password link

      • On click display Forgot Password Page

    • Create Account link

      • On click display Create Account → Email & Password Page

Forgot Password

  • Display

    • Ok link

      • On click display Sign-in Page

    • X link

      • On click display Sign-in Page

Sign-in with PIN

  • This page is displayed by default if user has been logged automatically due to inactivity and clicks Sign-in or tries to access a page which requires log-in.

  • It is not shown when user logs out by clicking Sign-out button.

  • Collect

    • PIN

Verify Email Blocker

Visual

Functionality

Initial account creation

  • This page is displayed after user creates a new account and it cannot removed (do not show the X)

  • If users logs-in again and email has not been verified, show this page

  • Display

    • Links

      • Send Again

        • On click

          • Re-sends Verification Email

Email change

  • This page is displayed after changes email and it cannot removed

  • If users logs-in again and email has not been verified, show this page

  • Display

    • Links

      • Revert to Original

        • On click

          • Cancel the email change and revert to the original email and display Settings Main Page

2AF Approval

Visual

Functionality

Sign-in blocked by 2FA

Approve 2FA Sign-in

  • This page is displayed on the known device when 2FA is enabled. It takes over a screen once user logs in or transitions to another page while signed in.

  • Display

    • Links

      • It was me…

        • On click

          • Add new device IP to 2FA list

      • Not me… or X

        • On click

          • Do not show this request anymore

Password Recovery

Visual

Functionality

Landing

  • This page is displayed when link in Password Recovery email link is clicked

  • Display

    • Secret questions

    • Confirm

      • On click

        • Change password and redirect to Sign-in Page

    • Cance

      • On click

        • Display Home Page

  • Collect

    • Secret Answers

    • New password (not yet on UX)

  • Validate

    • Secret Answers

      • On Confirm click

        • On validation error

          • Turn border red

          • Display error message:

            • Invalid Answer

    • New Password

      • Validate onfocusout

        • On validation error

          • Turn border red

          • Display error message:

            • Invalid Password