FIGR / UI TEMPLATE

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

BUILD ON THIS

Make it yours in Figr.

Explore this screen, then bring in your own product and design system to shape the next version.

Use this template ↗

At a glance

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 with

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.

What to look for

  • 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 to consider

  • 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 it fits

Trial → Usage → Choose plan → Review outcome

Patterns in this screen

Onboarding, Trial, Usage, contextual actions, error recovery

UX choices to review

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.

Try a similar screen 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

KEEP EXPLORING

More ways to approach your next screen.

Browse other product UI examples, compare patterns, and pick the direction that suits your product.

Explore all 500 templates ↗