figma guide
Designing SLA dashboard and uptime reporting UI in Figma: targets, credits, and customer-facing reports
Design SLA dashboard and uptime reporting UI in Figma with SLO targets, error budgets, service credits, monthly reports, and customer portal exports for B2B SaaS teams.
- Published
- Updated
- Jul 28, 2026
- Read time
- 9 min
- Level
- Intermediate
Quick answer
SLA dashboard and uptime reporting UI turns contractual promises into measurable, auditable numbers—SLO targets, error budgets, incident deductions, and customer-facing monthly reports. Design an internal SLA hub with per-service uptime, downtime windows, and credit eligibility; a customer portal view with contract-specific targets; a service credit request flow when thresholds breach; and exportable monthly reports aligned with status page history. Start from the Figma guides hub and pair with BCP/DR planning, post-incident review, tables, badges, and Dev Mode handoff.
Who this is for
- Product designers building SLA modules inside customer success, billing, or trust platforms for B2B SaaS.
- Design system teams aligning uptime percentage displays, error budget gauges, and credit status chips with progress indicators and color tokens.
- Engineering and finance teams implementing uptime calculation engines, credit automation, and contract-tier SLA mapping.
SLA hub (internal overview)
SLAHub — Org: Acme Cloud · Reporting period: July 2026
├── Header: Contracts 312 · At risk 4 · Credits pending 2 · Uptime avg 99.94%
├── Actions: [ Generate monthly reports ] [ Review credit requests ] [ Export audit pack ]
├── Tabs: Services · Contracts · Incidents · Credits · Reports · Settings
├── Alert: payments-api below 99.9% monthly target · 47m remaining budget
└── Link: Status page history · PIR actions · BCP service catalog| Section | Purpose |
|---|---|
| Services | Per-component uptime vs SLO target |
| Contracts | Customer-specific SLA tiers and add-ons |
| Incidents | Downtime windows linked to status page incidents |
| Credits | Eligibility queue and approval workflow |
| Reports | Monthly PDF/CSV generation and delivery log |
| Settings | Calculation rules, excluded maintenance, rounding |
Verdict: SLA hub is contractual truth—uptime numbers must reconcile with public status page history and internal war room timestamps.
Service uptime dashboard
ServiceUptime — payments-api · SLO 99.9% monthly
├── Current month: 99.87% · Target 99.9% · Status: At risk (amber badge)
├── Error budget: 43m consumed / 43m total · 0m remaining
├── Chart: Daily uptime bars · Incidents marked as red ticks
├── Downtime log:
│ 2026-07-14 09:12–09:47 · INC-PUB-038 · 35m · Excluded: No
│ 2026-07-22 14:01–14:09 · INC-PUB-041 · 8m · Excluded: No
├── Maintenance excluded: 2026-07-02 02:00–04:00 · Planned · 0m counted
└── [ Link to status incident ] [ Open PIR ] [ Flag for credit review ]| Metric | UI detail |
|---|---|
| Uptime % | Rolling monthly; tooltip shows formula (total − downtime) / total |
| SLO target | Per contract tier; may differ from internal SLO |
| Error budget | Remaining minutes/hours before breach; gauge component |
| Downtime window | Start/end UTC; link incident ID |
| Excluded flag | Planned maintenance, customer-caused, force majeure |
| At-risk badge | Projected breach before month end based on trend |
Map services to BCP catalog tiers—Critical services often carry stricter contractual SLAs.
Contract-specific SLA tiers
ContractSLA — Customer: Globex Corp · Plan: Enterprise Plus
├── API uptime: 99.95% monthly · Support response: P1 15m
├── Dashboard uptime: 99.9% monthly
├── Webhooks: 99.5% monthly · Best-effort delivery SLA
├── Credit policy: 10% monthly fee per 0.1% below target (cap 30%)
├── Reporting: PDF by 5th business day · Portal access ✓
├── Custom addendum: EU region 99.99% · Overrides default API target
└── [ View signed contract ] [ Edit tier mapping ] [ Preview customer portal ]| Field | Handoff detail |
|---|---|
| Customer | Links CRM/account record |
| Plan tier | Maps default SLO set |
| Per-service targets | Override table when addendum exists |
| Credit formula | Percentage tiers; max cap; currency |
| Reporting cadence | Monthly, quarterly; delivery method |
| Portal visibility | Which metrics customer sees vs internal-only |
| Effective dates | Mid-contract tier changes need historical snapshots |
Enterprise deals often have custom SLAs—design override UI, not one-size-fits-all defaults.
Service credit request flow
CreditRequest — CR-2026-0089 · Globex Corp · Status: Pending finance
├── Trigger: API uptime 99.87% vs target 99.95% · July 2026
├── Calculated credit: $4,280 (12% of monthly fee) · Formula v2.1
├── Evidence: Downtime log (43m) · Status incidents INC-038, INC-041
├── Customer message: "We experienced two incidents affecting API availability..."
├── Internal notes: Finance approved formula · CS requested expedited
├── Approvals: [x] CS lead · [x] Legal (template) · [ ] Finance · [ ] Auto-apply
└── Actions: [ Adjust amount ] [ Deny with reason ] [ Schedule apply date ]| Step | UI pattern |
|---|---|
| Auto-eligibility | System flags breach; CS reviews before customer notify |
| Calculation preview | Show formula, inputs, rounding |
| Evidence bundle | Link incidents, downtime log, status page archive |
| Approval chain | Role-based; Legal for template changes only |
| Customer notification | Email template with credit amount and next invoice line |
| Deny path | Reason codes: excluded downtime, force majeure, below threshold |
| Audit trail | Log in audit log |
Use forms patterns for adjustment reason and modals for deny confirmation.
Customer portal SLA view
CustomerPortal — SLA & Uptime · Globex Corp (read-only)
├── Summary: July 2026 · API 99.87% · Target 99.95% · Credit pending
├── Uptime chart: 90-day rolling · Same data as public status page
├── Monthly reports: [ Download July PDF ] [ Download June PDF ]
├── Incident history: Linked from [status page](/designing-customer-incident-status-page-and-communication-ui-in-figma/) · Redacted summaries
├── Credit status: Request submitted · Expected response by 2026-08-05
├── Subscribe: Email when monthly report ready
└── FAQ: How uptime is calculated · What counts as downtime · Credit policy link| Element | Design note |
|---|---|
| Summary cards | Large uptime %; target below; status badge |
| Historical chart | Match public status page calculation |
| Report downloads | PDF with digital signature optional |
| Credit tracker | Status stepper: Submitted → Approved → Applied |
| Calculation FAQ | Expandable; link to trust center doc |
| Multi-product | Tab per service group if customer uses several |
Portal numbers must match what Finance invoices—show “as of” timestamp on every metric.
Monthly report generator
ReportGenerator — July 2026 · Batch 312 customers
├── Template: Enterprise SLA v3 · Locale EN · PDF + CSV attachment
├── Sections: Executive summary · Uptime by service · Incident table · Credit notice
├── Preview: Globex Corp · 4 pages · Incidents 2 · Credit line included
├── Schedule: Generate 2026-08-01 06:00 UTC · Email 2026-08-05 09:00 customer TZ
├── Exclusions applied: 14 maintenance windows · 3 force majeure flags
└── [ Run test batch (5) ] [ Generate all ] [ Export delivery log ]| Report section | Content |
|---|---|
| Executive summary | Month uptime vs target; credit yes/no |
| Service breakdown | Table with target, actual, delta |
| Incident appendix | ID, duration, affected components, public summary |
| Credit notice | Amount, application date, invoice reference |
| Methodology footer | Calculation version, excluded categories |
| Branding | Customer logo optional; Acme trust mark |
Batch generation needs progress UI and failure retry per customer—use loading states during run.
Comparison: internal SLO vs contractual SLA
| Dimension | Internal SLO | Contractual SLA |
|---|---|---|
| Audience | Engineering, SRE | Customer, Legal, Finance |
| Target | Often stricter (99.95%) | Contract-defined (99.9%) |
| Measurement | Real-time error budget | Monthly rollup |
| Consequence | Deploy freeze, escalation | Service credits, renewal risk |
| Visibility | Internal dashboards | Customer portal, PDF reports |
| Data source | Same incident timestamps | Same—must reconcile |
Design one incident timestamp source feeding both views—never duplicate calculation logic in UI copy alone.
Handoff checklist (Dev Mode)
- Uptime formula — versioned spec; tooltip references doc ID.
- Service-to-component map — aligns status page, BCP catalog, SLA rows.
- Contract tier schema — defaults, overrides, effective dates.
- Credit formula — inputs, rounding, cap; per-tier variants.
- Excluded downtime reasons — enum list; audit required for manual exclude.
- Report template — PDF layout tokens; pagination rules for long incident lists.
- Portal permissions — read-only role; hide internal SLO columns.
- Timezone — all timestamps UTC with customer-local display option.
- Accessibility — uptime gauges have text equivalent; charts have data table fallback.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Portal ≠ status page numbers | Customer trust collapse | Single calculation engine; show sync timestamp |
| Credits auto-applied without review | Finance disputes | CS approval gate before customer notify |
| Missing maintenance exclusion UI | Inflated downtime | Explicit exclude flow with reason + approver |
| One SLA for all tiers | Enterprise deal gaps | Contract override table |
| No historical snapshots | Retroactive tier changes break reports | Effective-date versioning |
| Rounding inconsistencies | Penny credit arguments | Document rounding in formula tooltip |
| Incident not linked to downtime | Audit failure | Require incident ID for every counted window |
| No credit deny path | CS stuck on edge cases | Reason-coded deny with customer template |
| PDF differs from portal | Support tickets | Same template engine for both |
| Ignoring multi-region SLAs | EU customers see wrong target | Region column on contract mapping |
Recommended workflow
- Design internal SLA hub with service uptime, error budget gauges, and incident-linked downtime log.
- Build contract tier mapping with override support for enterprise addenda.
- Create service credit request flow with calculation preview, approvals, and audit trail.
- Design customer portal view mirroring status page data with report downloads.
- Spec monthly report generator with batch progress, preview, and delivery log.
- Document calculation methodology in trust center and link from portal FAQ.
FAQ
SLA dashboard vs status page?
Status page is real-time operational comms during incidents. SLA dashboard is contractual measurement over reporting periods—same incidents, different aggregation and business consequences.
Error budget vs service credit?
Error budget is an internal SRE tool for release decisions. Service credits are customer compensation when contractual SLA breaches—related but separate workflows.
How to handle PIR disputed downtime?
Add dispute flag on downtime row; freeze credit calculation until PIR closes; show “under review” in portal.
Planned maintenance and SLA?
Design exclusion workflow with customer notification requirement for enterprise tiers—maintenance window object links to status page scheduled banner.
Multi-month credit caps?
Surface rolling cap in credit preview (e.g., max 30% quarterly)—Finance rule as configurable input.
Next steps
- Design customer incident status page and communication UI in Figma — incident source for downtime windows
- Design business continuity and disaster recovery planning UI in Figma — service tiers map to SLA targets
- Design post-incident review and root cause analysis UI in Figma — disputed downtime resolution
- Design trust center and security documentation UI in Figma — SLA methodology public docs
- Figma tables and data UI — downtime logs and contract mapping tables
§ Keep reading
Related guides.
figma guide 9m
Designing customer incident status page and communication UI in Figma: components, subscriptions, and updates
figma guide 10m
Designing trust center and security documentation UI in Figma: certifications, policies, and request workflows
figma guide 9m