Scaling the design system for Input Field Components
The primary objective of this project was to scale and standardize the design system for input field components across Bowtie’s B2C platforms. By creating a unified and scalable system, we aimed to ensure consistent usage and implementation of input fields, improving both the user experience and development efficiency.
Role
Product Designer
Worked with the owners of the design system - Ankit (Product Designer) and Anson (Engineer)
Key Methods
Site Audit
Duration
2 months (ongoing)
Results
TBC - Project is still ongoing
context
Why This Matters to Bowtie
The lack of comprehensive design system guidelines for input field components created inefficiencies and inconsistencies across the platform. Without clear standards, designers and engineers often spent significant time debating styles, usage, and implementation details.
As Bowtie continues to scale its features and expand its platform, maintaining consistency in design and development is critical.
challenges
Too many inconsistent variants…
To kick off this initiative, we conducted a thorough design audit, uncovering several key issues:
Variant Style Inconsistencies: The styling of input fields varied across the portal, particularly in error states. For example, error text sometimes appeared in color and other times did not, and icons were inconsistently displayed.
Inconsistent Field Labels and Placeholders: Some input fields included titles and placeholders, while others did not. This inconsistency confused users and made it difficult for them to understand how to answer questions effectively.
Mobile Usability Issues: The height of input fields was too large for mobile devices due to excessive padding, creating a poor user experience on smaller screens.
ideation
The goal
Our objective was to create a design system that aligned with the following principles:
Consistency: Establish a unified and scalable design system for input fields, ensuring consistent usage across the platform.
Efficiency: Reduce development time and effort by eliminating redundancies and simplifying component logic.
User Experience: Improve usability and accessibility, making forms easier to navigate and understand for all users.
Scalability: Create a flexible and modular system that supports future feature expansions with minimal overhead.
Our approach
To address these challenges, I collaborated with Ankit and Anson to audit existing input field components, identify inconsistencies, and define a scalable system. Our approach included:
Component Audit: Conducted a comprehensive review of all input field variants in use across the platform.
Modular Component Structure: Designed a flexible component architecture that supported both single and grouped input fields, reducing redundancy.
Documentation and Guidelines: Created detailed documentation and usage guidelines for designers and engineers, ensuring seamless adoption.
solution & impact
A unified and scalable design system
Clarified Labels, Placeholders, and standardized components to eliminate confusion and established clear rules for usage.
Standalone Default: Title + Placeholder
Group Default: Title + Label
Standalone No Title: Label
Synced interaction states of single and group input fields, and simplified error handling
Created a flexible and modular system that supports future feature expansions with minimal overhead.