WhatsApp Flows Design, UX & Performance Best Practices

To maximize customer completion rates, eliminate bounce rates, and ensure 5-star user satisfaction, adhere to Meta's official design, form structure, and performance best practices.

1. Flow Architecture & Performance Guidelines

1. Keep Flows Short (< 5 Minutes)

• WhatsApp users engage in micro-moments. Flows should be designed to achieve one specific goal in under 3 to 5 minutes.
• For complex multi-stage journeys, split the experience into independent steps separated by conversational confirmations.

2. One Task Per Screen

• Do not overload a single screen with multiple competing tasks (e.g., avoid combining doctor selection, address input, and payment info on one screen).
• Split steps across 2 to 4 focused screens with clear progressive disclosure.

3. Build for Caching & Network Resilience

• WhatsApp client devices cache user inputs as they move from screen to screen.
• If a screen contains 20+ fields and the user loses connectivity or accidentally closes the app, all uncommitted data on that active screen is lost. Smaller screens protect against data loss.

4. Prefer Static Mode Where Feasible

• If your Flow options are relatively static (e.g., feedback surveys, lead capture), use Static Mode (Without Endpoint).
• Static Flows open instantaneously on user devices because no initial network roundtrip is needed to download screen data.
• If using an endpoint, make the first screen static whenever possible, deferring endpoint calls to subsequent screens.

2. Form & Component Best Practices

1. Selection Component Rules of Thumb

2. Text Input Guidelines

• Input Type Specification: Always specify "input-type": "email", "phone", or "number" to trigger the matching native keyboard on mobile devices.
• Text Length: Use TextInput for strings under 100 characters. For addresses, notes, or feedback, use TextArea with "max-length".
• Helper Text: Include formatting guidance in helper-text (e.g., "Enter 10-digit mobile number", "YYYY-MM-DD").

3. Date Selection

• For Birthdays or past dates, use DatePicker.
• For appointment booking, scheduling, or hotel reservations, use CalendarPicker (Flow 6.1+) to provide an interactive monthly grid.

3. Conversational UX & Copywriting

1. Align Chat Message CTA with Flow Entry Screen

• The text on the WhatsApp message CTA button must mirror the headline of the first screen.
  • Good: Message CTA "Book Doctor" ➔ First Screen Title "Select Specialist".
  • Bad: Message CTA "Free Consultation" ➔ First Screen Title "Enter Credit Card Info".

2. Sentence Case & Consistent Capitalization

• Use clean Sentence case or Title Case across all screen titles, field labels, and button CTAs.
• Never use ALL-CAPS strings, which feel aggressive and reduce reading comprehension.

3. Placement of Login / Authentication Screens

• Placing login or OTP screens at the very start of a Flow causes significant drop-off.
• Allow users to select their service or configure their quote first, showing the clear benefit before requesting phone verification or sign-in.

4. Completion & Data Privacy (Flow v5.1+)

1. Minimal Completion Payload

• Keep completion payload size minimal. Never encode base64 image strings in completion payloads; return server references or media IDs instead.

2. Protecting Sensitive Fields (`sensitive` Array)

• Starting in Flow JSON v5.1, when a user completes a Flow, WhatsApp automatically presents a summary view in the chat.
• By default, all entered fields are shown in this summary.
• Declare sensitive fields in the screen's sensitive array to mask or hide them completely:

  {
    "id": "PAYMENT_STEP",
    "title": "Payment",
    "sensitive": ["bank_account", "pan_number"],
    "layout": { ... }
  }

  • Text inputs, text areas, and dropdowns listed in sensitive are masked (••••••••••••).
  • Passwords and OTPs are hidden completely from the chat transcript.

3. Immediate Conversational Confirmation

• When the user taps the final completion button, immediately trigger an automated WhatsApp message in the chat (via SMSPort Visual Bot Builder) confirming their submission, providing their reference/booking number, and outlining next steps.