Principle 1: Hierarchy Guides Action
Every screen should have one primary action. Everything else is secondary.
In practice: - One primary CTA button per screen (solid, brand colour, full-width on mobile) - Secondary actions use outlined or ghost buttons — visually subordinate - Destructive actions (delete, cancel) are red and placed away from primary CTAs
Common mistake: giving "Save" and "Cancel" the same visual weight. The user's eye doesn't know where to go. Make "Save" primary, "Cancel" a text link.
In WeWeb: apply your design tokens consistently. Primary button = brand colour fill. Secondary button = transparent fill + brand colour border. Tertiary = text only. Never deviate.
Principle 2: Friction-Free Onboarding
The first 5 minutes after signup determine whether a user activates. Every step that isn't essential is friction.
Optimal onboarding flow: 1. Email + password only at signup (no phone number, no name yet) 2. One-screen setup wizard: 3 questions max, progress indicator visible 3. Land on a pre-populated dashboard — not a blank state 4. First "win" within 60 seconds: something the user can see, click, or do immediately
In FlutterFlow: use a conditional on app launch. If `onboarding_complete = false`, navigate to the onboarding flow. Set `onboarding_complete = true` in Supabase when they finish step 3.
Blank states are conversion killers. Pre-populate with sample data or an example so the user sees value before they've entered any real data.
Principle 3: Copy Is Design
The words on your interface are as important as the layout. Bad copy costs conversions even on a beautiful design.
High-impact copy changes: - Button copy: action verb + outcome. "Save" → "Save changes". "Submit" → "Create my account". "Get started" → "Start free trial". - Error messages: specific and helpful. "Invalid email" → "Check the email format — it should look like name@company.com". - Empty states: tell the user what to do, not what's missing. "No projects yet" → "Create your first project — it takes 2 minutes". - Tooltips: explain the why, not the what. "Click to export" → "Export as CSV for Excel or Google Sheets".
Audit every string in your app. Fix the 10 worst ones and watch your support tickets drop.
Principle 4: Trust Signals Inside the App
Trust-building doesn't stop at the landing page. Inside the app, users need reassurance that their data is safe and their work is saved.
Trust signals inside no-code apps:
- Autosave indicator: "All changes saved" in the top bar — users shouldn't fear losing work
- Security badges on sensitive screens (payment, personal data): "256-bit SSL encryption", "SOC 2 compliant"
- Data attribution: show where data comes from ("Synced from Salesforce — updated 3 min ago")
- Transparent billing: in-app usage meter showing plan limits before the user hits them
In WeWeb: implement an autosave indicator with a WeWeb variable (saveStatus: "saving" | "saved" | "error") and a small status chip in the navigation bar.
Principle 5: Mobile Is a First-Class Screen
For B2C apps and mobile-first SaaS, 60–80% of usage happens on mobile. For internal tools and B2B SaaS, it's still 30–40% — higher than most teams assume.
Mobile-specific design rules: - Tap targets minimum 48×48px (thumbs are not mouse cursors) - Bottom navigation for primary app navigation (thumb zone) - Avoid hover states as the only way to reveal information - Forms: use the right keyboard type (email input type="email", phone type="tel") - Tables: don't try to make data tables work on mobile — convert them to card lists instead
In FlutterFlow: build your mobile layout first in 375px width, then adapt for tablet and web. FlutterFlow's responsive widget tree makes this straightforward if you start mobile-first — retrofitting is significantly harder.