Client
ValGenesis Pvt Ltd
My Role
UX Designer & Design Lead
Year
2025
Project Scope
Web & Mobile App
Back
Re-Imagining the Form Builder
A full UX redesign of ValGenesis Smart GxP's form builder — transforming a legacy, constrained tool into a modern, scalable configuration platform for
pharmaceutical compliance workflows
The Problem
The existing form builder had several critical issues rooted in technical debt and outdated UX patterns — creating friction for administrator working in high-stakes pharmaceutical environments.
Limitations
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Poor Discoverability
Configuration options were scattered across the interface. Users consistently struggled to locate field settings.
Inefficient Form Creation
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Scalability Issues
Adding or modifying form elements required multiple steps with limited customization options for users.
RESEARCH
Understanding Before Designing
Research drove every design decision — from stakeholder alignment to validating interaction patterns with real users
Stakeholder Interviews
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
Objective
Understand business requirements, technical constraints, and compliance needs to inform design decisions
Participants
- Product Managers
- Engineering Leads
- Customer Success Team
- Implementation Consultants
Key Insights
- Existing builder was difficult to extend due to legacy architecture
Design Impact: Introduced modular component architecture
- Clients frequently requested new field types and dynamic behaviours
Design Impact: Created a configurable properties panel
- Configuration complexity caused implementation delays
Design Impact: Designed for future field type scalability
- Outdated Grid based layout limiting functionalities
Design Impact: Removed the Grid based control system
User Interviews
Key Questions Asked
- How often do you create forms?
- What are the biggest challenges with the current builder?
- What parts of the workflow take the most time?
- What mistakes commonly happen while building forms?
Key Findings
- Form creation took too long
Design Impact: Introduced drag-and-drop editor
- Layout management was confusing
Consolidated settings into one properties panel
- Settings were hard to find
Added inline component actions
User Personas
James Smith
System Admin
Pharmaceutical Manufacturing | 10 years in compliance system
Goals
- Configure forms for validation workflows
- Ensure data aligns with compliance requirements
- Quickly modify forms when processes change
Frustrations
- Difficult to visualize final form layout
- Too many steps to configure a field
- Hard to locate specific field settings
Design Impact
⭐️
WYSIWYG Form Canvas
⭐️
Centralized configuration panel
⭐️
Faster field editing
Pradeepa
Validation Engineer
Life Sciences | 5+ years in validation documentation
Goals
- Capture structured validation data
- Maintain traceable documentation
- Ensure form fields map to compliance data
Frustrations
- Forms require too many manual entries
- Difficult to integrate system-generated values
- Layout inconsistencies confuse reviewers
Design Impact
⭐️
Dynamic lookup fields
⭐️
System-generated values
⭐️
Structured layout on canvas
Heuristic Evaluation
Visibility of System Status
Issue
No clear indication of selected field state
Design Fix
Clear selection states with visual highlight
Consistency and Standards
Issue
Different field types had different settings locations
Design Fix
Consistent field configuration panel for all types
Efficiency of Use
Issue
Repetitive configuration steps for every field
Design Fix
Inline actions to reduce navigation overheard
Error Prevention
Issue
Users could easily misconfigure fields with no guard rails
Design Fix
Easy to visualize final form layout
KEY DESIGN DECISION
Streamlined Interaction Model
Reduced form creation from a fragmented multi-screen workflow to a fluid four-step process within a single view.
Add a Field
Select from the field library: Dropdown, Text, Radio, Lookup
Configure
Set label, defaults, system values, entity mapping
Arrange Layout
Drag components to reorder mirrors - final document structure
Save or Publish
Save draft, cancel, or move to next step in the workflow
DESIGN SYSTEM INTEGRATION
Build on a Solid Design System Foundation
The legacy builder used custom, inconsistent UI components. The redesign aligned fully with the newly introduced ValGenesis design system PULSE — enabling consistency, faster development, and future scalability.
Standardized Components
Reusable building blocks across the entire platform
Faster Development
Engineers build new features without recreating UI elements
Scalable Architecture
Component-driven builder makes adding new field types easy
IMPACT
Measurable Outcomes
The redesigned form builder delivered tangible improvements across efficiency, adoption, scalability, and platform consistency
Efficiency
- 40% reduction in form creation time
- Reduced configuration steps from 5+ to 3
- No more context-switching between screens
Adoption
- Easier onboarding for new administrators
- Intuitive WYSIWYG interface reduced training time
- Positive feedback from internal QA testing
Scalability
- Faster addition of new field types
- Modular architecture supports future modules
- Component reuse across platform reduced dev time
Consistency
- 100% alignment with new design system
- Consistent UX patterns across Smart GxP
- Reduced UI-related support tickets
Back
Re-Imagining the Form Builder
A full UX redesign of ValGenesis Smart GxP's form builder — transforming a legacy, constrained tool into a modern, scalable configuration platform for
pharmaceutical compliance workflows
Client
ValGenesis Pvt Ltd
My Role
UX Designer & Design Lead
Year
2025
Project Scope
Web & Mobile App
The Problem
The existing form builder had several critical issues rooted in technical debt and outdated UX patterns creating friction for administrator working in high-stakes pharmaceutical environments.
Limitations
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Poor Discoverability
Configuration options were scattered across the interface. Users consistently struggled to locate field settings.
Inefficient Form Creation
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Scalability Issues
Adding or modifying form elements required multiple steps with limited customization options for users.
RESEARCH
Understanding Before Designing
Research drove every design decision — from stakeholder alignment to validating interaction patterns with real users
Stakeholder Interviews
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
Objective
Understand business requirements, technical constraints, and compliance needs to inform design decisions
Participants
- Product Managers
- Engineering Leads
- Customer Success Team
- Implementation Consultants
Key Insights
- Existing builder was difficult to extend due to legacy architecture
Design Impact: Introduced modular component architecture
- Clients frequently requested new field types and dynamic behaviours
Design Impact: Created a configurable properties panel
- Configuration complexity caused implementation delays
Design Impact: Designed for future field type scalability
- Outdated Grid based layout limiting functionalities
Design Impact: Removed the Grid based control system
User Interviews
Key Questions Asked
- How often do you create forms?
- What are the biggest challenges with the current builder?
- What parts of the workflow take the most time?
- What mistakes commonly happen while building forms?
Key Findings
- Form creation took too long
Design Impact: Introduced drag-and-drop editor
- Layout management was confusing
Consolidated settings into one properties panel
- Settings were hard to find
Added inline component actions
User Personas
James Smith
System Admin
Pharmaceutical Manufacturing | 10 years in compliance system
Goals
- Configure forms for validation workflows
- Ensure data aligns with compliance requirements
- Quickly modify forms when processes change
Frustrations
- Difficult to visualize final form layout
- Too many steps to configure a field
- Hard to locate specific field settings
Design Impact
⭐️
WYSIWYG Form Canvas
⭐️
Centralized configuration panel
⭐️
Faster field editing
Pradeepa
Validation Engineer
Life Sciences | 5+ years in validation documentation
Goals
- Capture structured validation data
- Maintain traceable documentation
- Ensure form fields map to compliance data
Frustrations
- Forms require too many manual entries
- Difficult to integrate system-generated values
- Layout inconsistencies confuse reviewers
Design Impact
⭐️
Dynamic lookup fields
⭐️
System-generated values
⭐️
Structured layout on canvas
Heuristic Evaluation
Visibility of System Status
Issue
No clear indication of selected field state
Design Fix
Clear selection states with visual highlight
Consistency and Standards
Issue
Different field types had different settings locations
Design Fix
Consistent field configuration panel for all types
Efficiency of Use
Issue
Repetitive configuration steps for every field
Design Fix
Inline actions to reduce navigation overheard
Error Prevention
Issue
Users could easily misconfigure fields with no guard rails
Design Fix
Easy to visualize final form layout
KEY DESIGN DECISION
Streamlined Interaction Model
Reduced form creation from a fragmented multi-screen workflow to a fluid four-step process within a single view.
Add a Field
Select from the field library: Dropdown, Text, Radio, Lookup
Configure
Set label, defaults, system values, entity mapping
Arrange Layout
Drag components to reorder mirrors - final document structure
Save or Publish
Save draft, cancel, or move to next step in the workflow
DESIGN SYSTEM INTEGRATION
Build on a Solid Design System Foundation
The legacy builder used custom, inconsistent UI components. The redesign aligned fully with the newly introduced ValGenesis design system PULSE — enabling consistency, faster development, and future scalability.
Standardized Components
Reusable building blocks across the entire platform
Faster Development
Engineers build new features without recreating UI elements
Scalable Architecture
Component-driven builder makes adding new field types easy
IMPACT
Measurable Outcomes
The redesigned form builder delivered tangible improvements across efficiency, adoption, scalability, and platform consistency
Efficiency
- 40% reduction in form creation time
- Reduced configuration steps from 5+ to 3
- No more context-switching between screens
Adoption
- Easier onboarding for new administrators
- Intuitive WYSIWYG interface reduced training time
- Positive feedback from internal QA testing
Scalability
- Faster addition of new field types
- Modular architecture supports future modules
- Component reuse across platform reduced dev time
Consistency
- 100% alignment with new design system
- Consistent UX patterns across Smart GxP
- Reduced UI-related support tickets
Back
Re-Imagining the Form Builder
A full UX redesign of ValGenesis Smart GxP's form builder — transforming a legacy, constrained tool into a modern, scalable configuration platform for
pharmaceutical compliance workflows
Client
ValGenesis Pvt Ltd
My Role
UX Designer & Design Lead
Year
2025
Project Scope
Web & Mobile App
The Problem
The existing form builder had several critical issues rooted in technical debt and outdated UX patterns — creating friction for administrator working in high-stakes pharmaceutical environments.
Limitations
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Poor Discoverability
Configuration options were scattered across the interface. Users consistently struggled to locate field settings.
Inefficient Form Creation
Built on older frameworks with limited component flexibility, making it nearly impossible to introduce modern UX patterns.
Scalability Issues
Adding or modifying form elements required multiple steps with limited customization options for users.
RESEARCH
Understanding Before Designing
Research drove every design decision — from stakeholder alignment to validating interaction patterns with real users
Stakeholder Interviews
For this massive project, I served as a co-lead and core member of the design system steering committee, guiding the system from conception through organization-wide adoption. I’ve co-led strategy, structure, and integration of decisions across design and engineering, ensuring alignment with regulated pharma workflows.
Objective
Understand business requirements, technical constraints, and compliance needs to inform design decisions
Participants
- Product Managers
- Engineering Leads
- Customer Success Team
- Implementation Consultants
Key Insights
- Existing builder was difficult to extend due to legacy architecture
Design Impact: Introduced modular component architecture
- Clients frequently requested new field types and dynamic behaviours
Design Impact: Created a configurable properties panel
- Configuration complexity caused implementation delays
Design Impact: Designed for future field type scalability
- Outdated Grid based layout limiting functionalities
Design Impact: Removed the Grid based control system
User Interviews
Key Questions Asked
- How often do you create forms?
- What are the biggest challenges with the current builder?
- What parts of the workflow take the most time?
- What mistakes commonly happen while building forms?
Key Findings
- Form creation took too long
Design Impact: Introduced drag-and-drop editor
- Layout management was confusing
Consolidated settings into one properties panel
- Settings were hard to find
Added inline component actions
User Personas
James Smith
System Admin
Pharmaceutical Manufacturing | 10 years in compliance system
Goals
- Configure forms for validation workflows
- Ensure data aligns with compliance requirements
- Quickly modify forms when processes change
Frustrations
- Difficult to visualize final form layout
- Too many steps to configure a field
- Hard to locate specific field settings
Design Impact
⭐️
WYSIWYG Form Canvas
⭐️
Centralized configuration panel
⭐️
Faster field editing
Pradeepa
Validation Engineer
Life Sciences | 5+ years in validation documentation
Goals
- Capture structured validation data
- Maintain traceable documentation
- Ensure form fields map to compliance data
Frustrations
- Forms require too many manual entries
- Difficult to integrate system-generated values
- Layout inconsistencies confuse reviewers
Design Impact
⭐️
Dynamic lookup fields
⭐️
System-generated values
⭐️
Structured layout on canvas
Heuristic Evaluation
Visibility of System Status
Issue
No clear indication of selected field state
Design Fix
Clear selection states with visual highlight
Consistency and Standards
Issue
Different field types had different settings locations
Design Fix
Consistent field configuration panel for all types
Efficiency of Use
Issue
Repetitive configuration steps for every field
Design Fix
Inline actions to reduce navigation overheard
Error Prevention
Issue
Users could easily misconfigure fields with no guard rails
Design Fix
Easy to visualize final form layout
KEY DESIGN DECISION
Streamlined Interaction Model
Reduced form creation from a fragmented multi-screen workflow to a fluid four-step process within a single view.
Add a Field
Select from the field library: Dropdown, Text, Radio, Lookup
Configure
Set label, defaults, system values, entity mapping
Arrange Layout
Drag components to reorder mirrors - final document structure
Save or Publish
Save draft, cancel, or move to next step in the workflow
DESIGN SYSTEM INTEGRATION
Build on a Solid Design System Foundation
The legacy builder used custom, inconsistent UI components. The redesign aligned fully with the newly introduced ValGenesis design system PULSE — enabling consistency, faster development, and future scalability.
Standardized Components
Reusable building blocks across the entire platform
Faster Development
Engineers build new features without recreating UI elements
Scalable Architecture
Component-driven builder makes adding new field types easy
IMPACT
Measurable Outcomes
The redesigned form builder delivered tangible improvements across efficiency, adoption, scalability, and platform consistency
Efficiency
- 40% reduction in form creation time
- Reduced configuration steps from 5+ to 3
- No more context-switching between screens
Adoption
- Easier onboarding for new administrators
- Intuitive WYSIWYG interface reduced training time
- Positive feedback from internal QA testing
Scalability
- Faster addition of new field types
- Modular architecture supports future modules
- Component reuse across platform reduced dev time
Consistency
- 100% alignment with new design system
- Consistent UX patterns across Smart GxP
- Reduced UI-related support tickets