Forms Framework


I helped introduce a responsive grid structure to the legacy product suite, replacing the outdated layout logic that prioritized component size over spatial consistency. By embedding this new grid into the forms framework—used in a significant percentage of tasks—we were able to modernize and restructure over 85% of the product interface. This upgrade not only improved responsiveness and visual alignment, but also provided a consistent foundation for evaluating and enhancing the individual components nested within forms. It laid the groundwork for better scalability, accessibility, and long-term maintainability across the system.

  • Design Systems
  • Framework Design
  • Platform UX
  • Adoption


Intro image
Product analysis examples. Extreme misalignment.


Overview

We identified forms as the most seamless entry point for introducing layout consistency. Because forms are used across a majority of tasks, this approach allowed us to implement a responsive grid without requiring changes to individual components. This made the framework scalable and system-friendly, eliminating the need for toggle-based implementations.


Role

Lead Designer

Timeline

2023-2024

Partners

Platform PM, Product PM's, Platform Dev (x4), Design System

Surface

Web / Mobile




Impact at a Glance

85%+ legacy product enhanced
5 core components migrated
75m users impacted globally


Process

Problem

Existing forms were riddled with jagged fields, misaligned components, and widgets that behaved unpredictably across layouts, with no responsive breakpoints to adapt to different screen sizes. By embedding a responsive grid and standardized patterns, the new framework established visual alignment, improved usability, and created a scalable foundation for accessibility and long term maintainability, ensuring forms could evolve alongside both platform and design system advancements.

  • No responsive grid structure in core product.
  • Misaligned input fields on high density form patterns.
  • Too much task level empty space and long form scrolling.
  • Difficult scanability in high density use cases (FIN).

Outcomes

Today, the forms framework is included in all net-new feature development, and teams are actively planning retrofits for existing features, bringing modern layout structure to legacy experiences across the platform.

  1. Responsive grid structure in core product.
  2. More digestible, at a glance solution for high density pages.
  3. Rules and guidelines for column layout.
  4. Rules and guidelines for top vs side aligned prompt components.
  5. Opened up deeper discussions around the prompt component.
  6. First framework seemlessly integrated with a new drag & drop internal development tool.