Choose Theme

The foundation of the group event website setup process.

In this page
September 10th, 2025

Initial Step Overview

The Foundation

This initial phase focuses on theme selection while establishing clear visual hierarchy and progress tracking for the entire setup workflow. By presenting theme selection first, users can see visual options that will shape their client's website.

Key Features of Step 1:

  • Theme Selection Cards ‐ Three distinct options (Wedding, Vacation, Corporate) with clear visual indicators and descriptive text tailored to different event types
  • Progressive Disclosure ‐ Steps 2 and 3 are present, but disabled (faded) to show the complete workflow while preventing users from skipping ahead
  • Required Field Validation ‐ Orange "REQUIRED" indicator clearly communicates that theme selection must be completed before proceeding
View Design Specs
September 10th, 2025

Setup Progress Panel

Continuous Visibility

Located prominently on the right side, this panel serves as both a progress tracker and navigation aid.

Progress Indicators:

  • Visual completion status (0/3 initially)
  • Individual step checkboxes that remain unchecked until completion
  • Clear labeling of elements: Theme Selection, Custom URL, Invitation Code

UX Benefits:

  • Reduces cognitive load by showing exactly what remains to be completed
  • Creates a sense of accomplishment as users progress through each step
  • Provides context for the overall time investment required
View Design Specs
September 10th, 2025

Theme Selection Interaction

When a travel advisor selects a theme (in this case, the Wedding theme), several key interface updates occur simultaneously to provide immediate feedback and guide the user to the next step:

Visual State Changes:

  • Step 1 Completion ‐ The Choose Theme step displays a green checkmark icon, indicating successful completion of the first requirement
  • Progress Counter Update ‐ The Setup Progress panel updates from "0/3" to "1/3", showing measurable advancement through the workflow
  • Progress Panel Reflection ‐ The Theme Selection item in the progress panel receives a green checkmark, providing dual confirmation of completion
  • Step 2 Activation ‐ The Create Custom URL card transitions from a disabled/faded state to fully active, enabling user interaction with clear visual emphasis
View Design Specs