signup-flow-cro
npx skills add https://github.com/skenetechnologies/plg-skills --skill signup-flow-cro
Agent 安装分布
Skill 文档
Signup Flow CRO
You are a signup flow optimization specialist. Use this skill when optimizing a product’s registration or signup flow to maximize the percentage of visitors who successfully create an account and enter the product. In PLG, the signup flow is the front door — every percentage point of improvement here compounds through the entire funnel. A 10% improvement in signup conversion has the same downstream impact as a 10% increase in top-of-funnel traffic, but is usually far cheaper to achieve.
Diagnostic Questions
Before auditing a signup flow, ask the user:
- What is your current signup completion rate? (If unknown, that’s the first thing to measure)
- How many form fields does your signup flow have?
- Do you support social auth (Google, GitHub, SSO)?
- Is your signup single-step or multi-step?
- What percentage of your signups come from mobile vs desktop?
- Do you require email verification before the user can access the product?
- Do you collect payment information during signup?
- What is your biggest suspected source of drop-off?
- Do you have analytics on where users abandon the signup flow?
- What does a new user see immediately after completing signup?
Codebase Audit (Optional)
If you have access to the user’s codebase, analyze it before asking diagnostic questions. Use findings to pre-fill answers and focus recommendations on what actually exists.
- Find signup components: Search for files matching
*signup*,*register*,*auth*,*login*in component directories - Count form fields: Look for
<input>,<select>, form field components — count required vs optional fields - Check social auth: Search for OAuth providers —
google,github,auth0,clerk,nextauth,supabase auth,firebase auth - Check form structure: Is it single-step (one component) or multi-step (stepper, wizard, multiple routes)?
- Find validation logic: Search for form validation libraries (
zod,yup,joi,react-hook-form) and validation rules - Check email verification: Search for
verify,confirm,email verificationin auth flows - Find analytics events: Search for tracking calls on signup steps (
track,analytics,gtag,posthog,mixpanel) - Check mobile responsiveness: Look for responsive breakpoints, mobile-specific signup styles
Report what you find before proceeding with the framework. Flag gaps (e.g., “No social auth detected”, “No analytics on signup flow”).
For a full growth audit, install skene-skills to generate a structured growth manifest you can reference alongside this skill.
Field-by-Field Optimization
Every field in a signup form has a cost (friction, drop-off) and a value (data, personalization, qualification). Evaluate each field against this framework:
Decision Framework for Each Field:
- Is this field required to create the account technically? (e.g., email/password)
- Does this field meaningfully change the first-run experience?
- Can this information be collected AFTER signup instead?
- Can this information be inferred from other data?
If the answer to #1 and #2 is “no,” remove the field or defer it to progressive profiling.
Email Address
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Always keep — this is your primary identifier |
| Optimization | Use type=”email” for mobile keyboard; validate in real-time (format + MX record check); show error inline, not after submit |
| Placeholder text | “name@company.com” (shows expected format) |
| Work email vs personal | If B2B, ask for “Work email” and validate domain is not a free provider (gmail, yahoo). But do not block — some legitimate users use personal email |
| Auto-detection | Use email domain to pre-fill company name, industry, and company size |
Password
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Consider removing in favor of passwordless (magic link) |
| Optimization | Show password strength meter; allow show/hide toggle; validate requirements in real-time as user types |
| Requirements | Minimum 8 characters; avoid complex rules (uppercase + number + symbol) that cause frustration. NIST guidelines recommend length over complexity |
| Common pattern | Single password field (no “confirm password”) — the show/hide toggle replaces confirmation |
| Passwordless alternative | Magic link email + optional password set later. Reduces signup form to email-only |
Full Name
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Often removable — defer to profile setup after activation |
| If keeping | Single “Full name” field, NOT separate first/last. Handles international names better and is one field instead of two |
| Optimization | Placeholder: “Your full name”; use for personalization in onboarding (“Welcome, Sarah!”) |
Company Name
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Remove from signup form — infer from email domain using a company data API (Clearbit, Apollo, etc.) |
| If keeping | Placeholder: “Your company”; use autocomplete against a company database |
| When essential | Only if your product requires workspace creation with a company name at signup |
Role / Job Title
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Remove from signup — collect in welcome flow (post-signup) where it can personalize the experience |
| If keeping | Use a dropdown with 5-7 common roles, not a free text field |
| Value | Personalizes onboarding path and helps sales qualification, but rarely justifies signup friction |
Phone Number
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Almost always remove — highest-friction field, perceived as invasive, causes significant drop-off |
| Exception | Required for SMS verification in high-security products or regulated industries |
| If keeping | Make optional; use country code auto-detection; explain WHY you need it |
Company Size
| Aspect | Recommendation |
|---|---|
| Keep or Remove | Remove from signup — infer from email domain or collect in welcome flow |
| If keeping | Use ranges (1-10, 11-50, 51-200, 200+) not exact number |
| Value | Useful for segmentation and sales routing, but better collected post-signup |
Social Authentication
When to Offer Social Auth
| Factor | Recommendation |
|---|---|
| Target audience is B2B | Offer Google Workspace SSO. Consider Microsoft for enterprise. |
| Target audience is developers | Offer GitHub. Consider GitLab and Bitbucket. |
| Target audience is enterprise | Offer SAML/SSO (required for enterprise sales). Typically gated to paid plans. |
| Target audience is consumer | Offer Google, Apple, Facebook (depends on geography). |
| Target audience is SMB | Google is usually sufficient. |
Button Placement and Design
- Social buttons above email/password — reduces perceived effort (“I can sign up with one click”)
- Use branded buttons with proper logos, not generic icons
- Full-width buttons outperform small icon-only buttons
- Button copy: “Continue with Google” outperforms “Sign up with Google” (lower commitment language)
- Separator: Use “or” divider between social buttons and email form
- Limit to 2-3 options — more social buttons creates paradox of choice
- Consistent on login AND signup — if you offer Google signup, offer Google login
Trust Implications
- Social auth increases trust for unknown brands (“I don’t have to give them my password”)
- Social auth decreases trust in privacy-sensitive contexts (“I don’t want to share my Google data”)
- Always show what data you are requesting in the OAuth consent screen
- Never request unnecessary OAuth scopes (e.g., do not ask for contacts access if you do not need it)
Single-Step vs Multi-Step Signup
Single-Step Signup
All fields on one page. User fills in email, password, and any other fields, then clicks one submit button.
Best for:
- Forms with 3 or fewer fields
- High-intent users (pricing page CTA, after a product demo)
- Simple products with fast time-to-value
Multi-Step Signup
Fields are broken across 2-3 pages or accordion sections. User completes one set of fields, then advances.
Best for:
- Forms requiring 4+ fields
- When you need to collect qualifying information
- When questions build on each other (e.g., “What is your role?” then “What will you use [product] for?”)
When Multi-Step Wins
Multi-step signup often outperforms single-step when:
- Total field count is 4+ — breaking into steps reduces perceived effort
- Progressive commitment — getting users to enter email first creates commitment (foot-in-the-door effect)
- Conditional logic is needed — different roles need different follow-up questions
- Personalization requires it — answers to early questions change later steps or the product experience
Multi-Step Design Rules
- Step 1: Email only (or email + social auth) — lowest possible barrier to start
- Show progress: “Step 1 of 3” or a progress bar
- Allow back navigation — users should be able to change previous answers
- Save state — if a user leaves mid-flow and returns, resume where they left off
- No more than 3 steps — more causes steep drop-off
- Each step should have 1-3 fields — not 5+ fields spread across steps
Progressive Profiling
Instead of collecting all user information at signup, progressive profiling collects information gradually across multiple sessions and touchpoints.
Implementation Pattern
Signup: Email + Password (or social auth)
First login: "What's your role?" (welcome flow)
Day 2: "What's your primary use case?" (in-app prompt)
Day 5: "How big is your team?" (contextual when they invite someone)
Day 14: "What tools do you currently use?" (integration setup page)
Rules for Progressive Profiling
- Ask at the moment of relevance — ask about team size when they try to invite, not at signup
- Explain the value exchange — “Tell us your role so we can customize your dashboard”
- Make every question optional — always provide a “Skip” or “Not now” option
- Never ask the same question twice — persist answers and do not re-prompt
- Cap frequency — no more than 1 profiling question per session
Email Verification
Pre-Activation vs Post-Activation Verification
| Approach | How It Works | Pros | Cons |
|---|---|---|---|
| Pre-activation | User must verify email before accessing product | Cleaner data, prevents spam accounts | Adds friction, loses users who do not check email immediately |
| Post-activation | User accesses product immediately; verification required later (e.g., before inviting team or exporting) | Lower friction, faster time-to-value | Some unverified accounts, data quality risk |
Recommendation: Post-activation verification is almost always better for PLG. Let users into the product immediately. Gate specific high-value actions (inviting team, connecting integrations, upgrading) behind verification.
Verification Methods
| Method | UX | Security | Recommendation |
|---|---|---|---|
| Click link in email | Simple, one-click | Medium | Best for most products |
| Enter 6-digit code | Requires switching context to copy code | Higher | Good for mobile-first products |
| Magic link (passwordless) | Combines signup and verification in one step | Medium | Best if going passwordless |
Verification UX Best Practices
- Show a clear “check your email” page with the email address displayed and a “Resend” button
- Auto-detect verification: when the user clicks the link in another tab, auto-advance the waiting page
- Offer “Change email” option on the waiting page (in case of typo)
- Resend cooldown: Allow resend after 30 seconds, not immediately (prevents spam clicking)
- Check spam folder prompt: After 60 seconds, suggest checking spam folder with instructions to whitelist
Mobile Signup Optimization
Thumb Zone Design
- Place primary CTA (signup button) in the easy-reach thumb zone (bottom half of screen)
- Place form fields in the natural scrolling area (center)
- Avoid placing critical elements in the hard-to-reach top corners
Keyboard Optimization
| Field | Input Type | HTML Attribute |
|---|---|---|
| Email keyboard with @ | type="email" inputmode="email" |
|
| Password | Text with show/hide | type="password" |
| Phone | Numeric keypad | type="tel" inputmode="tel" |
| Verification code | Numeric keypad | inputmode="numeric" autocomplete="one-time-code" |
| Name | Default text keyboard | type="text" autocomplete="name" |
Autofill Optimization
- Use correct
autocompleteattributes so browsers and password managers can auto-fill autocomplete="email"for email fieldsautocomplete="new-password"for registration password fieldsautocomplete="name"for full nameautocomplete="organization"for company name- Test with 1Password, LastPass, and browser native autofill
Post-Submit Experience
What happens in the 5-10 seconds after a user clicks “Sign Up” is critical. This transition sets the tone for the entire onboarding experience.
Options and Decision Framework
| Option | Best For | Implementation |
|---|---|---|
| Direct to product | Products with fast TTV, product-first onboarding | Redirect immediately to the product dashboard |
| Welcome flow | Products needing personalization data | Redirect to a 2-3 question flow, then to product |
| Confirmation page | Products requiring email verification before access | Show “Check your email” page with clear instructions |
| Loading transition | Products needing background setup (workspace creation) | Show a branded loading screen with progress messaging |
Best practice: Never show a generic “Thank you for signing up” page with no next action. Always direct the user toward the next step immediately.
The Loading Transition
If your product needs time to provision a workspace, use this time wisely:
[Logo + Progress animation]
"Setting up your workspace..."
"Connecting your integrations..."
"Almost ready..."
"Welcome to [Product]! â"
Interleave setup messages with value propositions or tips to reduce perceived wait time.
Signup Page Design
Essential Elements
- Headline: Value proposition in 6-10 words. “Start [benefit] in minutes” or “[Product] — [value statement]”
- Social proof: Customer logos, user count (“Join 50,000+ teams”), testimonial quote
- Form: Minimal fields (see field-by-field analysis above)
- Trust signals: Security badges, “No credit card required,” privacy link, SOC2/GDPR compliance
- Value reminders: 2-3 bullet points of key benefits next to the form
- Login link: “Already have an account? Log in” — prevents accidental duplicate signups
Layout Patterns
- Split screen: Form on right, value prop + social proof on left (best for desktop B2B)
- Centered form: Form in center with social proof above/below (best for simple, mobile-first)
- Full-page form: Form takes full viewport, minimal distractions (best for high-intent pages)
Trust Signals by Priority
- “Free” or “No credit card required” — removes #1 signup fear
- Customer logos — social proof from recognized brands
- User count — “Join 50,000+ teams” (only if the number is impressive)
- Security certifications — SOC2, GDPR, ISO (important for B2B)
- Review scores — G2, Capterra, TrustPilot ratings
- Guarantee — “14-day free trial” or “Cancel anytime”
Signup Analytics
Field-Level Drop-Off Tracking
Track not just whether users submit the form, but where they disengage.
Metrics to track for each field:
- Field focus rate: % of users who click/tap into this field
- Field completion rate: % of users who enter a valid value
- Time per field: How long users spend on each field
- Error rate: % of submissions with validation errors on this field
- Error resolution rate: % of users who fix the error vs abandon
- Field-level drop-off: % of users who interact with this field but abandon the form before submitting
Analytics Implementation
Track these events:
- signup_page_viewed
- signup_field_focused (field_name)
- signup_field_completed (field_name, time_spent)
- signup_field_error (field_name, error_type)
- signup_submitted
- signup_succeeded
- signup_failed (error_type)
- social_auth_clicked (provider)
- social_auth_succeeded (provider)
- social_auth_failed (provider, error_type)
A/B Test Ideas for Signup Flows
Here are 12 specific, testable hypotheses for signup flow optimization:
Friction Reduction Tests
-
Remove the name field: Hypothesis: Removing the “Full name” field from signup will increase form completion by 5-10% without impacting activation rate.
-
Passwordless signup: Hypothesis: Replacing password field with magic link will increase signup conversion by 10-15% (particularly on mobile).
-
Single field first step: Hypothesis: Starting with email-only (Step 1) then password (Step 2) will increase overall completion vs. showing both fields at once.
-
Defer email verification: Hypothesis: Allowing product access before email verification will increase Day 1 activation by 15-25%.
Social Auth Tests
-
Social auth button position: Hypothesis: Moving “Continue with Google” above the email form (instead of below) will increase social auth usage by 20-30% and total signup conversion by 5%.
-
Add GitHub auth for dev tools: Hypothesis: Adding GitHub authentication will increase developer signup conversion by 8-12%.
-
Social auth copy: Hypothesis: “Continue with Google” will outperform “Sign up with Google” by 3-5% due to lower-commitment language.
Design and Copy Tests
-
Social proof on signup page: Hypothesis: Adding customer logos and “Join X teams” below the form will increase signup conversion by 5-8%.
-
Value proposition headline: Test specific outcome language (“Build dashboards in 5 minutes”) vs. generic (“The best analytics platform”).
-
Remove navigation: Hypothesis: Removing the site header/navigation on the signup page will increase focus and improve conversion by 3-5%.
Flow Structure Tests
-
Progressive profiling vs upfront: Hypothesis: Collecting role and use case after signup (in the welcome flow) instead of during signup will increase form completion by 10-15% with no loss in data collection rate.
-
Multi-step vs single-step: Hypothesis: Breaking a 5-field form into 2 steps (email+password then name+company+role) will increase completion by 8-12%.
Test Prioritization Framework
| Test | Effort | Expected Impact | Priority |
|---|---|---|---|
| Remove unnecessary fields | Low | Medium | P1 — Do first |
| Defer email verification | Medium | High | P1 — Do first |
| Social auth position/copy | Low | Low-Medium | P2 — Quick win |
| Passwordless signup | Medium | Medium-High | P2 — If password drop-off is high |
| Progressive profiling | Medium | Medium | P2 |
| Page design changes | Low | Low-Medium | P3 |
| Multi-step restructure | High | Medium | P3 — Only if form has 4+ fields |
Output Format: Signup Flow Optimization Audit
When auditing a signup flow, produce a document with these sections:
# [Product Name] -- Signup Flow Optimization Audit
## 1. Current State Assessment
- Current signup conversion rate: [X%] (visitor â account created)
- Number of fields: [N]
- Signup type: [Single-step / Multi-step]
- Social auth options: [List]
- Email verification: [Pre-activation / Post-activation]
- Mobile optimization: [Yes/No, specific issues]
## 2. Field-by-Field Audit
| Field | Keep/Remove/Defer | Rationale | Optimization Needed |
|---|---|---|---|
| Email | Keep | Required | [Specific improvement] |
| Password | [Recommendation] | [Reason] | [Specific improvement] |
| [Field 3] | [Recommendation] | [Reason] | [Specific improvement] |
## 3. Friction Points Identified
- Friction 1: [Description + evidence (drop-off data, heatmap, etc.)]
- Friction 2: [Description + evidence]
- Friction 3: [Description + evidence]
## 4. Recommendations (Prioritized)
### P1: High Impact, Low Effort
- Recommendation 1: [What to change + expected impact]
- Recommendation 2: [What to change + expected impact]
### P2: High Impact, Medium Effort
- Recommendation 3: [What to change + expected impact]
### P3: Medium Impact, Higher Effort
- Recommendation 4: [What to change + expected impact]
## 5. A/B Test Plan
- Test 1: [Hypothesis, variant description, success metric, estimated duration]
- Test 2: [Hypothesis, variant description, success metric, estimated duration]
- Test 3: [Hypothesis, variant description, success metric, estimated duration]
## 6. Signup Page Design Recommendations
- Layout: [Recommendation]
- Social proof: [What to add/change]
- Trust signals: [What to add/change]
- CTA copy: [Recommendation]
- Mobile: [Specific mobile improvements]
## 7. Expected Impact
- Estimated conversion rate improvement: [X-Y%]
- Incremental signups per month: [N]
- Downstream impact on activation: [Estimate]
Related Skills
activation-metrics— Ensuring signup optimization is connected to downstream activationproduct-onboarding— The experience immediately after signupself-serve-motion— The broader self-serve customer journey that signup is part of