Harvard Health Publishing

Project Description

Harvard Health Publishing is a publication site at editorial scale, with hundreds of articles, dozens of landing pages, and a designer working on the redesign who could not, reasonably, draw every screen. As the main Front-End developer on the 2020 redesign, my role was as much filling in the design where it didn't yet exist as it was implementing it.

I worked in Laravel, Tailwind, Vue, and Alpine.

Templating consolidation

The piece of work I'm most proud of came from a maintenance problem. The site had accumulated a sprawl of one-off landing pages with each having its own HTML and CSS, much of it duplicated. Every accessibility or responsive fix had to be made N times, in N slightly different ways. I rebuilt the system around roughly eighteen shared templates that covered the patterns the design actually needed, then trained the designer to spin up new landing pages by editing a PHP content object. This allowed him to put his content into structured fields instead of copying the previous page's markup and replacing the specific content. To make it navigable, I documented every template in a spreadsheet mapping templates to the pages that used them.

The result was that adding a new landing page went from a development task to a content task, and accessibility/responsive fixes only had to happen once. The designer was able to ship faster without my needing to update his code with modern HTML, responsiveness, and accessibility best practices each time he needed a new landing page.

Bundle-purchase page

Another substantial piece of work was a bundle-purchase page for the Special Health Reports — a new page type that let users select and combine multiple products in one transaction, which the site hadn't previously supported. The designer provided the initial static layout. I worked out the interaction details the design didn't yet describe: how product format selection should behave when a user changed their mind, how to make it obvious which format had been added to the cart, what should happen to the order form at the bottom of the page as items moved in and out, and how the tiered-discount display should react to cart contents. I owned the JavaScript for the full flow.

Accessibility

The other thread I'm proud of is accessibility. I pushed for proper a11y on the build when the company wasn't yet treating it as a priority. When Harvard's accessibility requirements later ramped up, much of the groundwork was already done, which spared the team from having to make any significant changes in a rush.

Testing

HHP is also the first project where I introduced E2E testing using Cypress to test crucial parts of the site and ensure future updates didn't break any of those features. This was especially important with HHP being one of our only projects that had more than 2 developers making code updates frequently.