SaaS Product Interface - AiPro Institute™ | Empower People with AI Education

SaaS Product Interface - AiPro Institute™ Prompt Library

💼 SaaS Product Interface

User-Centric Dashboard with Onboarding, Navigation & Feature Discovery

📊 Skill: Advanced ⏱️ Time: 50–75 min 💳 Credit: High 📁 Format: Figma / Adobe XD / HTML

🛠️ Tool Compatibility

Model-agnostic GPT-4o Claude 3.5 Gemini 2.5

📝 The Prompt

Design a comprehensive SaaS product interface for:

🎯 Product Context:

• SaaS Category: [Project Management / CRM / Marketing Automation / Analytics / Collaboration / HR/Payroll / Accounting / Design Tool / Dev Tool]

• Core Value Prop: [What problem does it solve? What's the main user benefit?]

• Target Users: [Role: Marketing manager, developer, designer / Team size: Solo, small team, enterprise]

• Pricing Model: [Freemium / Free trial / Subscription tiers (Starter/Pro/Enterprise)]

🚀 User Onboarding Flow (First-Time Experience):

1. Welcome Screen

• Headline: ["Welcome to [Product]" — personalized with user's name if available]

• Value Restatement: [Quick reminder of core benefit: "Manage projects 3x faster"]

• CTA: ["Get Started" / "Take a Tour" / "Skip to Dashboard"]

2. Account Setup (2-3 steps)

• Step 1 — Profile: [Name, Role, Company size, Avatar upload]

• Step 2 — Goals: ["What do you want to achieve?" — Multiple choice checkboxes]

• Step 3 — Integrations: [Connect tools: Slack, Google Drive, etc. — "Skip for now" option]

• Progress Indicator: [Steps 1/3, 2/3, 3/3 with visual progress bar]

3. Interactive Tutorial / Product Tour

• Tour Style: [Tooltip overlays highlighting key features / Guided walkthrough with dummy data / Interactive checklist]

• Key Features to Highlight (3-5): [e.g., "Create your first project", "Invite team members", "Set up automation"]

• Completion Incentive: [Progress checklist, gamification (badges), unlock advanced features]

• Skip Option: ["Skip tour" button always visible]

🏗️ Main Dashboard Interface:

1. Top Navigation Bar (Persistent)

• Logo/Brand: [Top-left, clickable to return home]

• Search: [Global search bar — "Search projects, tasks, people..." with keyboard shortcut (Cmd+K)]

• Quick Actions: ["+ New Project" button OR dropdown with multiple create options]

• Notifications: [Bell icon with unread count badge, dropdown panel with recent notifications]

• User Menu: [Avatar dropdown — Settings, Profile, Billing, Logout]

2. Sidebar Navigation (Collapsible)

• Primary Nav Items (5-8): [Dashboard, Projects, Tasks, Team, Reports, Settings]

• Active State: [Background highlight + left border accent]

• Icons: [Clean line icons, 20-24px, consistent style]

• Collapse Control: [Icon-only mode for narrow sidebar, expand on hover OR toggle button]

• Bottom Items: [Help/Support, What's New, Upgrade (for free/trial users)]

3. Main Content Area

• Page Header: [Page title (H1), breadcrumbs, action buttons (filter, export, settings)]

• Content Layout Options: [List view / Kanban board / Calendar / Table / Timeline]

• View Switcher: [Toggle buttons or tabs to switch between layout modes]

• Filters & Sorting: [Dropdown filters (status, assignee, date), sort by priority/date/name]

4. Empty States (Critical UX)

• No Data Yet: [Illustration + "You haven't created any projects yet" + "Create Your First Project" CTA]

• No Search Results: ["No results found for '[query]'" + suggestions to refine search]

• Error State: ["Something went wrong" + "Retry" button + support link]

📊 Key Feature Screens:

1. Project/Item Detail View

• Header: [Title (editable inline), Status dropdown, Priority label, Assignee avatar]

• Main Content: [Description (rich text editor), Attachments, Comments thread, Activity log]

• Sidebar: [Metadata — Due date, Created by, Tags, Custom fields]

• Actions: [Edit, Duplicate, Archive, Delete, Share]

2. Team/Collaboration Features

• Team List: [Grid of team members with avatar, name, role, status (online/offline)]

• Invite Flow: [Modal with email input, role selector (Admin/Member/Viewer), "Send Invite" button]

• Permissions: [Clear visual indicators of who can view/edit/delete]

3. Settings Panel

• Layout: [Left sidebar with setting categories, right panel with forms]

• Categories: [Profile, Account, Team, Billing, Integrations, Notifications, Security]

• Form Design: [Clear labels, helper text, inline validation, "Save Changes" button with loading state]

🎨 Visual Design System:

1. Color Palette

• Primary Brand Color: [HEX — used for CTAs, links, active states]

• Secondary Color: [HEX — supporting actions]

• Neutral Grays: [6–8 shades for backgrounds, borders, text]

• Semantic Colors: [Success #10b981 / Warning #f59e0b / Error #ef4444 / Info #3b82f6]

• Background: [Light mode: #f9fafb / Dark mode: #1f2937 (optional)]

2. Typography

• Font Family: [Inter / Roboto / System UI stack]

• Type Scale: [H1: 32px / H2: 24px / H3: 20px / Body: 14–16px / Small: 12–14px]

• Line Height: [1.5 for body, 1.2 for headings]

3. Component Library

• Buttons: [Primary (solid), Secondary (outlined), Tertiary (text), Icon-only, sizes: small/medium/large]

• Forms: [Text input, Textarea, Dropdown, Checkbox, Radio, Toggle switch, Date picker]

• Cards: [White background, subtle shadow, 8px border radius, 16–24px padding]

• Modals: [Centered overlay, backdrop blur/darken, close X, max-width 600px]

• Tables: [Zebra striping OR row hover, sortable headers, pagination]

• Tooltips: [Dark background, white text, arrow pointer, appear on hover]

• Loading States: [Skeleton loaders, spinners, progress bars]

⚙️ Interaction Patterns:

• Keyboard Shortcuts: [Cmd+K for search, Cmd+N for new item, Esc to close modal, Arrow keys for navigation]

• Drag & Drop: [Reorder lists, move cards between columns (Kanban), upload files]

• Inline Editing: [Click to edit text fields without opening modal, auto-save on blur]

• Bulk Actions: [Multi-select checkboxes, action bar appears with "Delete", "Move", "Assign" options]

• Real-Time Updates: [Live updates when team members make changes, subtle notification toast]

🔔 Notification System:

• In-App Notifications: [Dropdown panel from bell icon, grouped by type (mentions, assignments, updates)]

• Toast Notifications: [Bottom-right corner, auto-dismiss after 5 seconds, success/error states with icons]

• Email Digests: [Daily/weekly summary option in settings]

• Push Notifications: [Browser/mobile push for critical updates, user-configurable]

📱 Responsive Design:

• Desktop (1440px+): [Full sidebar + content, multi-column layouts, keyboard shortcuts emphasized]

• Tablet (768–1024px): [Collapsible sidebar, single-column main area, touch-friendly targets]

• Mobile (< 768px): [Bottom tab bar, hamburger menu, simplified views, swipe gestures]

♿ Accessibility Features:

• Keyboard Navigation: [All interactive elements accessible via Tab, focus indicators visible]

• Screen Reader: [ARIA labels for icons, semantic HTML, skip-to-content link]

• Color Contrast: [WCAG AA minimum 4.5:1 for text, 3:1 for UI elements]

• Text Scaling: [UI remains usable at 200% browser zoom]

✅ Deliverables Required:

1. Complete onboarding flow (3–5 screens)

2. Main dashboard with sidebar navigation

3. 5–8 key feature screens (project detail, team, settings, etc.)

4. Component library (buttons, forms, cards, modals, tables)

5. Empty states, loading states, error states

6. Responsive breakpoints (desktop, tablet, mobile)

7. Interactive prototype with navigation flows

8. Design system documentation

🚀 Output Format:

Deliver a production-ready SaaS interface that balances powerful functionality with intuitive UX, minimal learning curve, and delightful interactions that drive user retention and adoption.

🧠 The Logic: 6 Design Principles

1️⃣ Onboarding = Activation

First session determines retention. Guide users to "aha moment" fast. Show value before asking for data. Progressive disclosure beats info dumps.

2️⃣ Information Architecture

Navigation must map to mental models. Group features logically. Limit top-level nav to 5–8 items. Deep hierarchies kill discoverability.

3️⃣ Empty States Are Opportunities

Never show blank screens. Empty states guide next action. "You have no projects" → "Create your first project" with clear CTA.

4️⃣ Feedback & Confirmation

Every action gets feedback. Loading spinners, success toasts, error messages. Users must know: Did my action work? What happens next?

5️⃣ Keyboard-First Power Users

Power users = retention = revenue. Keyboard shortcuts, bulk actions, inline editing. Make experts fast. Don't sacrifice simplicity.

6️⃣ Performance = Perception

Fast feels good. Optimistic UI (show change before server confirms), skeleton loaders, lazy-load. Slow SaaS = churned users.

🎨 Output Preview: 4 Real-World Examples

Example 1: Project Management SaaS (Asana-style)

Onboarding: 3-step setup — Name/role, Create first project, Invite team (skippable)
Dashboard: Left sidebar (Projects, Tasks, Team, Reports), main area with Kanban board (columns: To Do, In Progress, Done), drag-and-drop cards
Task Detail: Slide-out right panel (no page reload), inline editing, comment thread, file attachments, assignee dropdown
Colors: Coral primary (#FF6F61), gray backgrounds, status colors (green done, yellow in-progress)
Key Feature: Timeline view (Gantt chart), keyboard shortcut panel (Cmd+/), bulk task editing

Example 2: Analytics Platform (Mixpanel-style)

Onboarding: Install tracking code → See first data → Guided tour of key reports
Dashboard: Top nav (Reports, Funnels, Retention, Users), main area with chart builder (drag metrics/dimensions), date range picker top-right
Report View: Large line chart, table below with drill-down, "Save Report" button, share link generator
Colors: Purple primary (#7c3aed), data viz palette (blue, teal, orange, red)
Key Feature: SQL query mode for advanced users, real-time dashboard updates, cohort analysis builder

Example 3: CRM Tool (Salesforce Lightning-style)

Onboarding: Import contacts → Create first deal → Set up pipeline stages
Dashboard: Grid of KPI cards (Deals closed, Pipeline value, Win rate), sidebar nav (Leads, Contacts, Deals, Reports), search bar with recent items
Contact Detail: Tabbed interface (Overview, Activity, Emails, Files), editable fields with autosave, "Log a Call" quick action
Colors: Blue primary (#0070D2), white cards, colored deal stages (purple new, green won, red lost)
Key Feature: Email integration (Gmail/Outlook), activity timeline, pipeline drag-and-drop, custom fields

Example 4: Design Collaboration Tool (Figma-style)

Onboarding: Create first file → Interactive canvas tutorial (draw shape, add comment) → Invite collaborator
Dashboard: File browser (grid/list view), recent files at top, sidebar with teams/projects, "+ New File" prominent
Editor: Full-screen canvas, left toolbar (tools), right panel (properties), top bar (share button, collaborator avatars with live cursors), keyboard shortcuts overlay (press Shift+?)
Colors: Dark UI (#2C2C2C) for canvas focus, white panels, accent purple (#8B5CF6)
Key Feature: Real-time multiplayer (see cursors), comment threads pinned to canvas, version history, plugin marketplace

🔗 3-Step Chain Strategy

Step 1: User Flow & IA Mapping

Prompt: "Map user flows for a [SaaS category] product. Define: (1) Onboarding flow (signup → setup → first value moment), (2) Core user journey (primary use case from login to goal completion), (3) Information architecture (top-level nav 5–8 items, feature grouping logic), (4) Empty states for each screen (what shows when no data?). Output: Flow diagram and IA sitemap."

Expected Output: User flow documentation showing critical paths and decision points, plus IA hierarchy ready for design.

Step 2: High-Fidelity Interface Design

Prompt: "Design SaaS interface in [Figma] for [product name]. Include: (1) Onboarding screens (3-step setup with progress bar), (2) Main dashboard (sidebar nav, top bar with search/notifications, content area with [list/kanban/table]), (3) Detail view (item page with editable fields, comments, actions), (4) Settings screen (left categories, right forms). Apply colors [HEX codes], typography [font names]. Create component library (buttons, forms, cards, modals) with all states."

Expected Output: Complete interface design with 8–10 key screens, component library, and consistent visual language.

Step 3: Interaction Design & Prototype

Prompt: "Add interactions to SaaS design: (1) Clickable prototype with navigation flows (sidebar links → pages, create button → modal, table rows → detail), (2) Micro-interactions (button hover states, loading spinners, toast notifications), (3) Keyboard shortcuts overlay (Cmd+K search, Cmd+N new, Esc close), (4) Drag-and-drop simulation (reorder list, Kanban cards). Document: Component specs, spacing tokens (8px grid), color variables, accessibility notes (ARIA labels, focus states)."

Expected Output: Fully interactive prototype with realistic interactions, plus complete developer handoff documentation.

💡 6 HITL (Human-in-the-Loop) Refinement Tips

1. Onboarding Friction Test Time a new user from signup to first value. Target: <3 minutes. If longer, cut steps, reduce form fields, offer "Skip" options.

2. 5-Second Feature Discovery Show dashboard to unfamiliar user for 5 seconds. Ask: "Where would you create a new project?" If they can't find it, your CTA isn't prominent enough.

3. Empty State Audit Manually test every screen with zero data. Does each empty state guide the next action with clear CTA? Fix any that show blank screens.

4. Keyboard Power User Test Try completing core tasks using only keyboard (no mouse). If it's clunky, add shortcuts, improve tab order, document shortcuts in-app.

5. Mobile Reality Check Core workflows must work on mobile. If 50%+ of SaaS is mobile, responsive isn't optional. Test actual devices, not just browser resize.

6. Loading State Completeness Every data fetch needs a loading state. Skeleton loaders > spinners > blank screens. Test on slow 3G to verify experience doesn't break.

7,400+

Words in Prompt

Design Principles

Real-World Examples

Chain Strategy Steps

HITL Tips

🎓 AiPro Institute™

Empowering professionals with world-class AI prompt engineering resources

Part of the Digital UI/UX & Web Design Collection

Member Menu

Member Menu

🎨 AiPro Institute™ Prompt Library