Design Decisions
The reasoning behind key design choices for each application in the Workshopr platform. Understanding the "why" helps maintain consistency as we evolve.
Platform philosophy
Workshopr follows a three-phase facilitation model: Learn, Plan, Facilitate. Each phase has distinct user needs and emotional contexts.
| Phase | User goal | Emotional state | Design approach |
|---|---|---|---|
| Learn | Discover exercises, get inspired | Curious, exploratory | Warm, inviting, content-rich browsing |
| Plan | Build agenda, prepare session | Focused, productive | Clean, professional, tool-like |
| Facilitate | Run session, get real-time support | Focused but anxious, needs confidence | Calm, supportive, minimal distraction |
psychology
Key insight: Each phase serves a different cognitive mode. Learn is divergent (exploring options), Plan is convergent (making decisions), Facilitate is executive (taking action under pressure).
Main Site (workshopr.io)
The content library and brand hub. First impression for most users.
Purpose
A curated library of workshop exercises, icebreakers, and facilitation resources. Users browse, discover, and save activities for later use in the Planner.
Key decisions & rationale
| Decision | Why |
|---|---|
| Warm coral red primary (#E54D4D) | Establishes brand identity. Red conveys energy and action—appropriate for facilitation. Warm undertone keeps it approachable rather than aggressive. |
| Card-based content layout | Supports scanning and comparison. Users often browse multiple exercises before choosing. Cards create clear visual boundaries and enable hover states for quick preview. |
| Category color-coding | Helps users quickly filter by exercise type (Ideation = amber, Team Building = green, etc.). Visual differentiation reduces cognitive load when scanning large libraries. |
| Fraunces serif for headings | Adds warmth and personality. Distinguishes Workshopr from cold SaaS tools. The slight quirkiness signals creativity and approachability. |
| Generous whitespace | Content-heavy pages need breathing room. Users aren't in a rush here—they're exploring. Space creates calm and improves readability. |
| No sidebar navigation on content pages | Maximizes content area. Breadcrumbs and clear back-navigation handle wayfinding without persistent chrome stealing space. |
Planner (planner.workshopr.io)
Drag-and-drop workshop agenda builder. The "productivity tool" of the platform.
Purpose
Construct workshop agendas by combining exercises, breaks, and custom activities. Export to PDF/calendar. Send to Coach for real-time facilitation support.
Key decisions & rationale
| Decision | Why |
|---|---|
| Cool blue primary (#0284C7) | Signals "tool mode"—focused and professional. Blue is universally associated with productivity software (Notion, Linear, Figma). Creates clear visual distinction from the marketing site. |
| Persistent sidebar for activity library | Drag-and-drop requires source and target to be visible simultaneously. Collapsible accordion sections prevent overwhelming users with choices. |
| Timeline visualization | Workshops are time-bound. Visual timeline helps facilitators see pacing at a glance. Progress bar shows total duration vs. target, preventing over-scheduling. |
| Inline editing over modals | Quick tweaks (duration, notes) shouldn't interrupt flow. Expanding panels keep context visible while editing. Modals reserved for complex operations (save, export, share). |
| Colored header modals | Strong visual anchor for important actions. The blue header creates hierarchy and makes modals feel intentional rather than interruptive. |
| Kiosk mode option | When opened from AI Builder or in iframe, removes main site chrome. Focuses attention on the task. Reduces cognitive load for first-time users going through onboarding. |
| Activity type color bars | Left-edge color indicates type (exercise/icebreaker/break) at a glance. Helps facilitators visually scan agenda structure and identify missing variety. |
lightbulb
Design principle: Planner should feel like a focused workspace, not a website. Every pixel should serve the task of building an agenda.
Coach (coach.workshopr.io)
AI-powered facilitation assistant. Three modes: Prep, Live, Reflect.
Purpose
Provide intelligent support before, during, and after workshops. Prep mode reviews agendas and flags risks. Live mode offers real-time intervention suggestions. Reflect mode guides debrief conversations.
Key decisions & rationale
| Decision | Why |
|---|---|
| Purple primary (#7C4DFF) | Distinct from both red (brand) and blue (planner). Purple signals intelligence and insight—appropriate for AI assistance. Also differentiates clearly from other apps in tab switching. |
| Darker, calmer color palette | Live facilitation is high-pressure. The interface should be calming, not stimulating. Dark backgrounds reduce eye strain during long sessions and minimize distraction. |
| Large, glanceable typography | Facilitators check Coach while managing a room. Information must be readable at arm's length or quick glance. No squinting at small text during a workshop. |
| Passive suggestion model (Live mode) | AI shouldn't interrupt the facilitator. Suggestions appear in a designated area, visible but not demanding. Facilitator chooses when to engage. Respects their expertise and flow. |
| Intervention cards system | Pre-defined response patterns for common situations (low energy, conflict, confusion). Gives facilitators specific language and actions rather than vague advice. Reduces decision fatigue. |
| Timer as primary UI element | Time is the facilitator's most precious resource. Always-visible timer with activity context helps maintain pacing without mental math. |
| Three distinct modes, one URL | Prep → Live → Reflect is a natural flow. Single app with mode switching (vs. three separate apps) preserves context and reduces cognitive overhead of tool-switching. |
Live mode design goals
Minimal, calm, glanceable. One primary action visible. Suggestions ready but not pushy. Timer always visible.
What we avoid
Busy dashboards, notifications that demand attention, small text, features that require reading during a session.
MyWorkshopr (Dashboard)
User account area. Saved workshops, settings, subscription management.
Purpose
Central hub for authenticated users to manage their saved work, access history, and configure their account. Gateway to all personalized features.
Key decisions & rationale
| Decision | Why |
|---|---|
| Navy blue (#1A2744) for chrome | Professional, trustworthy, premium. Navy is the "serious" anchor color—appropriate for account management and settings. Consistent with the nav across all apps. |
| Sidebar navigation | Dashboard is a multi-section area (workshops, templates, settings, billing). Persistent sidebar provides orientation and quick switching. Standard pattern users expect. |
| Cards for saved workshops | Same card pattern as main site for consistency. Users recognize their saved items. Hover states reveal actions (edit, delete, duplicate, send to coach). |
| Recent activity on landing | Most users return to continue previous work. Showing recent items first reduces clicks to resume. "Pick up where you left off" improves perceived speed. |
Tips (tips.workshopr.io)
Quick, actionable facilitation advice. Bite-sized learning for busy facilitators.
Purpose
Deliver focused facilitation tips in an easily digestible format. Each tip addresses a specific challenge or technique, helping facilitators improve incrementally without time commitment.
Key decisions & rationale
| Decision | Why |
|---|---|
| Coral red primary (#F87171) | Part of the Learn phase color family (red spectrum). Lighter than main site red to feel approachable and quick. Signals bite-sized, easy-to-digest content. |
| Card-per-tip layout | Each tip is self-contained. Cards allow quick scanning and easy sharing. No long-form scrolling required—users get value immediately. |
| Category tags (Engagement, Timing, Conflict, etc.) | Facilitators often need help in specific areas. Tags enable filtering to relevant content quickly. Helps users build targeted skill sets. |
| Save/bookmark functionality | Users return to favorite tips before sessions. Building a personal collection increases engagement and creates habit loops. |
| Daily tip email option | Passive learning without requiring app visits. Keeps Workshopr top-of-mind. Email format encourages sharing with colleagues. |
Interventions (intervention.workshopr.io)
Intervention card library. Ready-to-use responses for common facilitation challenges.
Purpose
Provide facilitators with pre-written scripts and actions for handling difficult moments—low energy, conflict, confusion, silence, and more. Reduces decision fatigue during high-pressure situations.
Key decisions & rationale
| Decision | Why |
|---|---|
| Purple primary (#7C4DFF) | Part of the Facilitate phase (same as Coach). Interventions are used during live facilitation—sharing Coach's purple creates visual unity. Users associate purple with "in-session support." |
| Physical card metaphor | Interventions feel tangible and actionable. Card format mirrors index cards facilitators might actually use. Easy to mentally "grab" during a session. |
| Category-based organization (6 categories) | Energy, Engagement, Conflict, Confusion, Time, and Group Dynamics. Clear mental model matches how facilitators diagnose problems. Quick navigation under pressure. |
| Script + action format | Each card has "What to say" and "What to do" sections. Removes guesswork. Facilitators can use verbatim or adapt. Structure prevents blank-mind moments. |
| Severity indicators | Cards marked as quick-fix vs. deeper intervention. Helps facilitators match response to situation gravity. Prevents over- or under-reacting. |
| Coach integration | Same cards appear in Coach Live mode as suggestions. Consistency between browsing and in-session use. Familiarity reduces cognitive load. |
tips_and_updates
Design principle: Intervention cards should be usable at a glance. A facilitator with 10 seconds to spare should be able to read, understand, and act.
Podcasts (podcasts.workshopr.io)
Audio content for facilitators. Learn on the go through conversations and deep dives.
Purpose
Extend learning beyond screen time. Podcast episodes cover facilitation techniques, expert interviews, case studies, and behind-the-scenes stories. Perfect for commutes, walks, or background listening.
Key decisions & rationale
| Decision | Why |
|---|---|
| Crimson primary (#BE123C) | Part of the Learn phase color family (red spectrum). Deeper and richer than main site red—signals depth and immersion appropriate for long-form audio content. |
| Episode card layout with waveform preview | Visual waveform indicates episode energy and pacing. Cards show duration, guest, and topic at a glance. Helps users choose episodes that match their mood/time. |
| Chapter markers | Long episodes need navigation. Chapter markers let users skip to relevant sections. Increases completion rates and return visits. |
| Transcript availability | Accessibility requirement. Also enables searching within episodes. Users can quote or reference specific moments. SEO benefit for discoverability. |
| Embedded player + external platform links | Some users prefer listening on-site, others in their podcast app. Supporting both respects user habits. Platform links (Spotify, Apple) expand reach. |
| Related exercises sidebar | Connect audio content to actionable library items. Episode about icebreakers links to icebreaker exercises. Drives cross-platform engagement. |
Training (workshopr.io/training)
Structured learning paths and courses. From beginner to advanced facilitation mastery.
Purpose
Provide comprehensive facilitation education through structured courses, video lessons, and hands-on exercises. Includes certification paths for professional development and credentialing.
Key decisions & rationale
| Decision | Why |
|---|---|
| Emerald primary (#10B981) | Part of the Reflect phase color family (green spectrum). Green signals growth, progress, and achievement—perfect for structured learning. Encourages users to see training as personal development. |
| Progress tracking with visual milestones | Learning is a journey. Visual progress (percentage, badges, milestones) motivates continuation. Users see investment building over time. |
| Module-based course structure | Break large courses into digestible chunks. Each module is 15-30 minutes. Allows learning in short sessions. Clear completion states per module. |
| Video + text + practice format | Different learners prefer different formats. Videos for visual learners, text for readers, exercises for practitioners. Multimodal approach increases retention. |
| Certificate generation | Professional development requires proof. Downloadable/shareable certificates validate learning. LinkedIn integration for career visibility. |
| Cohort-based live courses option | Some learning benefits from community. Live cohorts create accountability and peer connection. Premium offering for serious learners. |
| Path as subdirectory (/training) not subdomain | Training is part of the main site experience, not a separate tool. Users browse content library and training together. Simplifies navigation and SEO. |
Training design goals
Encouraging, structured, progress-oriented. Clear paths from beginner to expert. Celebrate completions. Make learning feel achievable.
What we avoid
Overwhelming course catalogs, unclear prerequisites, hidden paywalls mid-course, gamification that feels patronizing.
Cross-platform decisions
Choices that apply across all applications.
| Decision | Why |
|---|---|
| Shared design tokens | One source of truth for colors, spacing, typography. Apps override only accent colors. Ensures consistency and simplifies maintenance. |
| Shared component library | Same buttons, inputs, cards, modals across apps. Users learn once, patterns apply everywhere. Reduces development time and ensures accessibility. |
| Consistent navigation bar | Navy header appears across all apps (when logged in). Creates sense of unified platform rather than disconnected tools. Logo always returns to main site. |
| Persistent user session | Login once, authenticated everywhere. Reduces friction when moving between apps. Session persists across subdomains. |
| Material Symbols icons | Google's icon set is comprehensive, well-designed, and actively maintained. Variable font means we can adjust weight and fill. Consistent visual language. |
| Inter + Fraunces typography | Inter for body (highly readable, professional). Fraunces for headings (warmth, personality). The pairing balances approachability with credibility. |
| 12px border radius default | Soft but not bubbly. Modern without being trendy. Large enough to feel friendly, not so large that it wastes space or feels childish. |
| Toast notifications (not alerts) | Non-blocking feedback. Users can continue working while seeing confirmation. Bottom-right placement follows muscle memory from other tools. |
What we deliberately avoid
Patterns we've chosen not to use, and why.
Aggressive onboarding flows
No forced product tours or modal sequences. Users can explore at their own pace. Tooltips and empty states provide contextual guidance instead.
Dark patterns
No hidden fees, confusing cancellation, or manipulative copy. Facilitators need to trust their tools. Trust is earned through transparency.
Feature overload in primary views
Advanced features live in menus, not on main screens. First-time users see essential actions only. Power features reveal progressively.
Notifications that demand attention
Especially in Coach Live mode. The facilitator's attention belongs to their participants, not to our UI. Suggestions are passive, never interruptive.
Recent decision log
Major design decisions made recently, for historical context.
| Date | Decision | Rationale |
|---|---|---|
| Feb 2026 | Moved Planner modals to shared include system | Reduced planner.php from 1288 to 557 lines. Improves maintainability and ensures modal consistency. |
| Feb 2026 | Added Progress, Alert, Skeleton components | Completing the component library for common loading and feedback patterns. |
| Feb 2026 | Created Voice & Tone documentation | Codifying writing style to maintain consistency as content team grows. |
| Jan 2026 | Standardized on ws_ prefix for component helpers | Clear namespace prevents conflicts with other PHP functions. ws_button, ws_input, ws_modal, etc. |
| Jan 2026 | Adopted colored modal headers for Planner | Blue header creates strong visual hierarchy and consistent app identity within modals. |