Internal Application UX & Navigation

Proposal: Revamped Internal Application UX & Navigation
For SalesLay – AI-Powered Lead Recovery & Meeting Conversion Platform

Date: March 30, 2026

1. Executive Summary

The current sidebar is overcrowded with 10+ items, creating cognitive overload. The new design reduces it to 7 primary navigation items, prioritizes lead recovery and meeting conversion (your core business goal), and creates a seamless continuation from the smooth, one-click onboarding experience.

Key Benefits:

• Faster user adoption post-onboarding
• Clear focus on high-value actions (recovering inactive leads)
• Modern, minimalist SaaS aesthetic (inspired by Linear, Supabase, and best 2026 dashboard practices)
• Easier maintenance and future scalability
• Reduced decision fatigue for sales teams

This redesign directly supports the Customer Nurturing and Meeting Conversion Flow defined in your documentation.

2. Design Principles

• Minimal & Focused: Drastically reduce sidebar clutter while preserving all functionality.
• Outcome-Oriented: Prioritize Recovery and Campaigns as primary entry points.
• Consistency with Onboarding: Carry over one-click philosophy, progress indicators, and trust signals.
• Modern UX Patterns: Collapsible sidebar, top command bar, generous whitespace, clear visual hierarchy.
• Mobile-Friendly: Responsive layout with touch-friendly elements.
• Tech Alignment: Fully compatible with your Next.js + Python (FastAPI recommended) stack and Shadcn/UI + Tailwind.

3. Proposed Navigation (Simplified Sidebar)

Left Sidebar (Collapsible with toggle, using clean Lucide icons):

• Dashboard – Overview and quick actions
• Recovery – Leads ready for reactivation (new priority page)
• Contacts – Unified view of all email + CRM contacts
• Companies – HubSpot and email-sourced companies
• Deals – HubSpot deals pipeline
• Campaigns – Central hub for outreach (renamed from Email Workflows)
  • Sub-navigation (expandable or on-page tabs): Active Campaigns | Template Library
• AI Chat – Unified conversation threads (renamed & improved from Email Chat)
• Knowledge Base – Company documents and context
• Settings – Integrations, Meet Links, Profile, Team & Billing (combined)

Top Global Bar (always visible):

• App logo + global search (Cmd/Ctrl + K) – “Search contacts, deals, templates, leads...”
• Quick action buttons: New Campaign | Analyze URL | Generate Email
• Notifications bell + User avatar

Removed / Consolidated Items:

• “Analyzer” – Moved as quick action in Dashboard / Campaigns
• “Support” – Accessible via help icon or inside Settings
• Redundant “Email contacts” and “Back to Workflows”

This structure keeps the sidebar short, scannable, and action-oriented.

4. Detailed Page Wireframes

4.1 Dashboard (Landing Page After Onboarding)

Layout: Clean two-column grid with generous whitespace.

• Header: “Welcome back, [Name] Your AI recovery engine is active”
• KPI Cards (top row, 4 cards):
  • Inactive Leads Ready to Recover
  • Reply Rate (this week)
  • AI-Generated Meetings Booked
  • Overall Conversion Rate
• Main Content:
  • Left (60%): Recovery Opportunities – Prioritized list of top inactive leads with one-click “Start AI Nurturing” buttons and suggested sequence.
  • Right (40%): Recent AI Conversations + Quick Template Picks (mini cards from the 5 presets) + Connection Status (HubSpot, Twilio, Calendar – green checks)
• Bottom: Recent Activity Feed (sent messages + AI replies)

Primary CTAs:

• “View All Recovery Leads”
• “Launch New Campaign” → opens Template Library

4.2 Recovery Page (New Core Page)

Purpose: The most important daily workspace.

• Headline: “Leads Ready for Recovery” + smart filters (Last activity 30d/60d, Segment, etc.)
• Smart table/list:
  • Contact + Company
  • Last interaction (pulled from HubSpot)
  • AI-recommended sequence (e.g., “Soft Reality Check”)
  • One-click “Start AI Nurturing” button
• Side panel (on selection): Full lead context + preview of first AI-generated message

4.3 Campaigns Page

Tabs: Active Campaigns | Template Library | Sent History

Template Library (highlighted section):

• Headline: “Choose a Preset Sequence or Generate with AI”

• Grid of 6 beautiful cards (your exact presets):

  1. Soft Reality Check
     Most universal – quick check before I close this out
     → View flow details (modal with all 5 messages) | Use This Sequence

  2. Timing Reset
     Very effective for coaches – has timing changed since we last spoke?

  3. Pattern Recognition
     Positions authority – pattern with coaches lately

  4. Close-the-Loop
     Triggers replies – should I close this out?

  5. Low-Ego Re-Entry
     Very human – might’ve caught you at a bad time

  6. Clarity Offer
     No pitch framing – not a pitch, just clarity

• Bottom section: “Generate Custom Sequence with AI” – prompt input for tailored flows.

Each “Use” button adds the sequence to a new or existing campaign with one click.

4.4 AI Chat Page

• Left panel: Searchable list of contacted customers (email + SMS threads)
• Main area: Full conversation view with history
• AI tools: “Generate Smart Reply”, “Detect Meeting Intent”, “Suggest Calendar Slots”

4.5 Settings Page

Organized with clear tabs:

• Integrations (status from onboarding)
• Meet Links & Calendar Preferences
• Profile & Team Management
• Knowledge Base
• Billing & Usage

5. Post-Onboarding Experience

After completing the onboarding wizard (CRM → Email/SMS → Calendar), users land on the Dashboard with a celebratory banner:

“Setup complete! 🎉 Your first Recovery Campaign is ready.”

The system automatically triggers initial data sync and suggests the first 5–10 inactive leads on the Recovery page.

6. Recommended Implementation Notes

• Frontend: Next.js App Router + Tailwind + Shadcn/UI components (collapsible sidebar, modals, cards).
• Icons: Lucide React.
• Global Search: Use cmdk or similar for Cmd+K experience.
• State Management: Zustand or Context for connection status and user progress.
• Backend: Leverage existing Python services for data fetching from HubSpot, Twilio, OpenAI.