Integration page UI/UX revamp | Clixio Changelog

/in ,

Integration Page is now faster, cleaner, and more structured, providing a significantly improved user experience.

We have modernised the layout with a consistent card-based design, eliminating ad-hoc flexibility to avoid future inconsistencies. In addition, several technical improvements have resolved legacy issues, enhancing long-term scalability.

Settings → Labs → Toggle on “Revamped Integration Page”

  • Structured card layout with a single primary CTA
  • Dedicated 3-dot menu for integration-specific options, including: support documentation, form mapping, troubleshooting, disconnect, and settings
  • Connect – Start a new connection
  • Manage – Redirect to product pages or manage connected accounts

⚡Additional Enhancements:

  • Consistent modal layouts across all integrations
  • Standardised error messages, logos, and descriptions for a cohesive experience
  • Unified Accounts modal, removing duplicate Google cards
  • Faster page load times due to API performance enhancements
  • Search functionality added for quicker discovery
  • Per-account and per-integration disconnect support, with confirmation for safer management
  • Connection-level and integration-level error notifications where applicable
  • Consistent, role-based access control across native integrations
  • Grey-label support document for each integration on the page

🚀Technical Enhancements:

  • Reduced unused JavaScript payload by approximately 50% (from 8.4 MiB to 4.1 MiB)
  • Improved accessibility score from 77 to 90
  • Significantly reduced Workflow app load times
  • Improved Lighthouse performance score by 40%
  • Expanded language translation coverage for the frontend
  • Delivered multiple API-level improvements, aligning the experience with native integrations and improving overall reliability
  • Adopted the High Rise design system across integrations, eliminating legacy design systems

This update resolves UI inconsistencies, enhances discoverability, and significantly improves performance. The legacy page had multiple stability issues and lacked scalability to accommodate new integrations.

Home Page:

HomePAGE

Search on Integration Page:

SEARCH

Manage Account Modal: Google/Slack/TikTok Messaging

GoogleAccountModal

Form Listing Modal:

FormListing

Form Mapping Modal:

FormMapping