>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3530743. --> Reported by: [grzegorz.bartman](https://www.drupal.org/user/363120) Related to !60 >>> <h3 id="summary-context">Context</h3> <p>The current Professional Development Request webform in Open Intranet has poor visual hierarchy that negatively impacts user experience and form completion rates. Field labels are disproportionately large compared to helper text and descriptions, creating confusion about what information is primary versus secondary. Users struggle to efficiently scan the form and distinguish between required actions and supportive guidance, leading to cognitive overload and potential form abandonment. See attached screenshot showing the current form layout with oversized titles and unclear text hierarchy.</p> <h3 id="summary-task-type">Task Type</h3> <p><strong>Type:</strong> New Feature or improvement</p> <h3 id="summary-what-to-do">What To Do</h3> <p>Improve the visual hierarchy and typography of webforms in Open Intranet to create better user experience. Establish clear distinction between field labels, helper text, and descriptions through appropriate font sizes, weights, and spacing. The goal is to make forms more scannable and intuitive, reducing user confusion and improving completion rates.</p> <h3 id="summary-how-to-do">How To Do / Proposed Approach</h3> <p>This improvement would benefit from collaboration with a UX/UI designer to establish proper typography scales and visual hierarchy principles. The solution should focus on creating consistent styling for different text elements (labels, descriptions, placeholders) and ensuring proper spacing and visual grouping. Consider implementing a design system approach that can be applied to all webforms across Open Intranet.</p> <h3 id="summary-when-version">When / Version / Related Tasks</h3> <p>Version 1.3.0 or above </p> <p><img src="https://www.drupal.org/files/issues/2025-06-18/CleanShot%202025-06-18%20at%2011.25.41%402x.png" alt="webform1"></p>