User Profile & Account Settings UI Architect

Product name: TeamHarbor Product type: Multi-tenant B2B SaaS collaboration platform Platforms: Responsive web application iOS companion app Android companion app Primary users: Small-business owners Operations managers Project managers Employees External collaborators User roles: Personal User Workspace Owner Workspace Administrator Billing Administrator Member Restricted Member Guest Collaborator Account model: One personal account can belong to multiple workspaces. Each workspace has separate members, roles, billing, integrations, and data. A user can hold a different role in each workspace. Public profile: Display name Profile photo Job title Short biography Timezone Workspace-visible contact details No fully public web profile in the initial release Private profile: Login email Recovery email Phone number Language Region Accessibility preferences Security methods Session history Authentication methods: Email and password Google sign-in Microsoft sign-in Enterprise single sign-on for approved workspaces Authenticator-app two-factor authentication Passkeys planned but not confirmed Login identifier: Primary verified email address Security features: Password changes Two-factor authentication Recovery codes Active sessions Session revocation Security alerts Enterprise SSO Exact passkey support requires verification Team and role model: Workspace Owner Administrator Billing Administrator Member Restricted Member Guest Exact permissions are supplied through a separate permission matrix Billing model: Workspace-level billing Workspace Owner or Billing Administrator can manage billing Personal users cannot change workspace billing without permission Subscription model: Free Professional Business Enterprise Monthly and annual billing Exact prices, trials, renewal dates, proration, refunds, and cancellation behavior require verification Payment methods: Card payments Invoice billing for approved Enterprise accounts Exact provider behavior requires verification Invoice requirements: Invoice list Invoice number Issue date Amount Currency Status Download Billing entity Tax information where applicable Notification channels: Email Push In-app Browser SMS for approved security events only Notification topics: Security Billing Workspace invitations Mentions Direct messages Task assignments Project updates Weekly digest Product education Marketing Privacy requirements: Workspace profile visibility Email discoverability Activity visibility Personalization Contact matching Blocked users Data export Consent history where required Consent requirements: Marketing consent Product analytics consent in relevant regions Contact-matching consent where applicable Exact legal model requires review Connected accounts: Google Microsoft Apple for mobile where supported Enterprise SSO Users must not disconnect their only login method Integrations: Google Calendar Microsoft Outlook Slack Google Drive Dropbox Zapier-style automation Exact scopes and synchronization behavior require verification Data export: Personal-account export Workspace export for authorized owners Exact contents and completion timing require verification Deactivation: Personal deactivation may be supported Workspace suspension is separate Exact behavior requires verification Account deletion: Users can request personal-account deletion. Workspace owners must transfer ownership or close the workspace first. Billing, retention, backup, legal-hold, and recovery behavior require verification. Suspension or restriction: Security lock Billing suspension Workspace restriction Policy restriction Deletion pending Regional requirements: United States European Union United Kingdom Canada Australia Accessibility target: WCAG 2.2 AA-oriented implementation review Mobile-platform accessibility review Keyboard navigation Screen-reader support 200% zoom Large text Reduced motion Localization: English German French Spanish Portuguese Japanese planned Support text expansion Right-to-left languages planned later Technology stack: Next.js React TypeScript Tailwind CSS shadcn/ui React Native Existing design system Stripe-style billing provider Enterprise identity provider Exact service integrations require verification Need output: Complete profile and account-settings architecture Account model Information architecture Responsive web settings Mobile settings Public and private profiles Personal information Security center Authentication methods Two-factor authentication Sessions and devices Connected accounts Integrations Workspace members Roles Ownership transfer Billing Subscriptions Invoices Payment failures Notifications Privacy Consent Preferences Appearance Language Accessibility settings Data export Account status Restriction states Deactivation Deletion Error states Responsive behavior Accessibility Localization Analytics Experiment roadmap Developer handoff Acceptance criteria Regression tests QA checklist Risk assessment Need variations: Simple MVP Settings Enterprise Trust Center Mobile-First Account Settings Special constraints: Do not invent prices. Do not invent proration. Do not invent retention periods. Do not invent deletion timing. Do not expose private member data. Do not hide cancellation. Do not hide account deletion. Do not allow unsafe disconnection of the only login method. Do not use unsupported security scores. Do not mix personal and workspace settings.

=== USER PROFILE & ACCOUNT SETTINGS ARCHITECTURE === Product: TeamHarbor Platforms: Responsive web, iOS, and Android Account Model: One personal identity with membership in multiple independent workspaces. Primary Settings Principle: Every setting must clearly indicate whether it affects the individual user, current workspace, or organization. === EXECUTIVE SUMMARY === TeamHarbor requires three distinct settings scopes: 1. Personal Account 2. Current Workspace 3. Organization or Enterprise Controls The current workspace should remain visible in the settings header whenever a workspace-level setting is being changed. Personal security, login identity, language, accessibility, and private profile information should remain consistent across workspaces. Workspace members, roles, billing, integrations, workspace security, and ownership should remain workspace-specific. The highest-risk areas are: - confusion between personal and workspace settings - unsafe login-provider disconnection - unclear billing ownership - incomplete ownership-transfer handling - hidden cancellation or deletion consequences - ambiguous privacy scope - inconsistent save behavior === SETTINGS INFORMATION ARCHITECTURE === Personal Account: - Profile - Personal Information - Security - Sessions and Devices - Notifications - Privacy - Preferences - Connected Login Methods - Personal Data - Account Actions Workspace: - General - Members - Roles and Permissions - Integrations - Workspace Notifications - Security - Billing - Subscription - Invoices - Data - Ownership - Workspace Actions Enterprise: - Single Sign-On - Provisioning - Security Policies - Audit Controls - Billing Administration - Exact capabilities require verification === WEB SETTINGS NAVIGATION === Desktop: Persistent left sidebar with scope switcher above the category list. Header: - Current settings scope - Current workspace - User role - Unsaved-change state where relevant Content: Single primary column for forms. Optional secondary summary for billing or security. Avoid excessive form width. Mobile: Settings index → Category → Subsection → High-risk full-screen flow where necessary Do not reproduce the full desktop sidebar on mobile. === PROFILE ARCHITECTURE === Workspace-Visible Profile: - Display name - Profile photo - Job title - Short biography - Timezone - Approved contact information Private Account Information: - Login email - Recovery email - Phone number - Region - Language - Accessibility preferences Rules: - Explain visibility for every workspace-visible field. - Show a profile preview before saving major public changes. - Keep legal or billing identity outside the public profile. - Use fictional or masked profile data in examples. === EMAIL MANAGEMENT === Current Login Email: s***@example.com Status: Verified Change Flow: Current Email → Enter New Email → Reauthenticate → Verify New Email → Confirm Change Required States: - Verification pending - New email already in use - Reauthentication failed - Verification expired - Change completed - Change failed Do not state that notifications are sent to the previous address unless verified. === SECURITY CENTER === Security Overview: - Password - Two-Factor Authentication - Recovery Codes - Active Sessions - Login Providers - Enterprise SSO - Recent Security Activity Do Not: Display an unsupported numeric security score. Priority Status: Show specific actions such as: Two-factor authentication is not enabled. A recovery method requires attention. A session was recently added. Only use verified security states. === TWO-FACTOR AUTHENTICATION === Method: Authenticator App Flow: 1. Explain the security benefit. 2. Reauthenticate. 3. Display setup code. 4. Verify one-time code. 5. Generate recovery codes. 6. Confirm secure storage. 7. Activate. 8. Show success. States: - Off - Setup Started - Verification Pending - Active - Recovery Required - Disable Pending - Failed Never display real recovery secrets in public documentation. === SESSIONS AND DEVICES === Display: - Device - Operating system - Browser or app - Approximate location where approved - Last active - Current session Actions: - Sign Out - Sign Out All Other Sessions High-Risk Action: Require confirmation and verified reauthentication where approved. === CONNECTED LOGIN METHODS === Google: Connected Microsoft: Connected Password: Set Rule: A user may disconnect a provider only when another verified authentication method remains available. Unsafe Disconnection: Given Google is the only available login method, when the user selects Disconnect, then TeamHarbor prevents the action and explains how to add a password or another verified provider first. === WORKSPACE MEMBERS === Member Row: - Name - Email - Role - Status - Last active where approved - Actions Member Actions: - Change Role - Resend Invitation - Suspend Access - Remove Member Role Change: Show the difference between current and new permissions before confirmation. Removal: Explain access loss, assigned work, shared resources, and verified content-transfer behavior. === OWNERSHIP TRANSFER === Prerequisites: - New owner is an eligible active member. - New owner accepts ownership where required. - Billing and security dependencies are reviewed. Flow: Select New Owner → Review Consequences → Reauthenticate → Confirm → Process → Notify Stakeholders Do not invent transfer timing or reversibility. === BILLING OVERVIEW === Scope: Current Workspace Billing Owner: Workspace Owner or Billing Administrator Display: - Current plan - Status - Verified price - Currency - Billing cadence - Renewal or end date - Default payment method - Billing contact - Invoice access - Cancellation state Every value requires verified billing data. === SUBSCRIPTION STATES === - Free - Trial Eligible - Trial Active - Active - Payment Failed - Grace Period - Cancelled With Access Remaining - Expired - Enterprise Managed Do not invent trial availability, grace periods, proration, refunds, or renewal dates. === CHANGE PLAN FLOW === Current Plan → Compare Plans → Review Feature Differences → Review Effective Date → Review Billing Impact → Confirm → Process → Result The billing impact must come from the verified billing service. === PAYMENT FAILURE === Heading: Payment Method Needs Attention Message: We could not complete the latest billing action. Required Context: - Affected workspace - Current access status - Verified next step - Update Payment Method - Contact Billing Support Do not state when another charge attempt will occur unless verified. === INVOICES === Columns: - Invoice - Date - Amount - Currency - Status - Download Mobile: Convert each invoice into an accessible summary card. Empty State: No invoices are available for this workspace. === NOTIFICATION SETTINGS === Topics: - Security - Billing - Workspace Invitations - Mentions - Direct Messages - Task Assignments - Project Updates - Weekly Digest - Product Education - Marketing Channels: - Email - Push - In-App - Browser - SMS for approved security events Required Communications: Security and billing notifications may remain mandatory according to verified product and legal requirements. Save Model: Immediate save for low-risk toggles with visible success and failure feedback. === PRIVACY CENTER === Categories: - Workspace Profile Visibility - Contact Discoverability - Activity Visibility - Personalization - Product Analytics - Marketing Consent - Contact Matching - Blocked Users - Data Export - Account Deletion Plain-Language Example: Label: Allow workspace members to find me by email Description: When enabled, members of workspaces you belong to may find your account using your verified email address. Use only if that behavior is accurate. === PERSONAL PREFERENCES === - Language - Region - Timezone - Date Format - Time Format - Theme - Density - Reduced Motion - Accessibility Preferences - Default Workspace Changing region should not imply changes to pricing, tax, legal terms, or availability unless verified. === DATA EXPORT === Personal Export: Available to the individual user. Workspace Export: Available only to authorized workspace roles. Flow: Choose Scope → Review Included Data → Reauthenticate → Request Export → Processing → Ready → Expired or Failed Do not promise preparation time without verified service behavior. === ACCOUNT STATUS STATES === Active: Full verified access. Email Verification Pending: Limited account behavior according to verified rules. Security Locked: Access restricted pending approved recovery. Workspace Restricted: Workspace actions limited while personal account remains accessible where supported. Billing Suspended: Billing-dependent workspace access affected according to verified rules. Deletion Pending: Account status and remaining access depend on verified deletion behavior. === PERSONAL ACCOUNT DELETION === Entry: Personal Account → Account Actions → Delete Account Before Confirmation: - Explain personal-data impact. - Explain workspace-membership impact. - Explain workspace-ownership blockers. - Explain subscription impact. - Offer personal export where supported. - Require verified reauthentication. - Explain verified retention and recovery behavior. Ownership Block: Given the user owns an active workspace, when account deletion begins, then the flow explains that ownership must be transferred or the workspace must be closed through the verified process. Do not hide the deletion action behind unrelated retention steps. === SAVE BEHAVIOR === Immediate Save: - Notification preferences - Theme - Low-risk visibility controls Explicit Save: - Profile forms - Personal information - Workspace details Review and Confirm: - Login email - Security methods - Role changes - Billing changes - Ownership transfer - Deactivation - Deletion === RESPONSIVE ARCHITECTURE === Desktop: - Scope switcher - Persistent settings navigation - Focused content column - Accessible tables for sessions, members, and invoices Tablet: - Collapsible navigation - Single-column forms - Reduced table columns - Full-width dialogs where required Mobile: - Settings index - Shallow navigation - Card-based sessions and invoices - Full-screen security and deletion flows - Keyboard-safe forms - Large-text support - Separated Account Actions section - No page-level horizontal scrolling === ACCESSIBILITY REQUIREMENTS === - Semantic headings - Clear form labels - Accessible descriptions - Error associations - Visible keyboard focus - Logical screen-reader order - Accessible toggles - Large touch targets - Non-color status indicators - Accessible tables - Dialog focus management - Bottom-sheet focus behavior - 200% zoom and reflow - Large-text support - Reduced motion - Clear destructive-action language - No claim of conformance without testing === ANALYTICS EVENT MAP === Event: settings_opened Properties: - category - scope - platform Event: two_factor_enabled Properties: - method_category - platform Event: integration_disconnected Properties: - integration_id - scope Event: plan_change_started Properties: - current_plan - target_plan - workspace_type Event: data_export_requested Properties: - export_scope - platform Event: account_deletion_started Properties: - account_state - ownership_block_present Privacy: Do not record passwords, recovery codes, full payment details, private profile values, exported content, or authentication secrets. === EXPERIMENT ROADMAP === Experiment 1: Settings Scope Labels Hypothesis: Persistent Personal or Workspace labels will reduce incorrect-setting changes. Primary Metric: Completed setting changes without immediate reversal Guardrail: Settings abandonment Experiment 2: Security Center Summary Hypothesis: Displaying specific security actions will increase qualified security setup. Primary Metric: Completed two-factor authentication setup Guardrail: Recovery-related support contact Experiment 3: Notification Matrix Hypothesis: Separating topics from channels will improve preference comprehension. Primary Metric: Successful preference changes Guardrail: Immediate preference reversal Do not test hiding billing, privacy, cancellation, or deletion information. === DEVELOPER HANDOFF === Primary Routes: - /settings/profile - /settings/account - /settings/security - /settings/sessions - /settings/notifications - /settings/privacy - /settings/preferences - /settings/data - /settings/account-actions - /workspace/[id]/settings/members - /workspace/[id]/settings/integrations - /workspace/[id]/settings/billing - /workspace/[id]/settings/security - /workspace/[id]/settings/data Route names should follow the actual project architecture. Required Components: - SettingsShell - SettingsScopeSwitcher - SettingsNavigation - SettingsSection - ProfileForm - SecuritySummary - SessionList - ConnectedProviderCard - IntegrationCard - BillingSummary - SubscriptionStatus - InvoiceList - NotificationMatrix - PrivacyControl - MemberList - RoleChangeDialog - OwnershipTransferFlow - DataExportPanel - AccountStatusBanner - AccountDeletionFlow === ACCEPTANCE CRITERIA === Settings Scope: Given a user belongs to multiple workspaces, when the user opens a workspace setting, then the active workspace and setting scope remain visible. Public and Private Identity: Given a user edits a display name and billing name, when changes are reviewed, then the interface explains where each value appears. Unsafe Provider Disconnection: Given a connected provider is the only login method, when the user attempts to disconnect it, then the action is blocked until another verified recovery method exists. Billing Transparency: Given a billing administrator opens Subscription, when data loads, then the verified plan, status, price, currency, cadence, renewal or end date, and cancellation state are visible. Notification Save: Given a notification preference is changed, when saving completes or fails, then the final state is explicit and no silent failure occurs. Deletion Ownership Block: Given the user owns a workspace, when personal deletion begins, then the flow presents the verified ownership-transfer or workspace-closure requirement. Accessibility: Given settings are viewed at 200% zoom, when the interface reflows, then navigation, forms, tables, dialogs, and account actions remain readable and operable. === REGRESSION TEST MATRIX === Account Roles: - Personal User - Workspace Owner - Administrator - Billing Administrator - Member - Restricted Member - Guest Authentication: - Password - Google - Microsoft - SSO - Two-Factor Enabled - Two-Factor Disabled - Recovery Required Billing: - Free - Trial - Active - Payment Failed - Cancelled - Expired - Enterprise Managed Account Status: - Active - Verification Pending - Restricted - Suspended - Deactivated - Deletion Pending Responsive: - Small Mobile - Standard Mobile - Tablet - Laptop - Desktop - 200% Zoom - Large Text Accessibility: - Keyboard - Screen Reader - Visible Focus - Reflow - Reduced Motion - Dialogs - Tables - Forms === QA CHECKLIST === Account Model: - Verify scopes. - Verify ownership. - Verify roles. - Verify billing owner. Profile: - Verify public fields. - Verify private fields. - Verify visibility. - Verify validation. - Verify save behavior. Security: - Verify password. - Verify two-factor authentication. - Verify recovery. - Verify sessions. - Verify provider disconnection. Billing: - Verify plan. - Verify currency. - Verify cadence. - Verify renewal. - Verify payment methods. - Verify invoices. - Verify failures. - Verify cancellation. Notifications: - Verify topics. - Verify channels. - Verify required messages. - Verify immediate save. - Verify failure recovery. Privacy: - Verify plain language. - Verify scope. - Verify discoverability. - Verify consent. - Verify export. - Verify deletion. Team: - Verify invitations. - Verify role changes. - Verify removal. - Verify ownership transfer. - Verify workspace departure. Accessibility: - Verify headings. - Verify labels. - Verify errors. - Verify focus. - Verify keyboard operation. - Verify screen readers. - Verify zoom. - Verify large text. - Verify non-color states. === RISKS === Risk: Users modify the wrong workspace. Mitigation: Keep the active scope and workspace visible throughout the settings experience. Risk: A user disconnects the only login method. Mitigation: Require another verified authentication or recovery method first. Risk: Billing information is incomplete. Mitigation: Display verified plan, price, cadence, renewal, payment, and cancellation status together. Risk: Privacy controls use vague language. Mitigation: Describe the actual data use and consequence in plain language. Risk: Deletion is presented as complete when retained records remain. Mitigation: Use verified retention, backup, legal-hold, and recovery information. Risk: Sensitive values enter analytics. Mitigation: Use event metadata that excludes passwords, payment details, recovery secrets, private profile values, and exported content. === KNOWN LIMITATIONS === - Authentication behavior requires technical and security verification. - Authorization requires the approved permission matrix. - Billing and subscription behavior require payment-provider validation. - Consent and privacy require qualified legal review. - Retention and deletion require verified policy and backend behavior. - Accessibility requires implementation testing. - Localization requires professional review. - Analytics require privacy validation. - The architecture does not guarantee security, compliance, reduced churn, fewer support requests, or higher conversion. === FINAL INTEGRITY NOTE === All authentication, authorization, billing, subscriptions, payments, refunds, permissions, consent, privacy, data retention, data export, account recovery, suspension, deletion, security, legal disclosures, and platform-specific behavior must be verified before implementation. Do not describe account deletion as immediate, complete, reversible, or irreversible unless the actual behavior is confirmed. The account-settings architecture is designed to improve clarity, trust, security awareness, self-service completion, accessibility, and implementation consistency. It does not guarantee lower churn, fewer support requests, legal compliance, security, privacy, or higher conversion.