RapidRailsUI

StockLive Registration

Case Study: Transforming an overwhelming registration form into a user-friendly step-by-step wizard.

The Current Experience

Below is the existing StockLive bidder registration form. While functional, it presents several user experience challenges:

Original StockLive registration form showing 18 fields on a single page

UX Challenges

  • Cognitive overload - 18 fields displayed simultaneously overwhelms new users
  • No progress indication - Users cannot gauge completion status or remaining effort
  • Unrelated fields mixed together - Sale selection sits next to personal details, business info mixed with agent contacts
  • Long vertical scroll - Requires extensive scrolling, increasing abandonment risk
  • No visual hierarchy - All fields appear equally important, lacking logical grouping
  • Validation comes late - Errors only appear after full form submission attempt
  • Intimidating first impression - Dense form discourages first-time users from completing registration

The RapidRailsUI Solution

Breaking the form into 6 logical steps reduces cognitive load and guides users through a natural progression:

Sale
Personal
Address
Business
Agent
Review

UX Improvements

  • 2-4 fields per step - Focused attention, reduced cognitive load
  • Clear progress indication - Users see exactly where they are and how far to go
  • Logical grouping - Related fields grouped together (personal, address, business, agent)
  • Free navigation - Click any step to jump back and edit
  • Review before submit - Final step shows summary of all entered data
  • Data persistence - Progress saved automatically, resume if interrupted

Try It Out

Select Your Sale

Choose the livestock sale you wish to register for.

The Code

Implementing this wizard with RapidRailsUI is straightforward. Here's the essential code:

View (ERB)

Wizard Implementation 
<%= rui_steps(id: "stocklive-wizard", url: docs_stocklive_wizard_path,
  current_step: @wizard_step, variant: :horizontal, navigation: :free,
  submit_text: "Complete Registration") do |steps| %>

  <% steps.with_step(title: "Sale", icon: :tag) do %>
    <%= rui_combobox(name: "bidder_registration[sale_id]", label: "Sale Event",
      placeholder: "Search sales...", collection: BidderRegistration::SALES,
      selected: registration.sale_id, required: true, width: :full) %>
    <%= rui_combobox(name: "bidder_registration[account_type]", label: "Account Type",
      collection: BidderRegistration::ACCOUNT_TYPES, selected: registration.account_type,
      width: :full) %>
  <% end %>

  <% steps.with_step(title: "Personal", icon: :user) do %>
    <%= rui_input(name: "bidder_registration[first_name]", label: "First Name", required: true) %>
    <%= rui_input(name: "bidder_registration[last_name]", label: "Last Name", required: true) %>
    <%= rui_input(name: "bidder_registration[email]", label: "Email", type: :email, required: true) %>
    <%= rui_input(name: "bidder_registration[mobile]", label: "Mobile", type: :tel, required: true) %>
  <% end %>

  <% steps.with_step(title: "Address", icon: :map_pin) do %>
    <%= rui_select(name: "bidder_registration[country]", label: "Country",
      collection: BidderRegistration::COUNTRIES, selected: registration.country) %>
    <%= rui_select(name: "bidder_registration[state]", label: "State",
      collection: BidderRegistration::AUSTRALIAN_STATES, selected: registration.state) %>
    <%= rui_input(name: "bidder_registration[street_address]", label: "Street Address") %>
    <%= rui_input(name: "bidder_registration[suburb]", label: "Suburb / Town") %>
    <%= rui_input(name: "bidder_registration[postcode]", label: "Postcode") %>
  <% end %>

  <% steps.with_step(title: "Business", icon: :briefcase) do %>
    <%= rui_input(name: "bidder_registration[trading_name]", label: "Trading Name") %>
    <%= rui_input(name: "bidder_registration[pic]", label: "PIC Number", maxlength: 8) %>
    <%= rui_input(name: "bidder_registration[abn]", label: "ABN") %>
  <% end %>

  <% steps.with_step(title: "Agent", icon: :users) do %>
    <%= rui_input(name: "bidder_registration[trading_agent]", label: "Trading Agent") %>
    <%= rui_input(name: "bidder_registration[selling_agent_name]", label: "Selling Agent Name") %>
    <%= rui_input(name: "bidder_registration[selling_agent_phone]", label: "Agent Phone", type: :tel) %>
  <% end %>

  <% steps.with_step(title: "Review", icon: :check_circle) do %>
    <%= rui_checkbox(name: "bidder_registration[marketing]", label: "Receive event updates",
      description: "I would like to receive information on upcoming events") %>
  <% end %>
<% end %>

Controller

Controller Action 
def stocklive_wizard
  @registration = find_or_create_registration
  current_step = session[:stocklive_wizard_step] || 0

  case params[:direction]
  when "next"
    @registration.update(stocklive_params)
    current_step += 1
  when "back"
    current_step = [current_step - 1, 0].max
  end

  session[:stocklive_wizard_step] = current_step
  render partial: "stocklive_wizard", layout: false
end

Model

Model with Options 
class BidderRegistration < ApplicationRecord
  SALES = [
    ["Hunter Regional Livestock Exchange | Prime Sale", "hunter-prime"],
    ["Northern Victoria Livestock Exchange | Store Sale", "nvle-store"],
  ].freeze

  ACCOUNT_TYPES = [
    ["Company / Private Buyer", "private"],
    ["Livestock Agent", "agent"]
  ].freeze

  COUNTRIES = [
    ["Australia", "AU"],
    ["New Zealand", "NZ"],
  ].freeze
end

Before & After

Before: Single Long Form

18 fields on one page

No progress indicator

Overwhelming first impression

High abandonment rate

After: Step-by-Step Wizard

2-4 fields per step

Clear progress tracking

Friendly, guided experience

Higher completion rate