Skip to main content
UI Coach Logo
Advanced

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

The brief

Understand the problem

Background

A compromised or aging API key must be replaced, but immediate revocation can interrupt production services. Teams need overlapping validity, usage evidence, scoped permissions, and a clear final cutoff.

User context

Maya maintains a payments integration used by three services. She needs to rotate its key after a staff change and confirm every client has migrated before revoking the old credential.

Product problem

Rotation should be fast under pressure while preventing accidental disclosure, indefinite overlap, and revocation of the wrong credential.

Objective

Create key inventory, replacement generation, migration monitoring, and old-key revocation for one production integration.

What to design

Define the experience

Required experience

  • Inspect key scope, owner, age, and recent use
  • Generate a replacement with appropriate permissions
  • Track old and new key usage during overlap
  • Revoke the old key with a final impact check

Screens and states

  • Credential inventory
  • Rotation setup
  • Migration monitor
  • Revocation review

Core user flow

Follow the critical path

  1. 01

    Maya opens the aging payments key and confirms its three consumers

  2. 02

    She creates a scoped replacement and copies it once

  3. 03

    The monitor shows two services migrated and one still using the old key

  4. 04

    After the final service switches, she revokes the old key and records the reason

Product rules

Requirements and constraints

Requirements

  • Reveal secret material only once with safe copy handling
  • Show key fingerprint, scope, owner, environment, age, and last use
  • Separate key creation from old-key revocation
  • Require impact review, typed confirmation, and an audit event for revocation

Constraints

  • Raw key values cannot be retrieved later
  • Overlap must have a configurable expiry
  • Users may rotate only credentials within their authorized environment

Reality check

States worth considering

The new key is lost before storage
Usage telemetry is delayed
An unknown client still uses the old key
The key is actively compromised

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.

Key consumers

  • checkout-api, old key last used 2 minutes ago
  • refund-worker, new key active
  • billing-sync, old key last used 18 minutes ago

Finish line

What to deliver

  • Four desktop screens covering planned rotation and emergency revocation

Optional direction

Visual resources

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

Font pairing
RalewayLato

Raleway & Lato

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

Icons
Illustrations

Keep practicing

Advanced
Developer tools

CI Failure Triage

Design a build-results view that helps a developer distinguish code regressions, flaky tests, and infrastructure failures.

Desktop web2 to 4 hours
Information HierarchyError Handling
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
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
Intermediate
Developer tools

First Successful SDK Request

Design an SDK onboarding path that gets a developer from project setup to a verified request with useful recovery guidance.

Desktop web2 to 4 hours
Content DesignInformation Architecture
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