Design a Modern User Profile Page That Drives Engagement

Design a compelling user profile page with public and private views, content tabs, and responsive layout specifications.

📝 The Prompt

Design a user profile page for a [PLATFORM_TYPE] platform where users [PRIMARY_USER_ACTION]. The profile serves both the account owner (private view) and visitors (public view). **Section 1 — Profile Header**: Design the hero section including: avatar/photo (specify size and upload behavior), cover image or gradient background, display name and username, bio/description field ([CHARACTER_LIMIT] chars), key stats (e.g., [STAT_1], [STAT_2], [STAT_3] displayed as counters), primary action button (Edit Profile for owner / Follow/Connect for visitors), and verification badge placement. **Section 2 — Navigation & Content Tabs**: Define [NUMBER_OF_TABS] content tabs (e.g., Posts, Portfolio, Activity, About). Specify tab bar behavior: sticky on scroll, with unread indicators or counts. Design the active/inactive tab states. **Section 3 — Content Feed Area**: For the default tab, design the content layout: card-based grid vs. timeline list. Include sorting options (Recent, Popular, Curated). Specify lazy loading behavior and empty states for each tab. **Section 4 — Sidebar / Secondary Info**: Design a sidebar (desktop) or collapsible section (mobile) showing: skills/interests tags, linked accounts, achievements/badges, mutual connections, and a "Similar Profiles" recommendation widget. **Section 5 — Privacy & View Modes**: Differentiate the owner view (with edit controls, analytics summary, profile completeness meter) from the visitor view (with report/block options, share profile button). Handle the restricted/private profile state. **Section 6 — Responsive Specifications**: Describe layout shifts across desktop, tablet, and mobile. Specify how the header collapses and tabs become scrollable on smaller screens. Provide component-level specs with spacing, typography, and interaction notes.

💡 Tips for Better Results

Design the empty profile state alongside the complete one — new users need motivation to fill in their profiles. Keep the primary action button (Follow/Edit) visible at all times, even on scroll. Limit visible stats to 3-4 metrics to avoid cognitive overload.

🎯 Use Cases

UI/UX designers and product managers use this when creating or redesigning user profile experiences for social platforms, marketplaces, or community-driven applications.

🔗 Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

👁️ 2 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

👁️ 2 📋 0
🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

👁️ 2 📋 0
🎨 Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.

👁️ 1 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Your Brand or Project

Generate a complete, accessible color palette with hex codes, usage guidelines, dark mode variants, and brand-aligned reasoning.

👁️ 1 📋 0
🎨 Design advanced

Create a Detailed User Flow Diagram for Your Digital Product

Design a comprehensive text-based user flow diagram with decision points, error states, and UX annotations for any digital product.

👁️ 1 📋 0