Skip to main content
UI Coach Logo
Advanced

Feature Rollout Monitor

Design a feature-flag dashboard that helps a product team expand, pause, or roll back a release using defined guardrails.

Desktop web4 hours plus

The brief

Understand the problem

Background

A gradual release spreads risk, but teams can misread noisy metrics or change exposure without understanding audience rules. Rollout decisions need current data, an owner, and reversible controls.

User context

Sanjay owns a new checkout flow currently enabled for ten percent of eligible users. Conversion is stable, but mobile error rates have increased near the agreed rollback threshold.

Product problem

Teams need to connect exposure, targeting, health metrics, and decision history before changing a live flag.

Objective

Create rollout overview, segment investigation, change review, and rollback confirmation for one production feature.

What to design

Define the experience

Required experience

  • Review current exposure, audience, owner, and guardrails
  • Investigate a metric by segment and release window
  • Propose a percentage or targeting change
  • Approve expansion, pause, or rollback and monitor the result

Screens and states

  • Rollout overview
  • Segment health detail
  • Change proposal
  • Rollback status

Core user flow

Follow the critical path

  1. 01

    Sanjay sees the mobile error rate approaching its threshold

  2. 02

    He compares affected versions and confirms exposure alignment

  3. 03

    He proposes pausing new enrollment while retaining current users

  4. 04

    An authorized reviewer approves the change and the monitor tracks recovery

Product rules

Requirements and constraints

Requirements

  • Show data freshness, sample size, guardrail definitions, and current exposure
  • Separate target population from actually exposed users
  • Preview who gains or loses access before a change
  • Log proposer, approver, rationale, and resulting configuration

Constraints

  • Production changes require environment-specific permission
  • Noisy metrics must show uncertainty
  • Emergency rollback needs a fast path without losing audit detail

Reality check

States worth considering

Telemetry arrives late
Targeting rules overlap
The flag service is unavailable
A rollback changes stored user state

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Guardrails

  • Checkout completion above 93 percent
  • Mobile error rate below 1.2 percent
  • Support contacts below 30 per 10,000 sessions

Exposure

  • Eligible users: 420,000
  • Current target: 10 percent
  • Actually exposed: 39,840

Finish line

What to deliver

  • Four desktop screens with pause and rollback decision states

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
LoraSource Sans Pro

Lora & Source Sans Pro

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Developer tools

Code Review Load Balancer

Design a review queue that helps an engineering team assign pull requests by expertise, urgency, and reviewer capacity.

Desktop web2 to 4 hours
Dashboard DesignInformation Architecture
Advanced
Developer tools

Collaborative Incident Timeline

Design an incident workspace that turns live technical events, decisions, and communications into a trustworthy shared timeline.

Desktop web4 hours plus
Dashboard DesignInformation Architecture
Advanced
Developer tools

Database Migration Approval

Design a release gate for reviewing and approving a production database migration with rollback and ownership evidence.

Desktop web4 hours plus
Trust and SafetyInformation Hierarchy
Advanced
Developer tools

Observability Alert Router

Design routing rules that send operational alerts to the correct on-call team while controlling noise and fallback behavior.

Desktop web4 hours plus
Information ArchitectureInteraction Design
Advanced
Fintech

Understand a Small Business Cash Position

Design a finance dashboard that connects revenue, expenses, payroll obligations, and cash runway without hiding data uncertainty.

Desktop web4 hours plus
Dashboard DesignData Visualization
Advanced
Developer tools

Zero-Downtime API Key Rotation

Design a developer console flow for rotating a production API key without breaking active clients or exposing secret values.

Desktop web2 to 4 hours
Trust and SafetyInteraction Design