I remember where I was at the Boston bombing terrorist attacks in 2013. I was at work, even though we had the day off. I get a lot more done in the office than I usually do at home. The phones were so jammed I didn't know what happened until hours later. My good friend and colleague at the time, Kyle, was on his way over on his bike. Since he wasn't in the know either, we both found out about it when I came out to mean him in front of our building on 53 State Street.

Launching into Action

One Boston Day is the celebration of the resiliency of the City of Boston amongst the horrible Boston Marathon bombings of 2013. It was originally set up as an impromptu direct response to help the victims, but it quickly grew into something much, much larger. We initially worked with John Hancock to set up a fund for victims called The One Fund.

Evolution of a Movement 

The next year, in 2014, we worked with the City of Boston to reclaim our city and re-establish these tragic events as our own; as a unifying measurement of strength and resiliency.

On a personal level, even though we had off of work for that Marathon Monday, I still went into the office. I was trying to be productive, and as such, I had no idea what was going on in the outside world. I received frantic texts from friends and family wondering where I was. Cell towers were so jammed, it took me a while to respond. This hit me to my core.

Sweet Caroline

My roommate at the time, and one of my all-time best friends, Ryan, bought me a few Red Sox tickets as a Christmas present. One of those games would be a game that was postponed due to the bombing. We were in the first game that was open to the public. I can still hear Neil Diamond singing 'Sweat Caroline' live during the 7th inning stretch.

Over the years, I have put my all into this initiative. It started as a super scrappy project that led to building interactive dashboards for city officials to come in and review, outdoor billboards at the marathon finish line, and more.

It was originally a flat HTML experience hosted on a Rackspace server, then it moved over to AWS, then we graduated to a small JS framework, we tinkered with a CMS, but never really got anywhere.

Every year, a different team member was assigned to the project. While it was great to assign everyone to this type of gratifying work, it became really hard to disseminate information around what framework to use, where to host, what preprocessors to use, etc; You have to remember, this project is almost 7 years at old this point, and is only ever touched a week or two out of the year.

We realized that we couldn't manage content across multiple repos with pull requests as our sole source of truth. It's not user friendly to us, as an agency, or to the City of Boston as an entity.

The site has always been on the "JAMstack", but never really embraced it. This year, we aimed to change that.

Content Management with Craft CMS and GraphQL

Hill Holliday has been a fan of Craft CMS since v1. We've built experiences for the Boston Police Foundation, Brigham and Women's Hospital, and multiple other brands and municipalities in our great commonwealth with it. It's super easy to use; we've fallen in love with it, and so have our clients.

We spun up a new CMS instance of Craft and shared it with our content moderation team. We modeled our instance after the newly announced Craft Cloud (meaning there is no view state, or 3rd party plugins, just the data and admin experience). The goal is to build once, migrate to Cloud once it is released, and shut off our old systems.

Craft has made it easy to build out different data models and integrate them into our Nuxt frontend. All of our data is exposed over a public GraphlQL schema:

Managing Content with Craft CMS

We have over 20 editors in the system looking for and monitoring new content. Craft makes it super easy to provide our team members with logins. We don't even have to teach them how to make updates, because they can figure it out on their own.

Through this new headless CMS architecture, we've leveraged GraphQL, a new query language that lets us create super performant data queries that feed directly into our templates.

We are no longer bound by the database, and can instead query the data we need and get in on-demand on the frontend.

Easy Updates with Craft CMS

One Boston Day has a bunch of reusable components, however, we weren't using them that way. We had multiple video players across Vimeo, YouTube, and a few others. We used this as an opportunity to consolidate our video players and create one reusable component:

The Video component is just a small example, but we worked with the City on coming up with a shared design system, or Atomic Design System, in order to build something that would work for this latest year, as well as any year moving forward.

We leveraged the static site generator, Nuxt.js, as our front-end framework. Nuxt has features like automatic code-splitting, routing with async data, http2, and built-in bundling that made this transition really easy for us. All of our existing paradigms fit so neatly into this Vue-based system.

I was the lead on this, but I definitely had help from my team with a few things. Ema, a creative technologist on our team, was stellar on jumping in and making updates with zero previous knowledge with Nuxt or Vue. It was super easy for her to npm install and help start grinding on features.

Thanks

I called out Jenny already, but she really rallied around this whole initiative and brought it to life in such a short time. Emily Capace was an amazing art director and designer, and a bunch of folks at Hill Holliday were great at monitoring and updating content.  

If you have a project you're really passionate about, even if it's pro-bono, like One Boston Day, I'd love to hear from you.