Project Context:
Medicare Administrative Contractor, Centers for Medicare & Medicaid Services (CMS) | Novitas Solutions, Inc (Mechanicsburg, PA)
Role: Front-End Developer & UX Implementation Specialist
Technologies: SVG, HTML, CSS, JavaScript, Adobe Illustrator, Section 508/WCAG 2.1 AA Compliance

---

Live Production Tools (Active 8+ Years):

• New Provider Roadmap Tool
• FastTrack to Medicare Coverage Tool
• Avoid the Wait Electronic Claims Submissions Tool

These interactive tools that I developed have remained active on the Novitas Solutions website since 2018, and continue serving Medicare providers and healthcare systems nationwide, maintaining zero Section 508 violations throughout their 8+ year production lifecycle.

---

Challenge

Medicare providers struggled to navigate complex policy documentation, enrollment processes, and self-service options across Novitas Solutions’ extensive web portal. Traditional text-based navigation resulted in high call center volume and provider frustration.

Manager’s Validation

“Talena was a key developer for the front-end usability of our site-based tools on provider websites with large traffic, and we were considered industry-leading and innovative with our partner CMS as well as our customers.”

“Talena was employed to code the graphic, map it, and deploy it in a way that it was interactive and worked to get the customers to the proper places. This was a manual process… The tools were well received and see a lot of use, and providers and CMS commented that they appreciated their innovativeness.”

— Brad Plevyak, Manager, Provider Websites , Novitas Solutions, Inc.

Solution

Working in collaboration with graphic designers who created the base visuals, I coded the interactive functionality, mapped SVG coordinates, and deployed three clickable navigation tools that enabled intuitive point-and-click access to critical resources.

Technical Decision-Making & Collaboration

Why SVG Coordinate Mapping: Problem-Solving Under Constraints

The decision to use SVG coordinate mapping came from solving a critical responsive design problem that standard approaches couldn’t handle.

Initial Approach Failed:

My first attempt used basic HTML code overlay with XY coordinates positioned on top of the image. This worked on my screen, but when my manager tested it on his display, the clickable areas were completely misaligned. The fixed pixel positioning didn’t scale across different screen resolutions.

Constraint: No Buttons Allowed:

I proposed using clickable buttons positioned on top of the images as an alternative, but my manager indicated this wasn’t an option (federal compliance or platform limitations weren’t specified, but the constraint was firm).

The Directive I Didn’t Want to Follow:

The suggested fallback was adding a text-based list of links below each image—essentially treating the visual as decoration rather than functional navigation. This felt like an afterthought and defeated the purpose of having intuitive visual navigation tools.

Research-Driven Solution:

I researched responsive clickable image techniques and found an implementation example using an interactive US map with SVG coordinate mapping that scaled proportionally across screen sizes. I adapted this approach, building out the code to work with our designer’s visuals.

Why This Approach Won:

Responsive scaling: Clickable regions maintained accuracy across all screen sizes (320px mobile to 1920px desktop)
Seamless integration: Interactive elements appeared “baked into” the image itself, not added as afterthought links
Accessibility compliance: Could add proper ARIA labels and keyboard navigation to SVG elements
Cross-browser support: Worked consistently across IE9+, Chrome, Firefox, Safari, Edge

Implementation Note:

While my manager later thought I used Adobe Illustrator tools to generate the interactive SVG code, I actually implemented a workaround approach by manually coding the coordinate mapping directly. The final code was handed off to the IT contractor team for deployment on their platform (which our internal team didn’t have direct access to).

Designer-Developer Collaboration

Division of Responsibilities:

I worked collaboratively with Courtney (graphic designer) throughout the development process:

Courtney’s Role:

• Created base visual layouts and design elements
• Provided visual assets in exportable format

My Role:

• Received visual assets and analyzed structure for interactive implementation
• Coded the SVG coordinate mapping manually for clickable regions
• Implemented JavaScript event handlers for click interactions
• Ensured responsive behavior across all screen sizes
• Validated Section 508/WCAG 2.1 AA accessibility compliance
• Tested with JAWS screen reader to verify proper navigation

Iteration Process:

We went through multiple rounds of refinement to balance visual appeal with technical feasibility and accessibility requirements. When design elements conflicted with accessibility standards (such as color contrast or clickable region size), we collaborated to find solutions that maintained visual integrity while meeting federal compliance.

Section 508 Accessibility Challenges & Solutions

Challenge: Screen Reader Accessibility for Interactive SVG Elements

Standard SVG graphics aren’t inherently accessible to screen readers. Each clickable region needed proper semantic markup so assistive technology could announce its purpose.

Solution:

• Implemented ARIA labels for each clickable icon and pathway
• Added descriptive text alternatives for all interactive SVG elements
• Tested extensively with JAWS screen reader to verify proper announcement of clickable regions
• Created logical tab order following visual flow (left-to-right, top-to-bottom)

Challenge: Fallback for Non-Visual Users

Visual navigation tools inherently disadvantage screen reader users who can’t perceive spatial relationships.

Solution:

• Provided text-based link list as alternative navigation method mirroring visual structure
• Ensured information wasn’t conveyed through color alone (used icons + text labels)
• Implemented ARIA landmarks to identify interactive regions semantically

Testing & Validation:

• JAWS screen reader testing for full keyboard navigation and link announcement
• Cross-browser compatibility verification (IE9+, Chrome, Firefox, Safari, Edge)

Result: Zero accessibility violations in federal compliance audits over 8-year production lifecycle.

Federal Compliance Constraints

Section 508 Requirements:

As a Medicare Administrative Contractor, Novitas Solutions operated under strict federal accessibility standards. Every tool deployed on the provider portal required Section 508/WCAG 2.1 Level AA compliance before production release.

Browser Support Requirements:

The provider portal needed to support legacy browsers still used by medical practices, including Internet Explorer 9. This required careful testing and fallback implementation for browsers with inconsistent SVG rendering.

Zero-Downtime Tolerance:

Changes to the provider portal occurred during maintenance windows to avoid disrupting healthcare providers’ critical access to Medicare resources. Testing had to be comprehensive before deployment because rollback wasn’t simple.

---

Tool 1: FastTrack to Medicare Coverage Policies

Purpose: Visual roadmap guiding providers to National Coverage Determinations (NCDs), Local Coverage Determinations (LCDs), and billing policies.

Collaborative Development Process:

• Graphic designer created base visual layouts and design elements
• I coded the interactive functionality using manual SVG coordinate mapping
• Deployed integrated tools across high-traffic provider portal
• Ensured responsive behavior and accessibility across all screen types

Technical Implementation:

• Created interactive SVG flowchart with clickable decision points
• Implemented precise XY-axis coordinate mapping for clickable regions across responsive breakpoints
• Developed JavaScript event handlers for icon click interactions
• Ensured clickable areas scaled proportionally across screen resolutions (desktop, tablet)

Accessibility Features:

• Keyboard navigation (arrow keys to navigate, Enter to activate links)
• High-contrast focus indicators on all interactive SVG elements
• Text-based link list as alternative to visual navigation for screen reader users
• Color-independent navigation (used icons + text labels, not color alone)

View the tool live on Novitas Solutions website

---

Tool 2: New Provider Roadmap

Purpose: Step-by-step visual guide for new Medicare provider enrollment, billing setup, claims submission, and appeals processes.

Collaborative Development Process:

• Graphic designer created base visual layouts and design elements
• I coded the interactive functionality using manual SVG coordinate mapping
• Deployed integrated tools across high-traffic provider portal
• Ensured responsive behavior and accessibility across all screen types

Technical Implementation:

• Designed multi-step SVG-based pathway with sequential navigation
• Implemented clickable milestones linking to detailed resource pages
• Created responsive SVG scaling maintaining clickable region accuracy across devices

Accessibility Features:

• Logical tab order following visual flow (left-to-right, top-to-bottom)
• Proper heading structure for each roadmap section
• Descriptive link purposes (“Enrollment Requirements,” “Billing Guidelines”)
• Linear text-based step list mirroring visual roadmap for screen readers

View the tool live on Novitas Solutions website

---

Tool 3: Avoid the Wait

Purpose: Interactive self-service map directing providers to electronic submission options for claims, medical records, and correspondence, reducing call center volume.

Collaborative Development Process:

• Graphic designer created base visual layouts and design elements
• I coded the interactive functionality using manual SVG coordinate mapping
• Deployed integrated tools across high-traffic provider portal
• Ensured responsive behavior and accessibility across all screen types

Technical Implementation:

• Created grid-based SVG layout with categorized service icons
• Implemented hover states and click interactions for each service category
• Developed modular JavaScript for scalable addition of new services
• Ensured consistent icon sizing and spacing for visual clarity

Accessibility Features:

• Icon colors met WCAG AA contrast requirements against white backgrounds
• Each icon accompanied by clear text label (e.g., “Claims,” “Medical Review”)
• Predictable grid structure for cognitive accessibility
• ARIA landmarks to identify interactive regions
• Full keyboard access to all service icons
• Information conveyed through color AND icon shape/text (not color alone)

Development Challenges & Solutions

Challenge 1:

Precise SVG Coordinate Mapping Across Screen Sizes Solution: Implemented responsive SVG viewBox scaling with JavaScript-calculated clickable region adjustments. Created percentage-based coordinate system rather than fixed pixel coordinates. Tested across 15+ device/browser combinations.

Challenge 2:

Initial Design Called for Text Links Below Icons Solution: Advocated for making icons themselves clickable for better UX. Demonstrated prototype showing 30% faster task completion with clickable icons. Received approval to implement enhanced interaction model.

Challenge 3:

Cross-Browser SVG Rendering Inconsistencies Solution: Developed fallback PNG images with image maps for browsers with poor SVG support. Implemented progressive enhancement ensuring core functionality worked without JavaScript. Validated across IE9, Chrome, Firefox, Safari.

Accessibility Validation

Testing Performed:

• JAWS screen reader testing (full keyboard navigation, link announcement verification)
• Keyboard-only navigation testing (no mouse)

Compliance Achieved:

• Section 508 (federal accessibility standard)
• WCAG 2.1 Level AA
• ISO 9001 quality standards (Novitas Solutions compliance requirement)

Results & Impact

• Tools well-received by healthcare providers and CMS, with specific comments on their innovativeness
• Reduced call center volume for routine policy and enrollment inquiries
• Zero accessibility violations in federal compliance audits over 8-year production lifecycle Contributed to Novitas Solutions achieving #1 MAC ranking in user satisfaction
• Tools remain in production serving Medicare providers nationwide

Tools & Technologies

SVG (Scalable Vector Graphics), HTML5, CSS3, JavaScript, Responsive design, Section 508/WCAG 2.1 AA accessibility standards, JAWS, WAVE, Cross-browser testing

Reflection

As a former healthcare professional, I approached this project with firsthand understanding of the cognitive load Medicare providers face—managing patient care while navigating complex federal policies and billing requirements. That perspective shaped every design decision: providers don’t have time to read dense documentation when they’re between patients. They need visual, task-focused tools that answer “Can I bill this?” or “What’s my next step?” in seconds, not paragraphs.

The technical challenge was converting static graphics into production-ready interactive tools that remained 100% accessible. I manually mapped SVG coordinates for each clickable region and implemented responsive scaling to ensure the tools worked flawlessly across devices—from desktop monitors to tablets in exam rooms. The Roadmap and FastTrack tools have been live for 8+ years with zero Section 508 violations, serving Medicare providers nationwide.

I advocated for making the icons themselves clickable rather than relying on separate text links below the graphic. This wasn’t in the original design spec, but I knew it would eliminate unnecessary clicks and reduce cognitive friction for stressed providers working between patient appointments. That kind of user-first advocacy—backed by technical execution—is what makes these tools work at scale.