Day 2 Affinity Board — MSP Portal Wireframes

Common elements across all 7 role wireframes · unique features per role highlighted as stickies · click a role to filter

Roles
CS / Sales
Decider
Engineer
MSP Rep
Designer
Product Manager
Support Ops
📊
Portfolio Dashboard
All 7 roles · 14 unique features
Shared by all
CS / Sales
All 7
Stats Cards Row
4 headline KPIs at the top of the dashboard — total customers, active campaigns, license utilization, portfolio health.
CS / Sales
All 7
Customer Table
Sortable, searchable table listing all managed customers with per-row status, tier, seat count, and actions.
Unique features
CS / Sales
Attention Strip
Full-width urgent notification banner pinned above the stats row. Surfaces the most critical issue across the portfolio at a glance (e.g. "2 customers have failing email delivery").
CS / Sales
License Pool Card on Dashboard
Inline pool visualisation directly on the dashboard (not a separate page) — bar showing total, allocated, and available seats with a colour-coded legend.
CS / Sales
Export Report Button
One-click export of the current portfolio view. Visible in the main dashboard header.
Decider
Customers Needing Attention
Dedicated stat card showing count of customers with issues — with yellow colour coding. Not just a count, but a navigable entry point to filter the table.
Decider
Alerts Bar
Horizontal bar below stats cards with categorised alert counts (e.g. "3 email delivery failures", "5 approaching license limit"). Severity levels with colour indicators.
Decider
Per-Row Health Dot
Green / yellow / red / blue dot in each customer row showing overall health state. Provides at-a-glance triage without opening a customer.
Decider
Avg. Simulation Pass Rate Stat
Portfolio-wide average pass rate as a headline stat card — not available in any other wireframe.
MSP Rep
Team & Analytics Nav Items
Sidebar includes dedicated sections for Team management (MSP staff access) and Analytics (cross-customer reporting) — separate from the main customer view.
Product Manager
Alerts Panel with Counts
Collapsible alerts panel in the main area (not a top bar) — groups issues by type with counts. Designed to be actionable: each alert links directly to affected customers.
Product Manager
Page Subtitle / Context Line
Sub-header line showing contextual info (e.g. "42 customers · last updated 2 min ago") beneath the page title — helps MSP orient before acting.
Support Ops
Health & Diagnostics (Separate Screen)
Only wireframe with a fully separate Health view accessible from the sidebar — shows per-customer configuration issues, sync failures, and delivery problems. Not embedded in the dashboard.
Support Ops
Health Badge on Nav Item
Notification badge on the "Health & Diagnostics" sidebar link showing count of active issues — so the MSP sees there are problems without visiting the dashboard first.
🧙
New Customer Setup Wizard
All 7 roles · 6 shared steps · 18 unique features
Shared by all — 6 wizard steps
CS / Sales
All 7
Step 1 — Create Tenant
Company name, primary domain, country, timezone. Entry point to the wizard in every wireframe.
CS / Sales
All 7
Step 2 — Assign Licenses
Tier selection cards (Starter / Pro / Enterprise) and seat count input. Pool impact shown inline.
CS / Sales
All 7
Step 3 — User Provisioning
IDP selection (Azure AD, Okta, Google Workspace, CSV). Guided connection checklist.
CS / Sales
All 7
Step 4 — Email Configuration
Allowlisting checklist, mail flow rules, delivery test with pass/fail result.
CS / Sales
All 7
Step 5 — Branding
Display name, primary colour picker, logo upload with live preview.
CS / Sales
All 7
Step 6 — Review & Launch
Summary of all configured sections with edit links. Final confirm / launch action.
Unique wizard features
CS / Sales
Domain Tags Input
Multiple domains added as removable chips/tags in Step 1 — not just a single text input. Supports customers with multiple domains from the start.
CS / Sales
Internal Reference Field
A free-text field in Step 1 to store the MSP's own internal customer ID or PSA reference — linking the Hoxhunt tenant to their existing tooling.
Decider
Save & Exit Button
Persistent button in the wizard footer (alongside Back / Continue) to save progress mid-wizard and return later — addressing the "can't finish in one session" pain point.
Decider
Email Warning on Review Step
Yellow warning banner on the Review step if the email delivery test hasn't been passed — warns the MSP before they launch that simulations may not reach inboxes.
Engineer
Provisioning Timeline Panel
Animated step-by-step timeline shown during tenant creation: "Database creation → Enable user sync → Configure RBAC → Finalise setup." Shows async provisioning progress as it happens.
MSP Rep
"Save for Later" Button
Distinct from Decider's "Save & Exit" — labelled differently and positioned on the left side of the footer with a step counter ("Step 2 of 6") next to it for orientation.
MSP Rep
Launch Confirmation Message
Personalised success screen on the final step: "[Customer Name] is ready!" — reinforces completion with the customer's actual name.
MSP Rep
Step X of 6 Footer Indicator
Plain-language step counter in the wizard footer ("Step 2 of 6") alongside the Save Later button — gives a clear sense of progress without relying only on the step dots.
Designer
Multi-Column Form Layouts
Form rows that switch between 2-column and 3-column layouts depending on field groupings — reduces vertical scroll and groups related fields visually.
Designer
Radio Cards for IDP Selection
IDP choice (Azure, Okta, Google, CSV) presented as large clickable radio cards rather than a dropdown or list — makes the options scannable and reduces errors.
Product Manager
License Gate Banners
Two conditional banners on Step 2: a green "Pool OK" banner if allocation is within limits, and a red "Blocked" banner if the requested seats would exceed the MSP's pool — hard-blocking before proceeding.
Product Manager
Domain Mismatch Warning
On Step 3, if synced user email domains don't match the tenant's configured domain(s), a warning appears inline — preventing the "wrong directory" mistake identified in research.
Product Manager
Readiness Card on Review
A checklist-style "readiness card" on the Review step showing which setup tasks are complete vs. incomplete — gives a structured pass/fail summary before launch.
Product Manager
Provisioning Launch Overlay
Separate full-screen spinner overlay that appears during tenant creation — separate from the wizard modal. Shows customer name being provisioned with a progress animation, then transitions to success.
Support Ops
Autosave Bar with Timestamp
Persistent bar across the top of the wizard showing "Autosaved 2 min ago" — so the MSP never fears losing work if they navigate away or close the browser.
Support Ops
Inline Domain Validation States
Domain field in Step 1 has three explicit states: hint (grey), error (red), OK (green) — with live feedback as the MSP types. Prevents invalid domain submissions before moving to provisioning.
Support Ops
Email Gateway Warning
Step 4 shows a conditional warning if the customer appears to use a complex email security gateway (Mimecast/Proofpoint/Barracuda) — prompts the MSP to take extra care before testing.
Support Ops
Sync Status: Idle / Running / Result
Three explicit UI states for the provisioning sync in Step 3 — Idle (ready to start), Running (spinner with live feedback), and Results (success or failure with details). Avoids the "did it work?" ambiguity.
⚡
Bulk Actions
6 of 7 roles · 10 unique features
Shared pattern
CS / Sales
6 of 7
Bulk Action Bar (Multi-select)
Bar that appears below or above the table when rows are selected. Shows selected count and action buttons. All 6 roles include this — Engineer has it but minimal.
Action sets (what each role included)
CS / Sales
Send Campaign · Assign Training · Apply Setting · Clear
4-button action set. Includes "Clear" to deselect — the only role that explicitly designed a deselect action.
Decider
Send Campaign · Assign Training · Change Settings · Suspend
4 actions — notably includes "Suspend" as a bulk action, allowing MSPs to pause multiple customers simultaneously.
MSP Rep
Selection Info + Action Buttons
Bar shows "X customers selected" text alongside action buttons. Focused on informing the operator of scope before acting.
Designer
Bulk Bar with Selection Count
Designed as a floating bar that appears contextually. Emphasis on the count display to make selection scope unambiguous.
Product Manager
Bulk Bar with Count + Actions
Standard bulk bar. PM's version is most tightly connected to filter state — actions respect active filter context.
Unique bulk features
CS / Sales
Bulk Preview Area
A dedicated preview section that shows exactly what the bulk action will do before confirming — including a warning callout for destructive operations.
CS / Sales
Bulk Progress Rows
After confirming a bulk action, individual progress rows appear per customer showing success/failure state for each. Directly addresses the "partial failure" research finding.
CS / Sales
Cancel & Confirm Buttons
Explicit two-button confirmation step for bulk actions — Cancel abandons, Confirm executes. Prevents accidental triggers.
Decider
Bulk Suspend Action
Only role to include "Suspend" as a bulk operation — allows pausing multiple customers at once (e.g. batch offboarding partial portfolio).
Support Ops
Bulk Actions Not in Dashboard
Support Ops is the only role that did NOT include a bulk action bar on the dashboard. Their focus was on the wizard and health diagnostics instead — a notable omission reflecting their ops-first perspective.
🪙
License Pool Management
All 7 roles · 10 unique features
Shared by all
CS / Sales
All 7
Pool Bar Visualisation
A horizontal bar showing total pool, allocated, and available seats — appears in the wizard and/or dashboard in every wireframe.
Unique licence features
CS / Sales
Separate Licenses Screen
Dedicated licenses page (nav item) with its own stats grid, search, and sortable allocation table — not just embedded in the dashboard.
CS / Sales
Pool Legend
Colour-coded legend alongside the pool bar explaining each segment (total, allocated, used, available) — helps MSPs understand the breakdown at a glance.
CS / Sales
License Utilization Warning Stat
Utilization stat card on the dashboard with a warning indicator (e.g. amber) when approaching pool limit — surfaces the issue before it becomes a problem.
Decider
Per-Customer Utilization Bar in Table
The Licenses page table includes a mini utilization bar per customer row (not just a percentage) — making over-allocation visible at a glance across the portfolio.
Decider
License Utilization Stat Card on Dashboard
The main dashboard includes a standalone "License Utilization" stat card (with its own mini bar) — no other role surfaces this as a primary dashboard KPI.
MSP Rep
Tier Features Display
When a tier card is selected in the wizard, a dynamically populated features list appears showing what's included — helping MSPs make the right tier choice without consulting external documentation.
Product Manager
License Gate: Block vs. Allow
Hard enforcement in the wizard: if requested seats would exceed the pool, a red "Blocked" banner prevents moving to the next step. Green "Pool OK" banner confirms it's safe. Only wireframe with hard blocking.
Product Manager
Allocation by Tier Breakdown
The Licenses page includes a secondary section showing how the pool is split across tiers (Starter / Pro / Enterprise) with bars and percentages — useful for understanding portfolio composition.
Product Manager
New Allocation Preview Bar in Wizard
The pool bar in the wizard shows not just current state but previews the new allocation if this customer is added — a before/after visualisation as the MSP types the seat count.
Support Ops
License Error State in Wizard
Inline error message on the seat count field in Step 2 when the entered number is invalid or exceeds the pool — with specific guidance on what to change.
🩺
Health & Alerts
5 of 7 roles · 9 unique features
Common pattern
CS / Sales
5 of 7
Some Form of Issue Surfacing
CS, Decider, MSP Rep, PM, and Support Ops all include a mechanism for surfacing customer health issues — but in very different forms and locations.
Unique health features
CS / Sales
Attention Strip (Top Banner)
Highest-visibility placement — a bold banner above the stats row showing the single most urgent issue. Impossible to miss on login.
Decider
Alerts Bar (Categorised)
Row of categorised alert chips below the stats cards — each showing a count and type (email failures, license alerts, sync issues). Severity-coded with colour. Designed for the decision-maker who needs to triage quickly.
Decider
Health Dot per Customer Row
Green / yellow / red / blue indicator in each row of the customer table. Blue = setup in progress. Allows the entire portfolio to be health-scanned in a single scroll.
MSP Rep
Alerts Section (Below Stats)
A dedicated alerts section on the dashboard below the stats row — presented as a list or group of alert items. Positioned to be seen immediately after the headline numbers.
Product Manager
Alerts Panel (Collapsible)
PM's alerts are in a collapsible side panel rather than inline — keeping the dashboard clean while still making alerts accessible. Each alert is actionable, linking to the affected customer.
Support Ops
Health & Diagnostics Screen
The only role that created a fully separate screen for health monitoring — accessible from the sidebar. Covers per-customer configuration issues, sync failures, email delivery problems, and recommended actions.
Support Ops
Sidebar Badge on Health Nav Item
A notification badge on the "Health & Diagnostics" sidebar link showing count of active issues — visible regardless of which page the MSP is on.
Support Ops
Email Gateway Warning (Wizard Step 4)
Proactive health feature inside the wizard — a conditional warning if the customer's email stack appears complex, prompting extra caution before testing delivery. Addresses the #1 support category.
Product Manager
Toast Notifications
Fixed-position toast at bottom-right for action confirmations and system messages. Shared with Decider — but PM uses it most systematically across all wizard steps and bulk actions.
🗂️
Navigation & Layout
All 7 roles · 7 unique features
Shared by all
CS / Sales
All 7
Fixed Left Sidebar
All 7 wireframes use a fixed left sidebar for primary navigation with logo and labelled nav items.
CS / Sales
All 7
Search + Filter on Customer Table
Every wireframe includes a search input and at least one filter (tier, status) above the customer table.
Unique nav / layout features
CS / Sales
Separate Licenses Nav Item
License management is a top-level navigation destination — not nested under settings or dashboard. Signals that license management is a primary MSP task.
CS / Sales
Separate Bulk Actions Nav Item
The only wireframe with "Bulk Actions" as its own top-level nav screen — not just a contextual bar that appears on row selection.
Engineer
Wizard as a Full Page (Not Modal)
Engineer is the only role that renders the setup wizard as a full page/view rather than a modal overlay — removing the backdrop and making the wizard the primary focus of the screen.
Support Ops
Wizard as Default Landing Screen
The only wireframe where the New Customer wizard (not the dashboard) is the default screen on load — reflecting an ops mindset where onboarding is the primary daily task.
Support Ops
Topbar with Breadcrumb
Persistent topbar showing the current page title and a breadcrumb trail — helps orient the MSP when navigating deep into settings or wizard steps.
MSP Rep
Team Nav Item
Sidebar includes a "Team" section for managing the MSP's own staff access and permissions — not just customer management. Only role to surface RBAC at the top nav level.
MSP Rep
Analytics Nav Item
Dedicated "Analytics" destination in the sidebar for cross-customer reporting — separate from the dashboard's inline stats. Signals that reporting is a standalone workflow.