Improve webform visual hierarchy and typography for better UX

Created on 18 June 2025, 19 days ago

Context

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.

Task Type

Type: New Feature or improvement

What To Do

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.

How To Do / Proposed Approach

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.

When / Version / Related Tasks

Version 1.3.0 or above

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇵🇱Poland grzegorz.bartman

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024