Overview
The Workers’ Compensation Board website contains multiple forms pages intended for different audiences, but historically many of these pages duplicated the same forms content. This created a high risk of inconsistencies, missed updates, and inefficient maintenance across the site.
To address this, I designed and implemented a centralized, dynamic forms system that allows all forms content to be maintained in a single location while displaying only the relevant forms on each page.
The solution combined HTML, CSS, JavaScript, and shared include architecture to support scalable content management while improving usability and reducing maintenance overhead.
Challenge
The existing forms structure presented several operational and usability issues:
- 13 separate pages displaying overlapping forms content
- High risk of outdated or inconsistent information
- Manual updates required across multiple pages
- No centralized process for ensuring all forms were updated consistently
- Large tables became difficult to maintain when visibility changed dynamically by page
- Existing layouts did not scale efficiently as forms were added or reorganized
Goals
- Eliminate duplicated forms content across pages
- Create a scalable single-source publishing model
- Improve maintainability and update consistency
- Support audience-specific form displays without duplicating content
- Improve table usability and readability
- Reduce risk of missed updates during maintenance
Approach
1. Centralized Content Architecture
Designed and implemented a centralized forms include system to eliminate duplicated content across pages.
All forms were consolidated into a single shared source file, allowing updates to occur in one location while supporting multiple page-specific displays.
Implementation
Each form was assigned:
- HTML identifiers
- CSS classes
- JavaScript targeting logic
These identifiers were used to determine:
- Which forms display on each page
- Which forms remain hidden
- How tables dynamically adapt based on visible content
This created a scalable structure capable of supporting future additions and restructuring without duplicating content.
2. Dynamic Filtering & Display Logic
Developed a JavaScript-based filtering system that dynamically controls form visibility based on page context.
The system:
- Detects the active page
- Displays only relevant forms
- Hides non-relevant forms automatically
- Maintains a single-source publishing model
This approach reduced maintenance overhead while ensuring consistency across all forms pages.
Technical Implementation
Implemented using:
- JavaScript
- HTML
- CSS
- Shared include architecture
The filtering system was designed to integrate into an existing enterprise government platform while preserving existing page structures and workflows.
3. Table Structure & Visual Consistency
Because rows display dynamically depending on the page, additional front-end logic was required to preserve visual consistency.
Implemented CSS and JavaScript coordination to maintain:
- Alternating gray/white row styling
- Consistent spacing and formatting
- Stable table layouts across all forms pages
This required careful synchronization between:
- HTML structure
- CSS presentation logic
- JavaScript visibility behavior
to ensure the tables remained visually consistent regardless of which rows were displayed or hidden.
4. Sticky Table Headers & Usability Improvements
To improve usability on large forms tables, I implemented sticky table headers that remain visible while users scroll.
Benefits
- Keeps column labels visible at all times
- Improves readability across long tables
- Helps users stay oriented while navigating forms
- Supports internal maintenance workflows by reducing the likelihood of missed or miscategorized forms
This enhancement improved both public usability and administrative efficiency.
5. Content Audit & Stakeholder Collaboration
This effort also included a full reevaluation of forms content and organization.
Partnered with:
- Subject matter experts (SMEs)
- Stakeholders
- Internal program teams
to review:
- Accuracy
- Relevance
- Redundancy
- Content organization
Updated and streamlined forms content where necessary and restructured some table layouts to improve clarity and usability.
This collaboration ensured the final system supported both user needs and operational maintenance requirements.
Results
- Implemented a single-source publishing model for forms management
- Eliminated duplicated forms content across 13 pages
- Reduced update time and maintenance overhead
- Minimized risk of inconsistent or outdated information
- Improved table usability with sticky headers and cleaner layouts
- Created a scalable framework for future form additions and restructuring
- Improved governance and collaboration across teams and stakeholders
- Strengthened consistency across audience-specific forms experiences
My Role
Lead on system design, front-end implementation, usability improvements, and content coordination.
Responsibilities included:
- Designing the centralized forms architecture
- Developing JavaScript filtering and visibility logic
- Implementing HTML/CSS table structures and styling
- Coordinating content reviews with SMEs and stakeholders
- Improving usability through sticky headers and responsive formatting
- Ensuring scalable maintenance and governance processes
- Testing and validating display behavior across forms pages
Tools & Technologies
- JavaScript
- HTML
- CSS
- Shared include architecture
- Responsive design techniques
- Accessibility and usability best practices
Key Takeaways
Large-scale content systems require scalable publishing models to reduce duplication and improve governance.
This project demonstrates my ability to:
- Design scalable front-end architectures using HTML, CSS, and JavaScript
- Implement dynamic content display systems within legacy enterprise environments
- Improve usability within complex data tables
- Balance technical implementation with stakeholder collaboration and long-term maintainability