Multi-Step Registration Flow

UX case study focused on improving a multi-step registration and onboarding flow to reduce user friction.

Registration Flow · Form UX · Guided User Flow

YHC Visitor Landing Page Two-Step Wireframe Concept Design

Redesigning a college visitation landing page to reduce scrolling friction and improve conversion by aligning the form with visual content.

Project Information

  • Category :UX Design
  • Project Type :Admissions Landing Page
  • Platform :Web
  • Role :UX & Front-End Designer
  • Focus :Registration Flow Optimization

Overview

This project focused on improving a college visitation registration experience by restructuring a dense, single-step form into a guided, two-step flow aligned with supporting video content.

Original Layout

Original single-step registration layout design

  • Visual imbalance between video and form columns
  • Unnecessary vertical scrolling
  • Reduced sense of structure across the page

UX Approach: Reducing Scroll & Cognitive Load

  • Split the form into two guided steps
  • Introduced a visible progress indicator
  • Aligned CTAs with each step
  • Added a back option for easy review

Interaction Flow: Guided Progression

  1. Student completes Step 1
  2. Progress indicator highlights position
  3. CTA advances to Step 2
  4. Registration CTA appears in final step
  5. Back button allows review

Outcome

Dividing the form into guided steps reduced overall page height, eliminated unnecessary scrolling, and created a more cohesive layout across devices.

Results & Impact

  • Reduced cognitive load through step-based grouping
  • Improved progression feedback and form clarity
  • Made error correction less disruptive
  • Established a reusable registration pattern