Trial Expiry

Explain what happens when a trial ends, show current usage and saved work, and make the upgrade or downgrade path clear before access changes. This example brings Trial and Usage together so account administrators can find the next task without losing context.

It includes representative records such as Review current usage and Compare plan options. Use the screenshot to study the layout, then adapt its components and product states to your own design system.

Trial Expiry
Use this template in Figr

Template facts

Screen

Onboarding

Primary action

Choose plan

Pattern

Onboarding

State

Default, loading, empty, error, permission, success

Design system

Configurable product UI theme

What this screen helps users do

Finance and operations teams need to choose plan while keeping days left, projects and exceptions visible. The interface should show what changed and who should act next.

Key elements

  • Main workspace: Trial gives users an obvious place to start.
  • Supporting view: Usage keeps the related context close.
  • Primary action: Choose plan stays visible when people need it.
  • First signal: Days left shows a useful value (2).
  • Second signal: Projects gives additional context (7).
  • Sample record: Review current usage.
  • Next record: Compare plan options.

States worth designing

  • No setup steps complete: say what changed, protect progress, and offer a clear next step.
  • Step in progress: say what changed, protect progress, and offer a clear next step.
  • Identity check failed: say what changed, protect progress, and offer a clear next step.
  • Invite sent: say what changed, protect progress, and offer a clear next step.
  • Access denied: say what changed, protect progress, and offer a clear next step.
  • Setup complete: say what changed, protect progress, and offer a clear next step.

Where this screen sits in the flow

Trial → Usage → Choose plan → Review outcome

Patterns used

Onboarding, Trial, Usage, contextual actions, error recovery

Why these choices work

Make each setup step and completion state clear. Allow admins to resume without repeating the work they finished.

Pay attention to trial and usage. People need to distinguish Review current usage from Compare plan options. Keep days left visible, especially when a record changes owner or status.

Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Choose plan”. Make error recovery as clear as the happy path.

Related screen examples to explore next: Credit Balance, Invoice Detail, Seat Management.

Start from this in Figr

Design a trial expiry screen inside our existing product. Use our current components, tokens and content language. Include Trial and Usage views, credible records like Review current usage, and a clear “Choose plan” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.

Open Figr