Enhancing Onboarding Flow with Streamlined CTA Selection in Breniapp

This post delves into recent improvements made to the onboarding process in Breniapp, focusing on a more intuitive and user-friendly experience. These changes align the onboarding flow with the Lovable specification, specifically targeting CTA selection and copy style options.

The Challenge

Previously, the process of selecting primary and secondary Call-to-Action (CTA) options during onboarding involved free-form text input. Similarly, selecting a copy style relied on a searchable select with numerous options. This approach presented usability issues and lacked the structured guidance needed for a smooth onboarding experience.

The Solution: Streamlined Selection

To address these challenges, we've transitioned from free-form text areas to a single-select component with predefined CTA options. These options include common actions like 'DM', 'WhatsApp', 'Visitar web' (Visit Website), and 'Reservar' (Book). This change ensures consistency and simplifies the selection process for new users.

In addition, the copy style selection has been revamped from a searchable select to a card-based selection with four distinct options: Educativo (Educational), Storytelling, Promocional (Promotional), and Inspirador (Inspirational). Each card includes a brief description to guide users in choosing the most appropriate copy style for their needs. These descriptions are available in multiple languages (Spanish, English, German, and French), enhancing accessibility and catering to a diverse user base.

Implementation Details

The core changes involved updating the data structures and user interface components responsible for handling onboarding steps. Specifically, the primaryCTA and secondaryCTA fields now utilize a single-select component, populated with a predefined set of CTAOptions. The copyStyle field has been replaced with a card-based selection, each card representing a distinct copy style with associated descriptions. The OnboardingSteps::copyStyles() method was updated to return these descriptions, similar to how tones are handled within the application.

Here's an illustrative example of how the CTA options might be structured in PHP:

<?php

$ctaOptions = [
    'dm' => 'DM',
    'whatsapp' => 'WhatsApp',
    'visitar_web' => 'Visitar web',
    'reservar' => 'Reservar',
];

// Example usage in a form
$selectedCTA = isset($_POST['cta']) ? $_POST['cta'] : null;

if ($selectedCTA) {
    echo "You selected: " . $ctaOptions[$selectedCTA];
}

?>

Benefits

The updated onboarding flow offers several key benefits:

• Improved Usability: The single-select and card-based selection components are more intuitive and easier to use than free-form text input and searchable selects.
• Increased Consistency: Predefined CTA options ensure consistency across the platform.
• Enhanced Guidance: Descriptions for each copy style help users make informed decisions.
• Multilingual Support: Descriptions are available in multiple languages, catering to a diverse user base.

Actionable Takeaway

When designing onboarding flows, prioritize usability and clarity. Consider using predefined options and descriptive labels to guide users through the process. By simplifying complex choices and providing clear guidance, you can create a more engaging and effective onboarding experience.