Account

  1. New Device Approval

Table of Contents

UX

Click model

https://overflow.io/s/UATMOOXU

https://overflow.io/s/G1KSA64Y

https://overflow.io/s/0827ZZ8U/

UX Assets

https://www.figma.com/file/IupeqfBPpD8SLWGmqI2sXr/New-Dashboard-Authentication?type=design&node-id=0-1&mode=design&t=0CIehCzliCpV6yQi-0

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

Visual

Functionality

Email & Password

  • Collect

    • Email Address

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Email Address Confirm

      • 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 onkeyup

        • Display when validation rules satisfied

      • 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

    • Email Address Confirm

      • Validate onkeyup

        • Display when validation rules satisfied

      • Validate onfocusout

        • On validation error

          • Turn border for Email Address and Email Address Confirm red

          • Display error message:

            • Email Addresses do not match

      • Validation rules

        • Must match Email Address

    • 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

    • Write it down! box

      • Display once email and password validation passed.

    • Create Account link

      • On click

        • Create Account

        • Display Account Create Confirmation

    • Log-in link

      • On click display Log-in Page

Create account

Account Create Confirmation

 

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

  • Once account created

    • If part of Purchase flow

      • Display next step in purchase

    • If part of Create Account flow

      • Display PIN Code Page

Flow variance

 

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

    • Skip

      • On click

        • Display PIN Skip 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 record PIN and display Account Confirm Page

  • Display

    • Back link

      • On click display PIN Code Page

    • Skip

      • On click

        • Display PIN Skip Confirm Page

PIN Skip Confirm

  • Display

    • X

      • Display PIN Code Page

    • Skip

      • On click

        • Display Secret Questions Page

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

Secret Question and Answers Saved

 

  • Display

    • Link

      • Close or X

        • On click

          • Display Home Page Authenticated Page

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

 

  • Copy

    • Password Recovery - You have skipped setting up password recovery. Please make sure to complete this so you do not lose access.

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

    • User sets up Password Recovery

    • User clicks X

Sign-in

Visual

Functionality

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

    • Links

      • Sign-in with Opera

      • Sign-in with Metamask

        • Display only if user has Metamask installed

        • On click Authenticate with Metamask

        • “Want more info…” link

          • On click display overlay.

      • Sign in with Metamask

      • Email/Password Sign In

        • On click display Home Page Authenticated Page

      • Forgot Password

        • On click display Forgot Password Page

      • Create Account

        • 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

Sign Transaction

Visual

Functionality

Visual

Functionality

Sign using password

 

 

Sign using PIN

 

 

New Device Approval

Visual

Functionality

Visual

Functionality

Sign-in blocked by New Device Approval

 

 

Approve New Device Sign-in

 

  • This page is displayed on the known device when New Device Approval 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 New Device Approval list

      • Not me… or X

        • On click

          • Do not show this request anymore

Password Recovery

Visual

Functionality

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

Partial registration recovery

This functionality attempts to recover a mismatch of registrations between EDGE and Dashboard.

  1. User is signing in

    1. No user in Dashboard

      1. If user exists in EDGE and pass match

        1. Automatically create user in Dashboard and log them in

      2. If user exists in EDGE and pass does not match

        1. Display invalid password

    2. User in Dashboard, but not in EDGE

      1. Create user in EDGE with supplied pass

  2. User creates account

    1. No user in Dashboard

      1. User exists in EDGE and pass match

        1. “adopt” the user and continue registration

    2. User in dashboard

      1. No user in EDGE

        1. Create user in EDGE and continue registration