In early 2022 I led a team that designed and built a web app inspired by the AIDS Memorial Quilt project, and sought to use a similar method to raise awareness of the then-just-over one million deaths in the U.S. from overdose in twenty years. While also including informational pages for users to learn about the crisis, the heart of the site was a “mosaic” of posts from people who had lost someone to overdose.
The team consisted of myself, a junior backend engineer, a graphic designer, and was transitioned to the client’s technical team for support after completion.
This site was built for a client I had done previous work for (the NJHRC project, for example), but this time my work was a much higher-profile part of the project. This site is the centerpiece of a significant advertising campaign (including a full-page ad in the New York Times), but rather than being simply informational, interacting with the site is the entire purpose of said campaign.
Because of this, a significant amount of effort was put into both ensuring broad usability in terms of device and load-speed, as well as building a flexible and stable backend which would be quickly and easily scalable by the client if the campaign took off in the future. We used React, Next.js, MongoDB, Vercel, and the Amazon S3/Cloudfront suite.
The mosaic page itself presents as a sort or organically-shaped grid of small (but zoomable) images. Visitors can click to zoom, and scroll to navigate, and from closer in can select specific posts to call up in a modal window, where further memorial text from the post can be read.
My background as both a frontend engineer and a designer gave me a unique perspective on how to create this mosaic in a way that merged visual and interaction design. The page is built as a simple array of “post” objects, randomly assigned at first page-load to fill across a fixed length. The shape of the overall mosaic also changes on page load, giving the page a sense of dynamism that the original AIDS quilt lacked. The pink squares represent the people who have been lost to overdose but for whom we do not have a memorial post.
The scale of this project meant that the cross-functional team I led was relatively stretched to achieve our various milestones. To this end I leveraged the work I have done elsewhere in design systems and operations to make sure that we implemented a beneficial amount of Agile process and tools without over-optimizing. We used Asana to track goals and epics, and I set very explicit and clear timelines with all of the team members and stakeholders to ensure minimal confusion down the road.
The above sample of our Figma file illustrates a bit of the work we did as a team to guarantee that the product owners had good transparency into the project without compromising our timelines to keep them apprised of progress.
This site included both a manual upload element for contributions as well as social media API queries for specific hashtags and account-mentions. This obviously introduced a certain amount of risk of inappropriate content, and so I designed and built a simple post-moderation system to guard against unwanted user content showing up on the mosaic itself.
This system could be toggled on and off with a simple boolean value, allowing the product owners to decide on very short notice whether they wanted to get more posts in faster, or protect the app against potential spam.