Experience Customization

Use Experience Customization to establish the foundational settings that align how a user interacts with the application:

• Localization & standards: Setting language, time zone, and regional formats for currency and numbers.
• Visual accessibility: Configuring high-contrast modes, display density, and specific UI treatments (like date formatting or name display) to meet regulatory and power-user requirements.
• Role-based personalization: Tailoring the interface and feature set based on specific job responsibilities.
• Governance & privacy: Establishing data-sharing levels, security permissions, and communication preferences.
• Communications: Selecting notification channels and where alerts appear on screen.
• Workspace structure: Initializing team spaces, naming conventions, and project templates from the start.

This pattern is built on the Wizard structure:

1. Header: Contains the workflow title and a Stepper to show progress. The stepper is hidden for single-step configurations.
2. Content: area: The space for selection controls and real-time previews of changes.

The level of visual engagement for each step is determined by the complexity of the choice:

Standard components like Toggle button, Radio button, Switch, or Dropdown. Use these for functional changes where the outcome is already understood, and when visual selection elements aren’t needed or provided—enabling a simple, efficient choice.

Use Selectable card to provide a clear representation of a final state, such as a specific page layout or notification position.

A split-view layout where a visual preview container take up 50% of the width. This dynamic container updates in real-time to reflect the user’s choice.

This example focuses on functional changes. Use a searchable Dropdown for “Choose a time zone (region)” or “Choose a language,” as the search functionality is essential for navigation extensive list efficiently. For binary settings, use a Switch to provide a clear on/off state.

This example shows a progressive disclosure + reset pattern: if a user changes display density away from the business‑recommended baseline, a “Reset to recommended” action appears. When the user selects a density that may reduce accessibility (e.g., High density), show a non-blocking warning that explains the impact and offers a one-click reset back to the recommended setting. The reset action should only appear after a change, and the button label should be specific to the setting (e.g., “Reset to medium density”).

This example shows a required pattern where the user must select governance settings—such as a security tier and data‑sharing level—before setup can be finalized.