CorVel
As lead developer of this 2018 rebuild, I worked across the whole stack with most of my time on the backend. CorVel manages workers’ compensation, liability, health, and disability claims for employers, insurance carriers, and government agencies, so the site had to serve risk managers, brokers, adjusters, healthcare providers, injured workers, and investors without splintering into six different sites. Some highlights:
- Umbraco Backend, Angular Frontend. The backend is C# and ASP.NET MVC on the Umbraco CMS, hosted on Azure. Rather than rendering pages with Razor, it serializes each page into a JSON content model and hands that to an Angular frontend, which builds the page from it.
- Widget-Composed Pages. A page’s content is an ordered list of widgets picked in the CMS, and a widget outlet component maps each widget name to the Angular component that renders it. Editors reorder and swap them without a developer.
- Scroll and Hover Animation. Motion was a stated goal for the refresh, and it ran on Angular’s animation system. Sections fade in as they enter the viewport, content blocks slide in from the left or the right depending on which side their image sits on, grid items stagger in one after another, and the carousels, the split callout, and the footer each get their own animation. On the services page, an isometric city illustration lights up whichever service you hover over.
- Rendered HTML on First Load. To improve SEO, we used Prerender to serve the full HTML on the initial request, then hydrated the page with Angular.
- Responsive Images with Focal Points. A shared image component outputs a
<picture>with breakpoint-specific sources, and every image is cropped and resized on the server through the CMS image pipeline. Editors set a focal point and a compression quality per image, so a wide hero crop and a small card thumbnail of the same photo both keep the subject in frame. Images also carry schema.orgImageObjectmetadata. - Formulate. Forms were built with Formulate, the open source Umbraco form builder I created. A form’s definition, including its fields, labels, validation rules, and the error messages for each one, is serialized into the page model along with everything else, and an Angular component renders it and validates against those rules before posting back to Umbraco.
- Everything Editable. Beyond page content, the logo, header links, main menu, cookie disclaimer, footer link columns, social links, newsletter signup, and its success and failure messaging are all managed in the CMS.
- Office Directory. All 84 CorVel offices across 43 states on a single page, filterable by state, each with its phone and fax numbers.
- Knowledge Center. Customer case studies, clinical case studies, whitepapers, and survey reports, all tagged so they could be surfaced on the pages they relate to. The homepage case study carousel fetches its items after first paint to keep the initial response small.
- Performance. The stylesheet and the web font are both preloaded and applied on load.
- Browser Support. IE11 was still in scope (alongside Edge, Chrome, Firefox, and Safari), so it was fully supported.
- SEO and Analytics. We implemented a 301 redirect map at launch to preserve search value on the moved pages. Pages include JSON-LD and Open Graph tags, with Google Tag Manager handling analytics and conversion tracking.
Here’s a video showing the animations that occur when scrolling down the homepage:
