In early April, we connected with a team from Make the Road and the Center for Popular Democracy. They needed a campaign website geared towards calling out corporations complicit in Trump’s “anti-immigrant, anti-worker” agenda. We collaborated with them in the creation of a dynamic website that would allow visitors to send letters to the CEOs of 9 companies who “backed hate”. We delivered backersofhate.com, a multilingual responsive site with a clever content management system that integrated with The Action Network — all within a tight 2-week deadline.
Our prompt was just two wireframes and the promise of an illustrated header image. As Katie began working with the illustrator and client to create the design, I began researching the best way to build the functionality to make this real. We knew that the site had to be stable and fast while allowing near-constant edits from the campaign. Final language wouldn’t be ready until just before the launch.
Initially, we were told that a custom system would be developed in Ruby (a coding language) to handle sending mail to the CEOs of our 9 target companies. This led me to choose Middleman to build a static version of the site; it could then be seamlessly folded into the custom Ruby system still under development. It quickly became clear that a custom solution wasn’t feasible, so the team pivoted to use The Action Network, that had a system for sending mass emails. It wasn’t perfect, but we were able to hack a method to use their petition system to collect messages from visitors and then deliver them to the CEOs en mass.
While I was building a live wireframe using Middleman and Bootstrap, Katie and the illustrator were developing the site design. We worked in parallel, simultaneously developing the backend and design.
As the design was being reviewed and finalized by the team, I was testing the Action Network integration. Thanks to the excellent design of their widgets, the Action Network embeds were customizable. This allowed us not only to manipulate the styling, but also the content of their widgets. This enabled us to customize elements of the petition widget in order to use the verbiage of a letter-writing campaign! In multiple different languages at that.
By this time, the top banner illustration was done and the final design was nearing completion. It was a breeze to apply styling to the live site because all the pieces were in already in place. The final piece of the puzzle was the content.
Lawyers were still reviewing site copy and the translated spanish version was still under development. The developer and I had anticipated this, so we set up a system that allowed non-technical users to edit all the copy in the site using a web interface. Once an update was made to something akin to a text file, the site was automatically re-generated and deployed.
It was quite a brilliant system put together by James Vaughan, the in-house developer. We were able to combine the speed and flexibility of a static site (a website that is a static html file -in our case generated by Middleman and served up by Gitlab.com), with the ease of editing—which normally needs a comparatively sluggish content management system such as WordPress.
Of course, the whole thing was fully responsive, including Jason Longo’s awesome site logo and background image, featuring cartoonish corporate villains.
In just under two weeks, we were able to coordinate the creation of a fantastic little website for a very cool campaign, which you can read about on Time.com.