Skip to main content

CODITECT Multi-Tenant Admin: Customer Journey Map

Design Philosophy: Lean, Self-Service, Minimal, Flat
Inspiration: Apple, Stripe Dashboard, Linear

User Roles & Access Patterns​

Role Hierarchy​

Platform Admin (CODITECT)
├─ Tenant Admin (Customer Org)
│   ├─ Team Lead (Project Manager)
│   │   └─ Team Member (Developer/User)
│   └─ Billing Admin (Finance)
└─ Support User (Limited Read)

Access Frequency Analysis​

platform_admin:
  daily_access:
    - Tenant health monitoring
    - Usage analytics
    - Support tickets
  weekly_access:
    - New tenant onboarding
    - Billing review
    - Platform metrics
  monthly_access:
    - Feature rollouts
    - Capacity planning
  rare_access:
    - Platform settings
    - Security H.P.009-CONFIGuration

tenant_admin:
  daily_access:
    - Team activity feed
    - Project status overview
  weekly_access:
    - User management
    - Team H.P.009-CONFIGuration
    - Usage reports
  monthly_access:
    - Billing review
    - Settings adjustment
  rare_access:
    - Tenant settings
    - Integration setup

team_lead:
  daily_access:
    - Active projects
    - Team member status
    - Issues/blockers
  weekly_access:
    - Project creation
    - Team assignments
  monthly_access:
    - Reports/analytics
  rare_access:
    - Team settings

team_member:
  daily_access:
    - Assigned projects
    - My tasks/issues
  weekly_access:
    - Project history
  monthly_access:
    - Profile updates
  rare_access:
    - Settings

Customer Journeys​

Journey 1: Platform Admin - Daily Monitoring​

Goal: Quick health check across all tenants

Landing Page: Tenant Overview Dashboard
├─ Visual: Card grid, one card per tenant
├─ Info per card:
│   ├─ Tenant name + logo
│   ├─ Active users (trend indicator)
│   ├─ Current projects
│   ├─ Health status (green/yellow/red dot)
│   └─ Token usage (bar chart)
│
├─ Actions (minimal):
│   ├─ Search tenants (top right)
│   ├─ Filter by status (dropdown)
│   └─ Add tenant (+ button)
│
└─ Click card → Tenant detail view

Tenant Detail View:
├─ Header: Tenant name, logo, status
├─ Tabs (horizontal): Activity | Users | Projects | Usage | Settings
├─ Activity feed (default):
│   ├─ Chronological updates
│   ├─ User logins, project starts, issues
│   └─ Real-time updates
│
└─ Sidebar: Quick stats (small cards)
    ├─ Active users (number + trend)
    ├─ Token usage today (number + budget %)
    ├─ Projects running (number)
    └─ Support tickets (number, red if > 0)

Navigation:
├─ Top bar: CODITECT logo | Tenants | Analytics | Support | [Admin Icon]
└─ Click outside tenant → Back to overview

Design Principles Applied:

  • Single consolidated header (logo + 4 main sections + admin icon)
  • Default view = most accessed (tenant overview)
  • Content starts immediately (no nested headers)
  • Visual status indicators (dots, trends) minimize text
  • Cards for scanning, not tables
  • Sidebar stats, not dashboard clutter

Journey 2: Tenant Admin - Team Management​

Goal: Add user, assign to team, grant project access

Landing Page: My Organization Dashboard
├─ Main content: Active Teams (card grid)
│   ├─ Each card shows:
│   │   ├─ Team name
│   │   ├─ Member count
│   │   ├─ Active projects
│   │   └─ Last activity timestamp
│   │
│   └─ Click card → Team detail
│
├─ Sidebar: Quick actions
│   ├─ + Add user
│   ├─ + Create team
│   └─ Pending invites (badge if > 0)
│
└─ Top bar: Org logo | Teams | Projects | People | [Account icon]

Add User Flow (Modal, Not New Page):
├─ Step 1: Email + Name
├─ Step 2: Select team(s) - checkboxes, visual team cards
├─ Step 3: Role selection - radio buttons, clear descriptions
├─ Step 4: Preview + Send invite
└─ Success: Toast notification, modal closes

Team Detail View:
├─ Header: Team name (editable inline) + member count
├─ Sections (vertical flow, no tabs):
│   ├─ Members (avatar grid + roles)
│   ├─ Projects (linked project cards)
│   └─ Recent activity (condensed feed)
│
└─ Actions (floating button):
    ├─ + Add member
    ├─ Create project
    └─ Team settings (gear icon)

Design Principles Applied:

  • Modal for quick tasks (add user) - no page navigation
  • Cards over tables for better scanning
  • Inline editing (team name) reduces clicks
  • Floating action button for primary actions
  • Avatar grids more visual than text lists
  • No separate "users" and "teams" tabs - integrated view

Journey 3: Team Lead - Morning Check-In​

Goal: See project status, identify blockers, assign work

Landing Page: My Projects
├─ Layout: Kanban-style cards (not table)
│   ├─ Columns: Active | Review | Blocked | Complete
│   ├─ Each project card:
│   │   ├─ Project name (bold)
│   │   ├─ Progress indicator (visual bar)
│   │   ├─ Team member avatars (who's working)
│   │   ├─ Issue count (red badge if blockers)
│   │   └─ Last update timestamp
│   │
│   └─ Drag-drop to change status
│
├─ Top bar: Logo | Projects | Team | Issues | [Profile]
│
└─ Click card → Project detail

Project Detail View:
├─ Header: Project name + status
├─ Main content (single column, vertical flow):
│   ├─ Progress: Visual timeline with milestones
│   ├─ Active work: 
│   │   ├─ Current tasks (compact list)
│   │   ├─ Assigned to (avatars)
│   │   └─ Status (colored dots)
│   ├─ Blockers (if any):
│   │   ├─ Issue description
│   │   ├─ Assigned to
│   │   └─ Age (hours/days)
│   └─ Recent updates (activity feed)
│
└─ Floating actions:
    ├─ + Add task
    ├─ Report issue
    └─ Project settings

Issues Sidebar (Optional, Toggleable):
├─ Shows across all projects
├─ Filtered by "Assigned to me" or "My team"
├─ Sorted by priority (red → yellow → gray)
└─ Click issue → Inline expand for details

Design Principles Applied:

  • Kanban cards (visual status) over table rows
  • Progress bars instead of percentages
  • Avatar presence over "Assigned To: John Doe"
  • Red badges draw attention to blockers
  • Single column detail view (no left/right split)
  • Issues as toggleable sidebar, not separate page

Journey 4: Team Member - Daily Work​

Goal: See assigned tasks, update status, flag blockers

Landing Page: My Work
├─ Today's Focus (top section):
│   ├─ 2-3 most urgent tasks
│   ├─ Large, scannable cards
│   ├─ Clear CTAs: "Start", "Continue", "Review"
│   └─ Estimated time remaining
│
├─ This Week (below):
│   ├─ Compact task list
│   ├─ Checkbox + task name + project tag
│   └─ Drag to reorder priority
│
├─ Top bar: Logo | My Work | Projects | [Profile]
│
└─ No "Dashboard" - work IS the landing page

Task Detail (Modal or Slide-Over):
├─ Task name (editable)
├─ Description (rich text, minimal)
├─ Project context (linked)
├─ Status: Dropdown (To Do → In Progress → Done → Blocked)
├─ Time tracking: Start/stop timer (optional)
└─ Actions:
    ├─ Update status
    ├─ Flag blocker (red button, opens issue form)
    └─ Mark complete (big green button)

Projects Tab (Secondary):
├─ List of projects I'm on
├─ Click → See my tasks in that project
└─ Breadcrumb: My Work > [Project Name] > Tasks

Design Principles Applied:

  • "My Work" not "Dashboard" (clear purpose)
  • Most urgent tasks featured (minimize decision fatigue)
  • Checkbox interaction (satisfying, clear status)
  • Modal for quick updates (no page navigation)
  • Timer integration (self-service time tracking)
  • Minimal text labels (icons + clear actions)

Information Architecture (Simplified)​

Platform Admin (CODITECT Internal)​

Tenants (default landing)
├─ Overview (card grid)
├─ Click tenant → Detail
│   ├─ Activity (default tab)
│   ├─ Users
│   ├─ Projects
│   ├─ Usage
│   └─ Settings
│
Analytics
├─ Platform metrics dashboard
├─ Visual charts (no tables)
└─ Exportable reports
│
Support
├─ Active tickets
├─ Knowledge base
└─ Contact history
│
[Admin Icon]
├─ Platform settings
├─ Security
├─ Billing H.P.009-CONFIG
└─ Logout

Navigation Depth: Max 2 clicks to any content

Tenant Admin (Customer Org)​

Teams (default landing)
├─ Active teams (card grid)
├─ Click team → Detail
│   ├─ Members
│   ├─ Projects
│   └─ Activity
│
Projects
├─ All org projects
├─ Kanban view
└─ Click → Project detail
│
People
├─ User directory
├─ Pending invites
└─ Role management
│
[Account Icon]
├─ Billing
├─ Settings
├─ Integrations
└─ Logout

Navigation Depth: Max 2 clicks to any content

Team Lead​

Projects (default landing)
├─ My team's projects
├─ Kanban view
└─ Click → Project detail
│
Team
├─ Member list
├─ Assignments
└─ Activity feed
│
Issues
├─ All issues
├─ My team's issues
└─ Click → Issue detail
│
[Profile Icon]
├─ Settings
└─ Logout

Navigation Depth: Max 1-2 clicks to any content

Team Member​

My Work (default landing)
├─ Today's focus
├─ This week
└─ Click → Task detail
│
Projects
├─ Projects I'm on
└─ Click → My tasks in project
│
[Profile Icon]
├─ Settings
└─ Logout

Navigation Depth: Max 1 click to any content

Visual Design System​

Color Palette (Minimal, Purposeful)​

neutrals:
  white: "#FFFFFF"      # Backgrounds
  gray_50: "#F9FAFB"    # Subtle backgrounds
  gray_200: "#E5E7EB"   # Borders
  gray_400: "#9CA3AF"   # Secondary text
  gray_900: "#111827"   # Primary text

primary:
  blue_500: "#3B82F6"   # Actions, links
  blue_600: "#2563EB"   # Hover states

semantic:
  green_500: "#10B981"  # Success, active, complete
  yellow_500: "#F59E0B" # Warning, in progress
  red_500: "#EF4444"    # Error, blocked, urgent
  
backgrounds:
  card: "#FFFFFF"
  page: "#F9FAFB"
  hover: "#F3F4F6"

Usage Rules:

  • White cards on subtle gray backgrounds (no borders)
  • Color only for status (green/yellow/red)
  • Blue only for clickable items
  • Black text on white (maximum contrast)

Typography Scale​

display: 
  size: "32px"
  weight: "600"
  usage: "Page titles (rare)"

headline:
  size: "24px"
  weight: "600"
  usage: "Section headers"

title:
  size: "18px"
  weight: "600"
  usage: "Card titles, emphasis"

body:
  size: "16px"
  weight: "400"
  usage: "Primary content"

secondary:
  size: "14px"
  weight: "400"
  usage: "Metadata, timestamps"

caption:
  size: "12px"
  weight: "400"
  usage: "Labels, hints"

Usage Rules:

  • Max 3 font sizes on any screen
  • Bold only for interactive elements (buttons, links)
  • Gray text for metadata, black for content
  • Generous line height (1.5-1.6)

Spacing System (8px Grid)​

spacing:
  xs: "4px"    # Tight groups (icon + label)
  sm: "8px"    # Related items
  md: "16px"   # Component padding
  lg: "24px"   # Section spacing
  xl: "32px"   # Major sections
  2xl: "48px"  # Page margins
  3xl: "64px"  # Hero sections (rare)

Usage Rules:

  • 16px default component padding
  • 24px between sections
  • 48px page margins (top/sides)
  • Never arbitrary spacing (stick to scale)

Component Library (Minimal)​

card:
  background: white
  border_radius: "8px"
  shadow: "0 1px 3px rgba(0,0,0,0.08)"
  padding: "16px"
  hover_shadow: "0 4px 12px rgba(0,0,0,0.12)"

button_primary:
  background: blue_500
  color: white
  height: "40px"
  padding: "0 20px"
  border_radius: "6px"
  font_weight: "500"
  hover: blue_600

button_secondary:
  background: gray_200
  color: gray_900
  height: "40px"
  padding: "0 20px"
  border_radius: "6px"
  font_weight: "500"
  hover: gray_300

input:
  height: "40px"
  padding: "0 12px"
  border: "1px solid gray_200"
  border_radius: "6px"
  focus_border: blue_500
  background: white

badge:
  height: "20px"
  padding: "0 8px"
  border_radius: "10px"
  font_size: "12px"
  font_weight: "500"
  # Color varies by type (green/yellow/red)

avatar:
  size: "32px"  # Default
  border_radius: "50%"
  # Sizes: 24px (small), 32px (default), 48px (large)

status_dot:
  size: "8px"
  border_radius: "50%"
  # Color indicates status (green/yellow/red)

Layout Patterns​

Single Column (Primary)​

┌─────────────────────────────────────────────────────────┐
│ [Logo]  Nav1  Nav2  Nav3               Search  [Icon]  │ 80px header
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                                                 │   │
│  │  Main Content Area                             │   │
│  │  (Full width, max-width 1200px, centered)      │   │
│  │                                                 │   │
│  │  Cards stack vertically                        │   │
│  │  Generous whitespace                           │   │
│  │                                                 │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
└─────────────────────────────────────────────────────────┘

Use for:

  • Dashboard (card grid)
  • Detail views (vertical flow)
  • Forms (single column)

Main + Sidebar (Secondary)​

┌─────────────────────────────────────────────────────────┐
│ [Logo]  Nav1  Nav2  Nav3               Search  [Icon]  │ 80px
├─────────────────────────────────────────────────────────┤
│                                               ┌────────┐│
│  ┌───────────────────────────────────┐        │        ││
│  │                                   │        │ Sidebar││
│  │  Main Content                     │        │        ││
│  │  (70% width)                      │        │ Quick  ││
│  │                                   │        │ Stats  ││
│  │                                   │        │        ││
│  │                                   │        │ or     ││
│  │                                   │        │        ││
│  │                                   │        │ Actions││
│  └───────────────────────────────────┘        │        ││
│                                               └────────┘│
└─────────────────────────────────────────────────────────┘

Use for:

  • Project detail + issues sidebar
  • Content + quick stats
  • Toggleable (sidebar can hide)

Grid (Tertiary)​

┌─────────────────────────────────────────────────────────┐
│ [Logo]  Nav1  Nav2  Nav3               Search  [Icon]  │ 80px
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│  │ Card 1  │  │ Card 2  │  │ Card 3  │  │ Card 4  │   │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘   │
│                                                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│  │ Card 5  │  │ Card 6  │  │ Card 7  │  │ Card 8  │   │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘   │
│                                                         │
└─────────────────────────────────────────────────────────┘

Use for:

  • Tenant overview (card grid)
  • Team overview (card grid)
  • Project gallery
  • Responsive: 4 columns → 3 → 2 → 1

Interaction Patterns​

Primary Navigation (Top Bar):

  • 3-4 main sections max
  • Click → Instant navigation (no loading)
  • Active state: Blue underline (subtle)
  • Icons optional (only if universal)

Breadcrumbs (Only When Necessary):

  • Show current context
  • Max 2 levels: Overview > Detail
  • Clickable to go back
  • Gray text, subtle arrows

Search (Global):

  • Always visible (top right)
  • Searches across current context
  • Instant results (dropdown)
  • Keyboard shortcut: Cmd+K

Modals vs. Pages​

Use Modal for:

  • Quick tasks (add user, create project)
  • Forms < 5 fields
  • Confirmations
  • Preserves context (no navigation)

Use New Page for:

  • Detail views (project, tenant)
  • Complex H.P.006-WORKFLOWS (onboarding)
  • Reading-heavy content
  • Navigation expected

Feedback (Immediate, Subtle)​

Success:

  • Green toast (top right)
  • 3-second auto-dismiss
  • Checkmark icon + message
  • Example: "User added successfully"

Error:

  • Red toast (top right)
  • Manual dismiss required
  • X icon + error message
  • Example: "Email already exists"

Loading:

  • Skeleton screens (not spinners)
  • Show layout, gray placeholders
  • Smooth transition when loaded
  • Progress bar for long operations

Empty States (Helpful, Not Sad)​

No Projects Yet

[Illustration: Simple line drawing]

Get started by creating your first project.
Projects help organize work across teams.

[+ Create Project]

Principles:

  • Friendly illustration (not error icon)
  • Brief explanation (1-2 sentences)
  • Clear next action (big button)
  • No "error" language

Accessibility Requirements​

Color Contrast​

  • Text: 4.5:1 minimum (WCAG AA)
  • Large text: 3:1 minimum
  • Interactive elements: 3:1 minimum
  • Never color-only indicators (use icons too)

Keyboard Navigation​

  • Tab order logical
  • Focus indicators visible (blue outline)
  • Escape closes modals
  • Enter submits forms
  • Arrow keys navigate lists

Screen Readers​

  • Alt text on all images
  • ARIA labels on icons
  • Semantic HTML (h1, nav, main, aside)
  • Announce dynamic content changes

Touch Targets​

  • Minimum 44x44px
  • Adequate spacing (8px min)
  • No hover-only interactions
  • Swipe gestures optional (provide alternatives)

Performance Targets​

Page Load​

  • Initial render: < 1 second
  • Fully interactive: < 2 seconds
  • No layout shift

Interactions​

  • Click → Response: < 100ms
  • Search results: < 200ms
  • Page transition: < 300ms

Data​

  • Paginate lists > 50 items
  • Lazy load images
  • Cache aggressively
  • Optimistic UI updates

Responsive Breakpoints​

mobile: "< 640px"
  - Single column
  - Hamburger menu
  - Full-width cards

tablet: "640px - 1024px"
  - 2 column grid
  - Condensed sidebar
  - Adaptive navigation

desktop: "> 1024px"
  - Full layout
  - Multi-column grids
  - Persistent sidebar

Self-Service Principles​

Progressive Disclosure​

  • Show essentials first
  • "Advanced" options collapsed
  • Inline help (tooltips, not docs)
  • Learn by doing (not reading)

Sensible Defaults​

  • Pre-fill common values
  • Suggest based on context
  • One-click H.P.008-TEMPLATES
  • Undo always available

Clear Mental Models​

  • Familiar patterns (email-style)
  • Consistent terminology
  • Visual metaphors (cards = entities)
  • No jargon (plain language)

Error Prevention​

  • Validate inline (not on submit)
  • Disable impossible actions
  • Confirm destructive operations
  • Auto-save drafts

Summary: Design Philosophy​

LESS IS MORE:

  • 1 header, not 3-4
  • 3 navigation items, not 10
  • Cards, not tables
  • Actions, not menus
  • Icons, not text
  • Dots, not status labels

CONTENT FIRST:

  • No splash screens
  • No empty dashboards
  • Default = most accessed
  • Progressive loading OK
  • Skeleton > spinner

SELF-SERVICE:

  • Inline help
  • Smart defaults
  • Clear next actions
  • Forgiving (undo, drafts)
  • No training required

APPLE-LIKE:

  • Generous whitespace
  • Subtle shadows
  • Minimal color
  • Smooth animations
  • Delightful details