In late 2021 I led the design and building of a small site to support the New Jersey Harm Reduction Coalition’s campaign to block the closure of safe needle exchange programs, as well as to support a bill that would allow the state government to open and operate such sites (previously handled by individual municipalities). The legal challenge and awareness campaign were supported by billboards and ads across the state, all of which directed voters to go to the site to learn more about this important issue.
You can see the site for yourself (as of February ‘22) here: https://www.keepnjhealthy.org/.
The agency that I worked with on this project is primarily a video- and photo-production company, and so although they had minimal experience in the world of web apps, the multimedia work they put together was incredibly high-caliber.
A major design and engineering goal was therefore to do our best to get the site “out of the way” of the users seeing and interacting with the videos, photos, and quotes that came out of the many hours of production and interviews with the people on the ground.
The entry to the site is a full-screen series of videos with a “choose your own adventure” framing. The user clicks through a handful of questions, and different explanatory videos play depending on where in the branching narrative the user is.
Crucially from a technical perspective, the exact order and branching of this “journey” was not locked in until very late in the project, and so this part of the website was built to be completely modular. Any set of question and follow-up video can be paired, and any number of additional branching paths and videos can be added at any point in the flow.
The most challenging part of this particular aspect was not the modularization (actually very easy with functional React.js components), but dynamically switching out full-screen videos and auto-playing them without having all the media in the DOM at the same time.
The core element of the site was a series of video interviews with people involved in the operation of such sites, and people impacted by their opening or closure.
Behind the scenes, this required a bit more complexity than the average static site with “only” single-digit number of pages. To ensure everyone on the team was aligned, I created a site map and architecture diagram. Though this site was not uniquely complex behind the scenes, this document allowed the non-technical graphic designer and product owners to have a clear understanding of what we were expecting to build.
This resulted in my team addressing misunderstandings and unclear concepts very early in the process, which undoubtedly saved us design and development headaches down the road.
At the heart of the site is a “hub”, linking out to individual “story” pages for the different aspects of the campaign. Again, the design of this page was meant to make the images of the people impacted front-and-center.
As in all of my work, I am an absolutely stickler for process and systemic thinking. Thus, small consistent design patterns (the slogan in the bottom-left, the double-caret to indicate links) tie this page together with the earlier landing pages, and the individual story pages themselves
Ultimately, the campaign to improve access to and funding for safe-needle exchange sites was successful — the legal case to block the closing of such sites in New Jersey was upheld, and in the beginning of 2022, the state legislature passed, and Governor Murphy signed into law a bill to allow the state Health Department to open such sites, rather than leaving it to individual municipalities to handle.