Overview
The Workers’ Compensation Board website relied on outdated navigation patterns and fragmented content structures that made it difficult for users to find information. I led a front-end and information architecture improvement that modernized the left navigation, aligned it with WebNY branding standards, and streamlined legacy content into more usable, consolidated pages.
Legacy content structure using fragmented pages and right-side related page navigation.
Consolidated topic-based page structure with section navigation and improved usability.
Challenge
The site had two major usability issues:
Navigation Issues
- Static black left navigation that did not meet WebNY branding standards
- No visual indication of the current section
- Poor usability on long, content-heavy pages
- Inconsistent and unintuitive mobile experience
Content & Structure Issues
- Legacy pages using a right-hand “related pages” navigation
- Content spread across multiple thin pages with minimal information
- No clear organization or grouping by topic
- Internal links across the site pointed to fragmented, outdated pages
- These structures were carryovers from the original site and had never been re-evaluated
Goals
- Align navigation with WebNY design standards
- Improve usability and wayfinding
- Consolidate fragmented content into logical, user-friendly structures
- Create consistency across page layouts
- Maintain compatibility with multilingual content
- Avoid backend/CMS restructuring
Approach
1. Navigation Redesign (Desktop & Mobile)
Converted the left navigation to a white navigation system with a green active indicator bar aligned with WebNY standards.
Implemented:
- Scroll-based active section highlighting on desktop
- Smooth scrolling between sections
- Back-to-top functionality for desktop and mobile
- URL hash (#) updates for deep linking and anchor support
Mobile Navigation Enhancements
- Repositioned navigation to the top of the page
- Created a condensed sticky “Sections” menu
- Added expandable mobile section navigation
- Enabled tap-to-scroll navigation behavior
- Maintained URL hash functionality across devices
2. Content Consolidation & Stakeholder Collaboration
Identified pages using outdated right-hand “related pages” navigation and evaluated content structure across sections.
Determined many pages contained minimal content and did not need to exist as standalone pages.
Consolidated related content into single, topic-based pages using section anchors and structured navigation.
Replaced right-hand navigation patterns with the new left-hand section-based navigation system.
Scale of Work
- Consolidated approximately 250 pages across 21 sections
- Updated navigation behavior across 339 navigator pages
- Managed variations in page templates, includes, and layouts
Content Restructuring Approach
Pages from the original “related pages” navigation were:
- Converted into in-page sections when content was minimal
- Reorganized into “Related Pages” sections when content remained relevant
- Streamlined into more usable scroll-based experiences with fewer unnecessary page breaks
Collaboration & Governance
- Partnered with subject matter experts (SMEs) and stakeholders
- Reviewed content for accuracy, relevance, and completeness
- Updated outdated information and removed unnecessary content
- Facilitated review and approval workflows
- Ensured final pages met both business and user needs
3. Information Architecture & Audit Process
Used Siteimprove to identify navigator pages using shared templates and outdated navigation structures.
Created tracking documentation to:
- Manage updates across pages and environments
- Audit header and footer includes
- Ensure compatibility across varying templates and page types
Content Evaluation
Assessed pages for:
- Content depth
- Redundancy
- Relevance
Identified opportunities to consolidate fragmented experiences into more structured, user-friendly layouts.
Collaborated with SMEs to validate restructuring decisions before implementation.
This approach ensured scalable, consistent updates while allowing content-driven decisions instead of one-size-fits-all restructuring.
4. Sitewide Link Updates
Used Siteimprove to:
- Identify internal links pointing to outdated or fragmented pages
- Update links across the site to point to consolidated pages
- Prevent users from landing on deprecated or disconnected content
5. Technical Implementation
Designed and implemented using JavaScript, CSS, HTML, and JSP within an existing enterprise government platform environment.
Implemented:
- Custom scroll tracking to highlight active sections
- Smooth scrolling and anchor-linking behavior
- Responsive mobile navigation interactions
- Sticky navigation states and section awareness
- URL hash updates for deep linking support
Maintained existing production functionality while layering enhancements to minimize disruption.
6. Handling Translated Content (Smartling)
Ensured navigation functionality adapted dynamically to translated content visibility.
Implemented navigation behavior that:
- Correctly highlighted visible translated sections
- Maintained anchor linking across languages
- Preserved consistent functionality for Smartling-managed content
Results
- Improved user navigation and orientation on long, content-heavy pages
- Reduced unnecessary page fragmentation and excessive clicking
- Standardized layouts across previously inconsistent page types
- Delivered more accurate and maintainable content structures through SME collaboration
- Successfully implemented across 300+ pages with varying structures
- Replaced outdated legacy navigation patterns with a more intuitive, scalable experience
- Reduced reliance on fragmented navigation structures across 21 sections
- Improved discoverability through consolidated, scroll-based page experiences
- Created a scalable navigation model reusable across multiple page types
My Role
Lead on front-end navigation redesign, content consolidation strategy, implementation, and cross-functional coordination.
Responsibilities included:
- Designing and implementing new navigation behaviors
- Developing responsive desktop and mobile interactions using JavaScript and CSS
- Planning and executing large-scale content consolidation
- Coordinating with SMEs and stakeholders on restructuring decisions
- Managing QA, link updates, and rollout consistency across hundreds of pages
- Ensuring accessibility and Smartling compatibility throughout implementation
- Reviewing and validating implementation consistency across templates and page types
Key Features at a Glance
- Active section highlighting on scroll
- Smooth scrolling navigation
- Responsive sticky mobile navigation
- Back-to-top functionality
- URL hash support
- Smartling-compatible navigation
- Consolidated topic-based page structures
Tools & Technologies
- JavaScript
- CSS
- HTML / JSP
- Siteimprove
- Responsive design techniques
- Accessibility testing tools (NVDA, WAVE, keyboard testing)
Key Takeaways
Large-scale navigation improvements require balancing usability, accessibility, and legacy platform constraints.
This project demonstrates my ability to modernize legacy UI patterns, improve information architecture at scale, and lead cross-functional collaboration—delivering a more usable, accessible, and maintainable experience within a complex enterprise government environment.