Case Study

S&C Electric Company is a global manufacturer of smart grid and power distribution technology, with products deployed across utilities, industrial facilities, and critical infrastructure worldwide. As a Frontend Developer embedded in the digital team, I’ve owned the modernization of the web interfaces that engineers, operations staff, and [ADD: team description] depend on daily — working within an enterprise CMS, security-reviewed deployment pipelines, and a cross-functional stakeholder environment spanning marketing, IT, and business leadership.

The Challenge

Three internal dashboards — used daily by employees across four facilities — were averaging 6-second page loads on the corporate VPN. Beyond raw performance, the UI codebase had grown without a shared component system: every new feature was a custom build, every accessibility finding was an isolated fix, and there was no documented pattern library for the team to maintain consistency from.

The mandate: reduce load time to under 2 seconds, establish a maintainable frontend architecture, achieve WCAG 2.1 AA compliance across all updated views — all without introducing framework dependencies that would stall IT’s security review timeline.

[ADD: If additional context applies — e.g., CMS migration, analytics gaps, reporting visibility, or content workflow pain points — add a sentence here.]

My Role

As the Frontend Developer owning this initiative from audit to handoff, my scope included:

  • Identifying and resolving rendering bottlenecks across all three dashboards
  • Designing and building a token-driven component library in vanilla JS and CSS custom properties — no framework dependencies
  • Implementing WCAG 2.1 AA compliance across all updated navigation patterns, interactive controls, and views
  • Working within Optimizely CMS to build and standardize [ADD: content templates / component blocks / page structures]
  • [ADD: Analytics, reporting, or instrumentation work — e.g., “Instrumented [X] to surface [Y] visibility for stakeholders” or “Built a reporting dashboard for [team] covering [metrics]”]
  • Coordinating zero-downtime production deployments with IT over the corporate VPN
  • Delivering team training, component documentation, and a handoff kit the team continues to extend

What We Achieved

  • Reduced average page-load from ~6 s → 1.7 s on all three dashboards — a 72% improvement, exceeding the 65% target
  • Cut uncompressed asset weight by ~41% through a systematic audit and cleanup pass
  • Reduced reported UI-related support tickets by approximately 30% in the quarter following the component library launch
  • Achieved WCAG 2.1 AA compliance across all updated views and navigation patterns
  • Delivered all three dashboards on schedule within the six-month window, with zero unplanned downtime during deploys
  • Built a reusable component library the team continues to extend independently — [ADD NUMBER] components and growing
  • [ADD KPI: e.g., CMS template adoption rate, content publishing time reduction, analytics dashboard usage, or workflow improvement metric]
Process

How We Got There

Audit

Full codebase, dependency, and performance audit across all three dashboards — identified the heaviest rendering bottlenecks and catalogued accessibility gaps before writing a single line of new code.

Architecture

Designed a token-driven component library in vanilla JS and CSS custom properties. Zero framework dependencies was a hard requirement — every third-party addition triggered IT security review.

Build

Six-month iterative delivery with zero-downtime deploys over the corporate VPN. Each sprint shipped a measurable performance delta reviewed by engineering and business stakeholders.

Accessibility

Systematically addressed WCAG 2.1 AA requirements across all updated views — focus management, color contrast, ARIA labeling, keyboard navigation — treated as design constraints from day one, not post-launch fixes.

CMS & Workflow

[ADD: Description of Optimizely CMS component work, content template standardization, or workflow improvements built for the marketing or content team.]

Launch & Handoff

All three dashboards shipped on schedule with full engineering and stakeholder sign-off. Delivered team training, written component documentation, and a handoff kit the team continues to build from.

Reflection

Lessons Learned

Vanilla-first pays off in constrained environments

Every framework dependency is a security review. Building on CSS custom properties and vanilla JS shipped faster and with fewer blockers than any scaffolded framework would have in this environment.

Performance numbers win stakeholder buy-in

A 72% load-time improvement communicated value instantly. Measured outcomes spoke louder than any prototype or design demo in every stakeholder review.

Accessibility is a design constraint, not a checklist

Baking WCAG 2.1 AA compliance in from day one prevented costly late-stage refactors and meaningfully improved the daily experience for employees across four sites.

Cross-functional coordination is a frontend skill

[ADD: Insight about working across IT, marketing, analytics, or business stakeholders — e.g., lessons learned from navigating enterprise deployment constraints or aligning on measurement criteria.]