FentanylSupport.org
Results at a Glance
The Fight Against Fentanyl Addiction
With rising national attention on illegally made fentanyl as the primary driver of overdose deaths, our team saw an opportunity to both serve a public need and strengthen our directory network. The goal was to create a new site, FentanylSupport.org, to generate organic traffic through high-volume keywords while delivering genuinely helpful content and resources to individuals and families affected by fentanyl.
The challenge? Go from concept to launch in less than 30 days.
Understanding the Problem
The core problem was twofold:
- We lacked visibility in fentanyl-related search results, which were growing fast.
- There were limited user-friendly resources available online specific to fentanyl treatment, support, and local help.
Our team pitched the idea for a new standalone resource that could act as a modern, informative, and accessible guide for people looking for help with fentanyl use. My role was to design the entire look and feel of the brand and website – including logo, branding, tone, illustration – and to support SEO goals with a custom content experience.
Designing the Brand Identity
Brand Research & Color
As with most of my projects, I started with research. I looked into understanding fentanyl, how it affects those who abuse it, and those who have fallen victim to unintentionally using it. I looked into websites online that served as resources for fentanyl abuse, as well as resources for general drug addiction.
What proved to be the most effective, however, was when I started searching for different phrases related to our new domain. Phrases like “fentanyl support”, “drug abuse resource”, and “quit opioids” gave me a better idea of what our competitors would look like. After clicking into each link of the top results, I took a screenshot to record the look and feel, making sure to indicate what was or wasn’t a sponsored result.
I was inspired in particular of Truth Intiative, an organization that raises awareness against smoking. I remembered their ads from when I was still a kid in elementary school. I was curious about the bold orange color they used, and impressed by how they were still around after all these years. I felt that if I showed the logo to other people around my age, they’d recognize Truth and their antismoking campaigns. I can’t verify this without performing some testing, but it engrained this idea in me that I’d want this new site to have the same type of recognition and staying power.
The second biggest inspiration was the site FentanylAwarenessDay.org. It was a simple site around raising awareness for fentanyl abuse. However, it was the biggest site that I found while searching for fentanyl-related terms and phrases. It was also in partnership with major corporations such as Google, Meta, and even the Drug Enforcement Administration (DEA). It had bright and bold purple and blue colors. I thought, if this site is the biggest resource around fentanyl, then maybe people will associate fentanyl resources with these colors.
Stakeholders ended up agreeing with this logic, and this final color palette was approved. It was a spin of the original Fentanyl Awareness Day colors in that I aimed to make the color palette meet web content accessibility guidelines (WCAG). Some of the blues and purples on the site were too bright.
Creating a Logo
Creating a great logo is certainly a challenge for those that aren’t graphic designers. I tried giving it my best, and after many rounds of feedback and iteration, we landed on a design.
I started with conceptualizing what the logo should represent. Care, recovery, resource, and fentanyl abuse were some of the words that came immediately to mind for what I felt the site should be. FentanylSupport.org should feel comforting and informative to our users.
Exploring different ways to implement this feeling of supporting or caring, I gravitated towards imagery of hands holding or carrying something. Hearts were also an option related that would apply to the theme.
In earlier stages, in an attempt to make a clear connection to fentanyl, I explored letter logo designs. I tried different fonts, and leaned towards serif-type fonts over sans-serif, as those seemed to be reminiscent of Facebook’s logo.
I put together a list of letter logo designs with several other non-letter logo designs and presented them to the stakeholders. It was clear that everyone in the team preferred non-letter logo designs, and I understood why. Looking back, I would have wanted to create something more custom as opposed to fonts that already existed. However, at the time, I was on a short deadline and somewhat inexperienced with creating custom graphics.
In the end, the logo that won over the stakeholders’ was a logo of a hand holding a heart, which was exactly the imagery that I had in mind when I first started my exploration. I then created the favicon and logo lockup as assets, along with the many color variations for all different use cases for the logo.
Tone and Imagery
The next step was to create an imagery guide for the rest of the team to follow. The guide would help inform our content writers in particular on what type of images to use in order to keep the site stay consistent across its pages.
Staying aligned with the logo’s feeling of care and support, I decided that the images should be hopeful. I figured that “happy” wouldn’t be an appropriate feeling to convey without the implication of multiple people supporting each other. On the other hand, “sad” would also not be appropriate, as the site should aim to convey hope. Hands within the images soon became another theme to help showcase care and support. Considering that this site would be a resource, I thought that having medical professionals could be a theme to help show authority and trustworthiness.
To help capture this idea, I gathered images around the web and created something of a mood board. The team was very receptive to the images I chose, and the product owner requested that I put together a folder with images that the team could use freely. I was also asked by a content editor to add custom illustrations, similar to the ones on the other directory sites, that they could easily use.
After considering where on the site content editors would need support, I created seven flexible custom illustrations. They were intended to be around calls to action and FAQs.
Enhancing the Directory
One of the requests that the SEO specialists had for this project was to add an area of fentanyl-based resources and statistics above the directory listings. This area should house custom content per state for fentanyl helplines, local organizations, and statistics. After discussing with the team, I learned that the amount of helplines and organizations would vary greatly between the states, with the minimum being around 3 and the maximum being up to 7.
I thought that the best way to display all of this content without sacrificing page real estate would be to utilize a slider component. However, we didn’t currently have a slider component that would satisfy the type of content these resources have, so I ended up creating one. This component should be flexible with the number of cards it has, and should contain a header and body copy. I made a note that content writers should be mindful of how much content each card has, as the card length would match the tallest on desktop. This became a shortcode that the team could freely use across the site, and since then it’s been used for other resources and calls to action.
The statistics section would have a custom image per state, and a couple of bullet points of custom content. Both the image and content would be put in by the content team, and I set up the template for what I expected that could look like.
I brought the design to the team for review, and we ran into a developer problem. The way that the directory results template was set up was intended to be consistent across multiple sites with the same codebase. Adding this new area would go against the effort the developers had been putting in the last months to help streamline and optimize our sites. This was a problem of not including our developers earlier on in the process. An easy mistake, I learned over the years that projects should be kicked off with developer limitations and scope defined before diving into high fidelity designs. However, when this came down the pipeline, I assumed everything had been cleared.
After talking through some potential solutions, we landed on a compromise. We could add the new resources and statistics section without sacrificing bloat and deviation from the codebase by adding content in the WordPress editor. The design would need to change slightly: the header removed, and the custom state H2 moved out of the listing cards section. A pretty light lift for all teams involved, the collaboration led to a successful compromise.
Results
Starting from 0 and ending at 1 within a month’s time, I consider every pageview, lead, and rescue as a success.
- Keywords started to pick up in the search console within the week of launch. Site indexing took a couple weeks to gain traction.
- Since launching, the site has gained over 11,000 total pageviews, with ~14% of that traffic engaging with calls to action.
- Advocacy partners described the brand as “compassionate,” “professional,” and “not overwhelming”- key feedback for a stigmatized topic.
- Created a new source to generate KPIs for our team that shouldn’t cannibalize our other directory sites.
- Built something unique to the fentanyl abuse space to help provide resources to those in need.
Reflection
In the end, I learned a lot about creating a website from scratch. I spent a lot of time doing research into competitors and crafting the expected look and feel of the site. If I could go back, I would want to spend more time with letter logo design, and learn how to create a custom graphic to add more uniqueness to a logo. I also intend to make sure everyone is on the same page before designing, to make sure we don’t hit any roadblocks or limitations.