Design intuitive information architecture and comprehensive site maps that optimize content organization and navigation. This prompt helps UX designers and information architects create user-centered structures that enable findability, reduce cognitive load, and align content hierarchies with user mental models and business objectives.
This prompt helps you design comprehensive information architecture and site maps based on user research and business requirements. Fill in the bracketed placeholders with detailed information about your project context, users, content, and any existing challenges. The more specific your inputs—especially user research insights from card sorting, tree testing, or usability studies—the more tailored and effective your IA will be. Use the output to align stakeholders, guide design decisions, and create a blueprint for development.
Begin by documenting all content that needs to be organized, including current content inventory and planned additions. Provide user research insights that reveal how users naturally group and label information, ideally from card sorting studies, user interviews about findability issues, or analytics showing navigation patterns. Describe your target user segments and their distinct goals, as different users may need different pathways through the same content. Include business objectives that the IA should support, such as lead generation, product discovery, or self-service support. Document any technical constraints from your CMS, development platform, or existing URL structures that must be preserved.
The output will provide a complete organizational framework based on user mental models rather than internal company structure. It recommends specific organizational schemes such as hierarchical structures for broad-to-narrow content, sequential structures for processes, or database structures for large content sets with multiple access points. The site map visualizes parent-child relationships and content depth, typically limiting hierarchies to 3-4 levels to maintain usability. Content grouping follows principles from your user research, ensuring categories match how users think about and search for information. The IA balances discoverability with simplicity, avoiding both oversimplification that hides content and over-categorization that overwhelms users.
The output includes detailed navigation architecture across multiple types. Primary navigation provides access to top-level sections and appears consistently across the site. Secondary or contextual navigation helps users drill deeper within specific sections. Utility navigation handles account functions, help, and settings. The recommendation includes breadcrumbs and other wayfinding elements that show users their location and path. For sites with extensive content, the output suggests filtering, faceted navigation, and search strategies that complement the browsing experience. Each navigation type is purposefully designed to serve specific user needs at different points in their journey.
The output recommends specific testing methods to validate your IA before full implementation. Tree testing evaluates whether users can find content using the proposed structure without visual design influences. First-click testing shows whether navigation labels effectively communicate their contents. Card sorting validation confirms that your groupings match user mental models. The output suggests success metrics like task completion rates, time-to-find information, and navigation path efficiency to measure IA effectiveness post-launch. It provides governance guidelines to maintain IA integrity as content grows and includes scalability considerations for future expansion without requiring complete restructuring.
You are an expert UI/UX designer specializing in navigation pattern design and information architecture, with deep expertise in creating intuitive navigation systems that improve findability, reduce cognitive load, and enhance user satisfaction. Design a comprehensive navigation system for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web, mobile app, desktop application, responsive cross-platform]. The navigation should serve [PRIMARY USER PERSONA] and support [KEY USER GOALS/TASKS]. ## Project Context: **Product Overview:** - Application type: [e.g., e-commerce site, SaaS dashboard, content platform, enterprise tool, portfolio] - Content scope: [NUMBER] primary sections with [DEPTH: shallow/moderate/deep] hierarchy - Information architecture: [flat structure, hierarchical, hub-and-spoke, nested categories] - User expertise level: [novice, intermediate, expert, mixed] - Primary use cases: [browsing, task completion, content discovery, data management] **Platform Specifications:** - Target devices: [desktop 1920px+, tablet 768-1024px, mobile 375-428px] - Responsive requirements: [mobile-first, desktop-first, adaptive] - Technical constraints: [single-page app, multi-page, progressive web app] - Performance goals: [page load speed, interaction responsiveness] **User Context:** - Usage frequency: [daily power users, occasional visitors, one-time users] - Navigation depth: [shallow browsing, deep exploration, specific task completion] - Entry points: [homepage, search, direct links, external referrals] - Key user pain points: [getting lost, too many clicks, unclear labels, hidden features] ## Navigation Pattern Selection: Choose and design appropriate navigation patterns from: ### Primary Navigation Patterns: **1. Horizontal Top Navigation Bar** - Best for: [5-7 primary sections, desktop-focused, wide recognition] - Structure: Linear menu in header with [left/center/right alignment] - Behavior: [Fixed/sticky on scroll, transparent to solid, collapse on mobile] - Dropdown capability: [Mega menu, simple dropdown, hover/click activation] **2. Vertical Sidebar Navigation** - Best for: [8+ sections, deep hierarchies, admin dashboards, apps with frequent navigation] - Structure: Left or right sidebar with [collapsible/expandable sections] - Behavior: [Always visible, collapsible to icons, overlay on mobile] - Hierarchy display: [Nested accordions, expandable groups, multi-level indentation] **3. Hamburger Menu (Mobile-First)** - Best for: [Mobile apps, responsive sites, minimalist designs] - Structure: Hidden menu revealed via hamburger icon - Behavior: [Slide-in overlay, push content, full-screen takeover] - Animation: [Slide from left/right, fade in, curtain reveal] **4. Bottom Tab Bar (Mobile)** - Best for: [3-5 primary sections, mobile apps, frequent task switching] - Structure: Fixed bottom navigation with icons and labels - Behavior: [Always visible, highlight active section, optional badge counts] - Icon design: [Outlined default, filled active, with/without labels] **5. Tab Navigation** - Best for: [Related content sections, settings pages, profile views] - Structure: Horizontal tabs switching content views - Behavior: [Underline indicator, background highlight, scrollable on mobile] - Position: [Below header, within content area, sticky on scroll] **6. Mega Menu** - Best for: [E-commerce, content-heavy sites, complex catalogs] - Structure: Expandable panel showing multiple columns and categories - Behavior: [Hover or click activation, includes images/descriptions] - Organization: [Grouped by category, featured items, visual hierarchy] **7. Breadcrumb Navigation** - Best for: [Deep hierarchies, e-commerce, documentation, multi-step processes] - Structure: Horizontal trail showing location path - Behavior: [Clickable path elements, collapse on mobile, show parent levels] - Position: [Below header, above content, within page title area] **8. Hub and Spoke (Dashboard)** - Best for: [Admin panels, analytics dashboards, control centers] - Structure: Central hub with links to specialized sections - Behavior: [Card-based navigation, icon grid, categorized sections] - Return pattern: [Always return to hub, persistent navigation sidebar] **9. Contextual/Progressive Navigation** - Best for: [Onboarding flows, multi-step forms, guided experiences] - Structure: Show only relevant next steps based on context - Behavior: [Adaptive menu items, predictive suggestions, personalized shortcuts] - AI integration: [User behavior patterns, location-aware, time-based] ### Secondary Navigation Elements: - **Search**: Global search with [autocomplete, filters, recent searches] - **User Menu**: Account access with [profile, settings, logout] - **Utility Navigation**: [Contact, help, language selector, shopping cart] - **Pagination**: [Numbered pages, infinite scroll, load more button] - **Filters & Sorting**: [Sidebar filters, top bar dropdowns, floating filter button] - **Quick Actions/FAB**: Floating action button for primary task ## Navigation Design Specifications: ### Visual Design: **Typography:** - Navigation labels: [Font family, size 14-16px for readability, weight 400-600] - Active state: [Bold, color change, size increase] - Label style: [Sentence case, Title Case, UPPERCASE] - Character limit: [20-30 characters maximum per label] **Color & Contrast:** - Default state: [Color with 4.5:1 contrast minimum] - Active/selected state: [Highlight color, background change, underline] - Hover state: [Subtle color shift, background overlay, underline preview] - Background: [Solid, transparent, gradient, glass morphism] **Spacing & Layout:** - Menu item padding: [Vertical 12-16px, horizontal 16-24px for touch targets] - Item spacing: [8-12px between items, consistent throughout] - Container width: [Full width, max-width constraint, centered] - Mobile touch targets: [Minimum 44x44px for tappable areas] **Icons & Indicators:** - Icon style: [Outlined, filled, custom brand icons] - Icon size: [20-24px paired with text, 28-32px icon-only] - Active indicators: [Underline bar, dot indicator, background pill, left border] - Dropdown indicators: [Chevron down, caret, arrow with rotation on expand] ### Behavior & Interactions: **Desktop Behavior:** - Hover effects: [Background change, underline animation, color transition] - Dropdown activation: [Hover with delay, click to open/close] - Mega menu display: [Fade in 200ms, slide down, expand with animation] - Active state persistence: [Highlight current section, breadcrumb trail] **Mobile Behavior:** - Menu activation: [Tap hamburger icon, swipe from edge] - Menu appearance: [Slide-in overlay, push content, full-screen] - Close method: [X button, tap outside, swipe away, back button] - Scroll behavior: [Fixed header, collapse on scroll down, show on scroll up] **Scroll Interactions:** - Fixed/sticky navigation: [Always visible, collapse to compact version] - Hide on scroll down: [Reveal on scroll up for maximum content space] - Transparent to solid: [Background opacity increases with scroll] - Shrink header: [Reduce height/logo size after scroll threshold] **Keyboard Navigation:** - Tab order: [Logical left-to-right, top-to-bottom flow] - Focus indicators: [Visible outline, background highlight] - Keyboard shortcuts: [Arrow keys for menu navigation, Enter to select] - Skip links: [Skip to main content for accessibility] ### Information Architecture: **Content Organization:** - Grouping strategy: [By task, by topic, by user role, by frequency] - Primary sections: [List 5-7 main categories with clear boundaries] - Sub-navigation: [2-3 levels maximum, progressive disclosure] - Label taxonomy: [User-centric language, not company jargon] **Navigation Hierarchy:** - Level 1: [5-7 primary sections in main navigation] - Level 2: [Dropdown or sidebar subsections, 5-10 items] - Level 3: [In-page navigation, tabs, left sidebar for deep content] - Visual distinction: [Indent, font size, color to show hierarchy] **Priority & Positioning:** - Left/top priority: [Most important, frequently accessed items] - Right utility: [Account, cart, search, settings] - Calls-to-action: [Button treatment for primary actions] - Hidden/overflow: [Less important items in 'More' menu] ## Responsive Strategy: **Desktop (1024px+):** - Pattern: [Horizontal top navigation with mega menu or dropdowns] - Layout: [Full menu visible, all categories shown] - Hover interactions: [Active for discovery and quick access] **Tablet (768-1023px):** - Pattern: [Condensed horizontal navigation or hybrid approach] - Layout: [Shorter labels, icon+text combinations, possible hamburger] - Touch optimization: [Larger touch targets, tap instead of hover] **Mobile (375-767px):** - Pattern: [Hamburger menu, bottom tab bar, or hybrid] - Layout: [Vertical stacked menu, full-screen overlay] - Gestures: [Swipe to open/close, tap to expand categories] - Priority: [Show only essential 3-5 items in bottom tab bar] **Breakpoint Transitions:** - 1024px: Desktop to tablet (collapse mega menu) - 768px: Tablet to mobile (switch to hamburger or bottom tabs) - Smooth transitions: [Avoid jarring layout shifts] ## Accessibility Requirements: - **ARIA labels**: Proper landmarks (navigation, main, search) - **Keyboard navigation**: Full keyboard access with visible focus - **Screen reader support**: Descriptive labels, expanded/collapsed states - **Skip navigation**: Skip to main content link for keyboard users - **Focus management**: Trap focus in open modals/menus - **Color contrast**: 4.5:1 minimum for text, 3:1 for interactive elements - **Touch targets**: 44x44px minimum on mobile - **Motion sensitivity**: Respect prefers-reduced-motion for animations ## Advanced Features: **Search Integration:** - Global search bar: [Expandable, always visible, overlay search] - Search position: [Header, centered, right-aligned] - Autocomplete: [Suggestions as user types, recent searches] - Search results: [Inline preview, dedicated results page] **Personalization:** - Adaptive navigation: [Show frequently accessed sections first] - User role menus: [Admin vs. user vs. guest navigation] - Recent/favorites: [Quick access to user's common destinations] - AI-powered suggestions: [Context-aware navigation recommendations] **Progress & Orientation:** - Breadcrumbs: [Show location in hierarchy, clickable path] - Page title synchronization: [Match navigation label to page heading] - Progress indicators: [Multi-step processes, percentage complete] - Location highlighting: [Bold, underline, or color current section] ## Deliverables: 1. **Navigation System Design:** - Desktop navigation mockups with all states (default, hover, active) - Mobile navigation design with open/closed states - Tablet navigation showing responsive adaptation - Mega menu or dropdown designs (if applicable) - All navigation patterns organized in [Figma/Sketch/Adobe XD] 2. **Interactive Prototype:** - Clickable navigation demonstrating all interactions - Dropdown/mega menu behaviors - Mobile menu animations - Responsive breakpoint transitions - Search functionality and results 3. **Information Architecture Document:** - Complete sitemap showing all pages and hierarchy - Navigation taxonomy with labels and descriptions - User flow diagrams for key tasks - Content grouping rationale 4. **Technical Specifications:** - Navigation component structure and states - CSS/styling specifications for each element - Responsive breakpoints and behaviors - Animation timing and easing functions - Accessibility implementation guidelines 5. **Usage Guidelines:** - When to use each navigation pattern - Label writing best practices - Adding new navigation items guidelines - Do's and don'ts with visual examples - Mobile-first considerations 6. **Component Library:** - Reusable navigation components for [React/Vue/Angular/Web Components] - Variants for different contexts and states - Code snippets with implementation examples - Accessibility attributes and keyboard handlers Ensure the navigation system achieves: - **Clarity**: Users know where they are and where they can go - **Consistency**: Navigation behaves predictably across all pages - **Efficiency**: Key destinations reachable in 2-3 clicks maximum - **Findability**: Users can locate content through navigation or search - **Accessibility**: WCAG 2.2 AA compliance with keyboard and screen reader support - **Responsiveness**: Seamless experience across all devices and screen sizes - **Scalability**: System accommodates future content growth without redesign
You are an expert UX researcher specializing in information architecture and usability testing methodologies. Create a comprehensive research plan that includes both card sorting and tree testing studies for the following project: Project Overview: [PRODUCT OR WEBSITE NAME AND PURPOSE] Current IA Status: [NEW DESIGN, REDESIGN, OR OPTIMIZATION] Content Scope: [NUMBER AND TYPE OF CONTENT ITEMS TO ORGANIZE] Target Users: [PRIMARY USER DEMOGRAPHICS AND BEHAVIORS] Key User Tasks: [TOP 3-5 TASKS USERS NEED TO ACCOMPLISH] Research Timeline: [AVAILABLE TIMEFRAME FOR STUDIES] Research Budget: [AVAILABLE RESOURCES AND TOOLS] Develop a complete research plan that includes: 1. CARD SORTING STUDY DESIGN - Study type selection (open, closed, or hybrid) with rationale based on project goals - Card preparation: How many cards, content selection criteria, and card labeling guidelines - Category considerations: Pre-defined categories for closed sorts or category creation instructions for open sorts - Participant recruitment: Sample size recommendations (minimum 15-30 participants), screening criteria, and recruitment channels - Moderated vs unmoderated approach with pros and cons for this specific context - Step-by-step session protocol including instructions, time estimates, and facilitator guidelines - Tools and platforms recommendation (online vs physical, specific software options) 2. TREE TESTING STUDY DESIGN - Tree structure preparation: How to build the text-only hierarchy from card sorting results or existing IA - Task scenario development: 5-10 realistic, specific tasks that reflect actual user goals - Task wording best practices to avoid leading participants or revealing answers - Participant requirements: Sample size (30-60 recommended), overlap with card sorting participants or fresh panel - Success metrics definition: Direct vs indirect paths, task completion rates, time-on-task benchmarks - Testing tool selection and setup instructions - Session flow and participant instructions 3. SEQUENTIAL RESEARCH WORKFLOW - Phase 1: Card sorting execution timeline and milestones - Analysis transition: How to synthesize card sorting data into testable tree structures - Phase 2: Tree testing execution based on card sorting insights - Iteration strategy: When and how to conduct follow-up tests - Decision points: Criteria for moving from one phase to next 4. DATA ANALYSIS FRAMEWORK Card Sorting Analysis: - Similarity matrix and dendrogram interpretation - Agreement scores and consensus metrics - Category naming analysis from open sorts - Pattern identification across participant groups - Outlier and edge case handling Tree Testing Analysis: - Success rate calculations and benchmarks - Path analysis: Direct, indirect, and failed attempts - First-click analysis and its significance - Time-on-task patterns - Problem area identification (where users get lost) - Comparative analysis if testing multiple structures 5. DELIVERABLES AND RECOMMENDATIONS - Recommended IA structure with evidence-based rationale - Navigation labeling recommendations - Problem areas requiring attention with severity assessment - Quick wins vs long-term improvements - Visual documentation: Site maps, user flow diagrams, comparison matrices - Stakeholder presentation format with key insights and actionable recommendations 6. RISK MITIGATION AND QUALITY ASSURANCE - Pilot testing approach to validate study design - Common pitfalls and how to avoid them - Participant fatigue management - Data quality checks and validation methods - Contingency plans for low participation or inconclusive results Ensure the plan is practical, scientifically rigorous, and aligned with industry best practices. Provide specific guidance that accounts for the project context, timeline, and resources while maintaining methodological integrity.
You are an expert UX writer and content strategist specializing in creating user-centered content that enhances digital experiences. Your task is to develop a comprehensive content strategy and UX writing framework for [PRODUCT OR APPLICATION NAME] targeting [TARGET AUDIENCE]. Project Context: - Product/Application: [PRODUCT OR APPLICATION NAME] - Target Audience: [TARGET AUDIENCE AND USER PERSONAS] - Product Stage: [STAGE - e.g., new launch, redesign, scaling, optimization] - Brand Voice: [EXISTING BRAND VOICE AND PERSONALITY - e.g., professional, friendly, playful, authoritative] - Key User Goals: [PRIMARY USER OBJECTIVES AND TASKS] - Business Objectives: [BUSINESS GOALS AND CONVERSION METRICS] - Current Challenges: [EXISTING CONTENT OR UX ISSUES TO ADDRESS] Develop a complete content strategy and writing framework that includes: 1. Content Strategy Foundation - Conduct a content audit of existing copy across all user touchpoints - Define content goals that align user needs with business objectives - Map content requirements to user journey stages (awareness, consideration, decision, retention) - Establish information architecture and content hierarchy principles - Define content governance model including roles, workflows, and approval processes - Plan content creation, management, and distribution systems 2. Voice and Tone Guidelines Create comprehensive guidelines that include: - Core brand voice attributes with clear definitions and examples - Tone variations across different contexts (onboarding, success states, errors, transactional) - Emotional mapping to user journey stages - Do's and don'ts with specific examples - Cultural sensitivity and inclusive language principles - Adaptation guidelines for different channels and touchpoints 3. UX Writing Principles and Best Practices Apply the Three C's framework to all copy: - Clarity: Use plain language, avoid jargon, ensure immediate comprehension - Conciseness: Eliminate unnecessary words, prioritize scannability, respect user attention - Consistency: Maintain terminology, formatting, and style across all interfaces Additional principles: - User-centricity: Speak the user's language, address their mental models and needs - Actionability: Use active voice, specific action words, and clear next steps - Context awareness: Provide relevant information at the right time and place - Accessibility: Ensure readability, screen reader compatibility, and inclusive language - Positive framing: Focus on what users can do rather than limitations 4. Microcopy Guidelines by Component Type Provide specific guidance and examples for: - Headlines and subheadings: Guide orientation and establish hierarchy - Button labels and CTAs: Drive specific actions with clarity and urgency - Form labels and placeholder text: Reduce friction and clarify expectations - Error messages: Explain problems, provide solutions, maintain trust - Success messages: Confirm actions and guide next steps - Tooltips and help text: Offer contextual assistance without clutter - Empty states: Turn absence into opportunity and guide first actions - Loading states: Manage expectations and reduce perceived wait time - Navigation labels: Enable intuitive wayfinding and mental model alignment 5. Content Style Guide Create a comprehensive style guide including: - Grammar and punctuation standards - Capitalization rules (title case, sentence case, all caps usage) - Number and date formatting conventions - Abbreviation and acronym policies - Link text and button label patterns - Error message templates and tone - Terminology glossary with approved and avoided terms - Formatting standards for lists, tables, and structured content 6. Testing and Optimization Framework - Define success metrics for content effectiveness (comprehension, completion rates, time on task, error reduction) - Plan A/B testing strategies for critical copy elements - Establish feedback collection methods (user testing, surveys, support ticket analysis) - Create iteration protocols based on quantitative and qualitative data - Set up content performance dashboards and regular review cycles 7. Implementation Roadmap - Prioritize high-impact touchpoints for immediate content improvements - Create templates and reusable content patterns for efficiency - Develop a content component library integrated with design systems - Plan stakeholder training and collaboration workflows - Establish quality assurance processes and review checkpoints Deliver your strategy in a structured, actionable format with specific examples, templates, and guidelines that can be immediately implemented by the product team. Include before/after examples where appropriate to illustrate improvements.