ATLAS
V2 Redesign
Auth & Onboarding V2

Redesigned flow: lightPrimary backgrounds, social-first auth, combined Welcome+Role, deepBlue for posters, terracotta for contractors.

Why V2 Exists

The Problem

V1 puts 4 screens between install and sign-up: splash → carousel (3 slides) → role selection → then finally the sign-up form. Every extra screen is a drop-off cliff. Industry benchmarks show 20–30% abandonment per onboarding screen — so by screen 4, you’ve lost half your installs before they even create an account.

Social login (Google/Apple) was buried below the email form behind an "or" divider. 73% of users prefer social sign-in on mobile — hiding it below the fold kills the fastest path to conversion.

And the entire welcome+carousel was deepBlue-on-deepBlue. No visual warmth, no brand personality, and no contrast to draw the eye to CTAs.

What V2 Fixes

4
Screens removed
1
Tap to sign-up
1st
Social login position
1 Welcome + Role Selection
2 Carousel
3 Account Creation
4 Sign In & Recovery
5 Email Verification
6 Poster Profile Setup
7 Contractor Profile Setup

Step 1 — Welcome + Role Selection (Combined)

Welcome + Role — Homeowner
9:41
3 Bids. No Spam. No Games.
I am a…
Homeowner
Post your project and get 3 competitive bids from vetted local contractors.
Exclusive leads Escrow protection Free to post
Contractor
No lead sharing Fair 8.5% fee Your schedule
Already have an account? Sign In

V2: Welcome + Role = 1 screen. Poster CTA = deepBlue (per Bible). Logo at 96px (hero).

WelcomeRoleScreen — Sets userRole in Clerk metadata via useMutation(api.users.setRole).

useAuth().isSignedIn → skip to tabs. CTA text & color change on selection.

Welcome + Role — Contractor
9:41
3 Bids. No Spam. No Games.
I am a…
Homeowner
Exclusive leads Escrow protection Free to post
Contractor
Bid on local jobs, build your portfolio, and grow your business your way.
No lead sharing Fair 8.5% fee Your schedule
Already have an account? Sign In

V2: Contractor CTA = terracotta (btn-secondary). Role colors swap correctly.

WelcomeRoleScreen — Alternate state.

useMutation(api.users.setRole) → route to sign-up

Step 2 — Carousel (Optional Guided Path)

Carousel — Slide 1
9:41
Skip
Post Your Job
Snap a photo, describe what you need, and post it in under 2 minutes.

V2: lightPrimary bg. Icons = ic-A (deepBlue outline). CTA = btn-primary. Skip = midGray.

OnboardingCarousel — 3 swipeable slides, horizontal pager.

PagerView with dot indicators

Carousel — Slide 2
9:41
Skip
Get 3 Fair Bids
Vetted local contractors compete for your job. No spam, no shared leads.

OnboardingCarousel — Slide 2.

Carousel — Slide 3
9:41
Skip
Hire with Confidence
Escrow protection, verified contractors, and transparent pricing every time.

OnboardingCarousel — Final slide. CTA = "Get Started".

onComplete() → navigate to Sign Up

Step 3 — Account Creation (Social First)

Sign Up — Social First
9:41
Create Account
or sign up with email
Marcus
Last name
marcus@example.com
••••••••
Strong password
I agree to the Terms of Service and Privacy Policy
Already have an account? Sign In

V2: Social above email. CTA = btn-primary (deepBlue). Checkbox = deepBlue. Focus = deepBlue. Logo = 52px (medium).

SignUpScreen — Clerk signUp.create() with email strategy.

useSignUp() from @clerk/clerk-expo

Sign Up — Phone Verify
9:41
Verify Phone
+1 (330) 555-0142
or enter code
Enter 6-digit code
Sent to (330) 555-0142
4
8
2
Resend code in 0:42
Use email instead

V2: CTA = btn-primary. OTP cells = deepBlue. Verify = primary + disabled (opacity 0.4). Timer = deepBlue.

PhoneVerificationScreen — Clerk phone_code strategy.

signUp.prepareVerification({ strategy: "phone_code" })

Step 4 — Sign In & Recovery

Sign In — Social First
9:41

V2: Social above email. CTA = btn-primary. Logo = 52px (medium).

SignInScreen — Clerk signIn.create() with email or phone.

useSignIn() → setActive({ session })

Forgot Password
9:41
Reset Password
Forgot Your Password?
Enter your email and we’ll send you a link to reset your password.
marcus@example.com
Back to Sign In

V2: Hero = ic-E (white fill + deepBlue border). CTA = btn-primary. Back arrow = deepBlue.

ForgotPasswordScreen — Clerk password_reset flow.

signIn.create({ strategy: "reset_password_email_code" })

Reset — Success
9:41
Reset Password
Check Your Email
We sent a password reset link to
Didn’t receive it? Resend
Back to Sign In

V2: CTA = btn-primary. ic-H (success) for checkmark.

ForgotPasswordScreen — Success state after email sent.

Linking.openURL("mailto:") for "Open Email App"

Step 5 — Email Verification

Email Verification
9:41
Verify Email
Check Your Inbox
Verification sent to
marcus@example.com
Tap the link in your email to verify your account. Check your spam folder if you don’t see it.
Didn’t receive it? Resend in 0:58
Change email address

V2: Top-aligned (not centered). Email in highlight card. Clear instruction text. Hero = ic-E. CTA = deepBlue. Header bar added for navigation.

EmailVerificationScreen — Shown after email signup.

signUp.prepareVerification({ strategy: "email_code" })

Email — Verified
9:41
Email Verified!
Your email has been confirmed. Let’s set up your profile to get started.

V2: CTA = btn-primary. ic-H (success).

EmailVerificationScreen — Deep link callback confirms email.

signUp.attemptVerification() → setActive() → profile setup

Step 6 — Poster Profile Setup

Poster Setup — Step 1
9:41
Profile Setup
Step 1 of 3 — Your Property
Profile Photo
Tap to add photo
Property Details
1247 Maple Ave, Akron
1247 Maple Ave, Akron, OH 44301
1247 Maple Dr, Cuyahoga Falls, OH 44221
Single Family Condo Townhouse Multi-Family Commercial

V2: Card sections group related fields. "How did you hear" removed (covered by Acquisition Source Picker). deepBlue header + CTA. Focus = deepBlue. lightPrimary body.

PosterProfileSetup — Google Places autocomplete for address.

useMutation(api.users.posters.updateProfile) + api.users.posterProperties.create

Step 7 — Contractor Profile Setup

Contractor Setup — Step 1
9:41
Business Setup
Step 1 of 3 — Business Details
Add business photo
Summit City Roofing LLC
e.g. OHC-123456
12 years
Roofing Siding Plumbing Electrical HVAC Painting Landscaping General
44301 44302 44303 Add more...

Contractor = terracotta throughout (header, CTA, chips, focus, tags). Per Bible.

ContractorProfileSetup — Multi-select chips for service categories.

useMutation(api.users.contractors.updateProfile) + serviceArea array

Step 8 — Enhanced Auth & Acquisition

Sign In — Google OAuth
9:41

V2: Google = btn-outline (deepBlue border). CTA = btn-primary.

SignInScreen — Google OAuth via Clerk. Falls back to email/password. Deep-linked from magic link invitations.

useSignIn() → oauth_google strategy → setActive({ session })

Acquisition Source Picker
9:41
How did you hear about us?
Google Search
Social Media
Friend/Family
Contractor Referral
Door Hanger
Mailer
Yard Sign
Event/Trade Show
Radio/TV
Online Ad
Other

V2: Selection = deepBlue border (card.selected). CTA = btn-primary. Icons = deepBlue.

AcquisitionSourcePicker — Tracks acquisition source for growth analytics. 11 options mapped to marketing channels.

useMutation(api.users.updateAcquisitionSource) → acquisitionSource field

Role-Aware Tab Selector
9:41

V2: Social above form. Homeowner tab = deepBlue fill. CTA = btn-primary.

SignUpScreen — Role-aware tab selector. Tab choice sets intendedSetupRole for post-auth routing.

useSignUp() → unsafeMetadata.intendedSetupRole = "poster" | "contractor"

Data Architecture

Authentication (Clerk)

  • useSignUp() — Handles email/phone registration with Clerk
  • useSignIn() — Email or phone login, social OAuth (Google, Apple)
  • useAuth() — Session state, isSignedIn, userId
  • useUser() — Current user profile from Clerk
  • Strategies: email_code, phone_code, oauth_google, oauth_apple, reset_password_email_code
  • Deep linking: exp:// scheme for email verification callbacks

User Creation

  • Role sets publicMetadata.role via users.setRole
  • Poster: posterUsers + posterProfile + posterProperties
  • Contractor: contractorUsers + contractorProfile
  • Welcome email via SendGrid + Slack #growth_feed alert

Onboarding Progress

  • onboardingProgress: { userId, role, step, completedSteps[] }
  • 3 steps per role. Skip allowed — reminder after 24h
  • useOnboarding() hook for step nav

Schema Tables

  • posterUsers — clerkId, email, name, phone
  • posterProfile — avatar, preferences, referralSource
  • posterProperties — address, propertyType, lat/lng
  • contractorUsers — clerkId, email, name, phone
  • contractorProfile — businessName, license, categories, serviceArea

Hooks

  • useAuth() — Clerk session state, isSignedIn, isLoaded
  • useOnboarding() — Steps completed, current step, next() / back()
  • useWarmup() — Preloads user data after auth for instant navigation
  • useDeepLinking() — Handles email verification callback URLs

V2 Navigation

  • (auth)/welcome-role → (auth)/onboarding (optional carousel)
  • (auth)/sign-up → (auth)/verify-email → (auth)/profile-setup
  • (auth)/sign-in → (auth)/forgot-password
  • After setup: (poster)/ or (contractor)/ tab navigator
  • Guard: isSignedIn ? tabs : auth via Expo Router layout
  • Social OAuth on every auth screen reduces friction
  • V1: 14 screens to value → V2: 10 screens
Auth & Onboarding V2 — 3Bids ATLAS Prototype — 17 screens — Bible-compliant: deepBlue (poster) / terracotta (contractor)
1 Welcome & Onboarding
2 Sign Up & Verify
3 Profile Setup
Welcome & Role Selection
Welcome & Onboarding
9:41

Welcome Experience & Feature Carousel

Welcome Experience
Welcome Screen
Headline Find trusted contractors
Subhead 3 bids. No spam. No games.
CTA Get Started
Secondary I'm a Contractor
Value Props
Exclusive Leads Never shared with competitors
Transparent Pricing No hidden fees
Verified Pros Background-checked contractors
Feature Carousel
Slide 1 — Post a Job
Title Post Your Job in Minutes
Body Describe what you need, upload photos, set your budget
Visual Phone mockup of job posting form
Slide 2 — Get 3 Bids
Title Compare 3 Verified Bids
Body Real contractors. Real prices. No middleman markup.
Visual Bid comparison cards
Slide 3 — Hire & Pay
Title Hire with Confidence
Body Escrow protection. Pay only when the job is done right.
Visual Contract + escrow flow
Account Creation & Verification
Sign Up & Verify
9:41

Sign Up & Email Verification

Sign Up
Social Sign Up
Google Continue with Google
Apple Continue with Apple
Divider or sign up with email
Email Form Name, email, password fields
Phone Verification
Method SMS verification code
Input 6-digit code
Resend Tap to resend in 30s
Skip Verify later (limited features)
Email Verification
Verification Email
Subject Verify your 3Bids account
Code 6-digit verification
Expiry 24 hours
Resend Available after 60s
Verified State
Status Email verified
Next Step Complete your profile
CTA Continue to Profile Setup
Profile Setup & Completion
Profile Setup
9:41

Poster Profile & Contractor Profile

Poster Profile
Poster Setup
Photo Upload profile photo
Name First & last name
Phone Mobile number
Property Address + type + year built
Contractor Profile
Contractor Setup
Business Company name + license
Trade Primary service category
Coverage Service area radius
Bio About your business
Sign In & Recovery
Sign In Social or email/password
Forgot Password Email reset link
Reset Success Password updated confirmation
1 Onboarding Experience
Onboarding Experience
Onboarding Experience
https://app.3bids.io/onboarding

Welcome to 3Bids

New Account
Overview
Dashboard
Complete welcome to 3bids with real-time data, analytics, and management tools.
Quick Actions
Full desktop layout combines all mobile screens into a dense, actionable dashboard with sidebar navigation, data tables, charts, and management controls.
Web DashboardThis web view consolidates all mobile screens into a single responsive dashboard. Sidebar navigation replaces tab-based mobile flow, with data density optimized for desktop viewport.