FIGR / UI TEMPLATE

Benefits Enrollment

Compare benefit plans, add dependents, choose coverage, and confirm elections with clear cost and eligibility context.

This form reference covers hr & self-service. Its sample screen includes Medical plan selection and Dental and vision and the Review elections action. Adapt its workflow to your product and design system.

Benefits Enrollment

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

Form

Primary action

Review elections

Pattern

Benefits enrollment

State

Default, loading, empty, error, permission, success

Design system

Adaptable product UI theme

What this screen helps with

The benefits enrollment screen supports “Review elections” while keeping plans and dependents in view. It should show the current state even when data is missing or access is restricted.

What to look for

  • Primary action: Review elections
  • Main area: Plans brings the user to the relevant workflow
  • Related area: Dependents keeps nearby context accessible
  • Plans: 6 in the sample screen
  • Covered people: 3 in the sample screen
  • Example 1: Medical plan selection
  • Example 2: Dental and vision

States to consider

  • Default: Show the main workflow and its available next step
  • Loading: Disable duplicate submits while keeping entered values visible
  • Empty: Show required inputs and help people start without a blank form
  • Error: Keep filled fields and identify the exact problem to fix
  • Access: Show which actions require a role or permission
  • Success: Confirm the result after Review elections and say what happens next

Where it fits

Plans → Dependents → Review elections → Review result

Patterns in this screen

Benefits enrollment, Plans, Dependents, permission handling, error recovery

UX choices to review

State input requirements before the user submits the form

In this example, Medical plan selection is one of the records worth checking. Keep the sample data clearly separate from a live system.

Keep progress and entered values when people move between steps

Show clear permission, validation, and recovery states near the affected control

Try a similar screen in Figr

Design a benefits enrollment screen for an existing hr & self-service product. Use our actual design system, components, and content rules. Cover Plans and Dependents, include believable records such as Medical plan selection, and make "Review elections" easy to find. Map empty, loading, error, permission, and success states. Keep the result 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 ↗