Skip to main content

Recommended UX

At Verified, signup is what we do. We are experts in how to optimize onboarding flows to maximize conversion and give users the best possible experience. We've helped our customers onboard — and delight! — millions of new users.

The recommended UX below is the result of countless hours of research, design, testing, and iteration by our team. It is the UX we use ourselves (for example in our upcoming SDK), and we highly recommend you use it, too.

You Only Need 4 Screens!

This guide may look complicated, and in some ways it is. (Achieving world class UX requires getting many small details right.)

But at its core, this guide is very simple. You only need 4 screens to integrate 1-Click Signup! You probably already have versions of these screens (Phone, Verification Code, Birthday, and Info).

Flow Chart​

important

This flow chart shows 1-Click Signup using our recommended integration type, Non-Hosted. For more information on integration types, see here.

↗️ Open in new tab (for easy zooming)

Screens and Components​

Phone​

Enter Your Phone Number

By entering my phone number, I agree that Verified (Hooli’s service provider) and its vendors may receive my personal info and autofill more info about me, including my social security number.

If your credential requests do not include Social Security Number, you may omit "including my social security number".

Phone​

+1 (_ _ _) _ _ _ - _ _ _ _

  • Primary and error colors
  • Auto focused
  • Opens numeric keyboard
  • Accepts only digits
  • Accepts OS autofill
  • Validates US phone number
  • Auto formats to +1 (NNN) NNN-NNNN (most common US format)
  • Auto submits on 10 digits

Powered by Verified​

  • Green Signup variant
"Powered By Verified" Graphics
Signup
Login
Verify
Apply
Access
AutoFill

Divider​

OR

  • Muted color

Opt Out​

Sign Up Manually Instead

Takes user to Info screen in manual signup (edit) state.

  • Muted color

Error​

That phone number is invalid. Please try again.

Appears when phone number is invalid.

  • Error color

Starting State ↗️ Open in new tab

Error State ↗️ Open in new tab

Verification Code​

Header​

Verify Your Phone Number

Description​

Enter the verification code we texted to {phone}.

  • New line before {phone}
  • Bold {phone}

Verification Code​

  • Primary and error colors
  • Auto focused
  • 6 separate boxes
  • Opens numeric keyboard
  • Accepts only digits
  • Accepts OS autofill
  • Auto submits on 6 digits

Powered by Verified​

  • Green Signup variant
"Powered By Verified" Graphics
Signup
Login
Verify
Apply
Access
AutoFill

Edit​

Edit Phone

Takes user back to phone input.

  • Muted color

Resend​

Resend Code

Sends another SMS with fresh verification code.

  • Muted color
  • Allows for at most 2 resends

Error​

That code didn’t match. Please try again.

Appears when verification code is invalid or expired.

  • Error color

Code Resent​

We sent you a new verification code.

Appears when user clicks resend button.

  • Primary color

Starting State ↗️ Open in new tab

Error State ↗️ Open in new tab

Resent Code State ↗️ Open in new tab

Birthday​

Header​

Enter Your Birthday

Description​

Enter your real birthday, so we can verify you and autofill your info.

Birthday​

_ _ / _ _ / _ _ _ _

  • Primary and error colors
  • “Birthday” not “Birth Date” because the former is friendlier
  • Auto focused
  • Helper:

    MM/DD/YYYY

  • Calendar icon on right opens date picker (which defaults to 08/01/1989)
  • Opens numeric keyboard
  • Accepts only digits
  • Accepts OS autofill
  • Validates format
  • Auto formats to MM/DD/YYYY (most common US format)
  • Auto submits on 8 digits

Powered by Verified​

  • Green Signup variant
"Powered By Verified" Graphics
Signup
Login
Verify
Apply
Access
AutoFill

Error​

That didn’t match our records. Please try again.

Appears when there's a birthday mismatch error (OCE012).

  • Error color

Continue​

Continue Anyway

Appears if either of the following conditions are met:

  1. There have been 3 seconds of inaction (after error).
  2. The user tried a different value than the first value (and also got an error).

Takes user to manual signup.

If the user tries the same value again, auto continue them.

  • Muted color

Starting State ↗️ Open in new tab

Error State ↗️ Open in new tab

Info​

Open Modal​

?

Appears only for 1-Click Signup, not manual signup.

Opens informational modal.

  • Muted color

Close Modal​

X

Appears only for 1-Click Signup, not manual signup.

Closes informational modal.

  • Muted color
  • Clicking anywhere outside the modal should also close it

Informational​

Verified autofills your info from trusted sources so you don’t have to enter it manually. It’s fast, safe, and secure.

Appears only for 1-Click Signup, not manual signup.

  • Graphic
  • Lock icon with:

    Protected with bank level encryption

Header​

If in view or edit state:

Confirm Your Info

If in manual signup state:

Manual Signup

Description​

If in view or edit state:

Make sure everything is accurate.

If in manual signup state:

Enter your info below.

Powered by Verified​

  • Green Signup variant
"Powered By Verified" Graphics
Signup
Login
Verify
Apply
Access
AutoFill

Appears only in the 1-Click Signup states.

Back​

Back to 1-Click Signup

Appears only in the manual signup state, if the user gets there by clicking the opt out button on the phone screen.

The user can also get to the manual signup state by clicking the continue button on the birthday screen or by being auto continued on that screen. In those cases, this back button should not appear.

Takes user back to phone screen.

  • Muted color

First Name​

First Name

Appears in view state.

Last Name​

Last Name

Appears in view state.

Address​

Address

Appears in view state.

Two lines:

  1. {Address Line 1}, {Address Line 2}
  2. {City}, {State} {ZIP Code}

If multiple values are available:

  • Dropdown

If only one value is available:

  • Static text

Birthday​

Birthday

Appears in view state.

  • “Birthday” not “Birth Date” because the former is friendlier.

SSN​

SSN

Appears in view state.

  • “SSN” not “Social Security Number” for compactness.

Edit​

Edit

Switches from view to edit state.

The entire data display area should be clickable as the Edit button, not just the button itself.

  • Muted color

First Name​

Appears in edit state.

  • Clear ("X") button on right side that appears if there's any value

Last Name​

Appears in edit state.

  • Clear ("X") button on right side that appears if there's any value

Address​

Appears in edit state.

  • Uses value selected in dropdown (from view state), if multiple values are available
  • Has clear ("X") button on right side that appears if there's any value
  • Uses third party service (e.g. Google Places API) to show autofill options when the user types
  • Expands to show full value (without Address Line 2), in two lines:
  1. {Address Line 1}, {Address Line 2}
  2. {City}, {State} {ZIP Code}

Line 2​

  • Has value {Address Line 2} if it exists
  • Helper:

    Apt, Unit, etc.

Birthday​

_ _ / _ _ / _ _ _ _

  • “Birthday” not “Birth Date” because the former is friendlier
  • Helper:

    MM/DD/YYYY

  • Calendar icon on right opens date picker (which defaults to 08/01/1989)
  • Opens numeric keyboard
  • Accepts only digits
  • Accepts OS autofill
  • Validates format
  • Auto formats to MM/DD/YYYY (most common US format)

Social Security Number​

_ _ _ - _ _ - _ _ _ _

  • “Social Security Number” not “SSN” (unlike view state — see above) for clarity
  • Opens numeric keyboard
  • Accepts only digits
  • Validates format
  • Auto formats to •••-••-NNNN (most common US format)
    • Masks first 5 digits, server side not client side
  • If starting with value:
    • If user starts to edit (by deleting one character), clear entire value

Accuracy Confirmation​

By clicking “Confirm”, I agree that the info above is accurate.

  • Muted color

Confirm​

Confirm

Submits form with user's info.

  • Primary color

View State ↗️ Open in new tab

Modal State ↗️ Open in new tab

Edit State ↗️ Open in new tab

Manual Signup State ↗️ Open in new tab