Risk → answers → action
Know the Dangers
Visitor questionWhat do I need to know or do right now?
Next stepUnderstand the risk, find naloxone, or get help
Live public health redesign
Research · UX/UI · writing · front-end
People came to Know the Dangers with serious questions. The website made the answers too hard to find. I rebuilt it so the next step was clear.
The goal: Turn a cluttered information site into a clear statewide resource for understanding opioid risks, finding naloxone, getting treatment, and helping someone else.
StatewideOne clear public health resource
83.8%Visitors on mobile
End to endResearch through the live build
01 People
The old site had information. People still had to hunt for the part that could help.
Know the Dangers started as a site about synthetic drugs. As the opioid crisis changed, more facts, warnings, stories, resources, and campaign pages were added. The site grew, but the path through it did not. The goal was to make help easier to find, especially for someone worried, overwhelmed, or using a phone.
This was not a normal marketing problem. Someone could arrive trying to recognize the signs of an overdose, find naloxone, understand fentanyl, help a family member, locate treatment, read a recovery story, or share reliable information. The site had to support all of that without sounding cold, preachy, or hard to trust.
I led the redesign from the first review through launch. I studied traffic, mobile use, and heatmaps. I worked with the people running the campaign, mapped the content and navigation problems, and set a direction that put urgent actions and plain-language choices ahead of the old site structure.
I did not hand off a concept and walk away. I built the site structure, wireframes, interface, copy, responsive behavior, WordPress front end, SEO foundation, accessibility, tracking, QA, and post-launch review. That kept the thinking intact from the first problem to the live page.
The question behind the redesign
Can someone under pressure recognize the right action before the website asks them to read everything else?
What I studied before changing the experience
The site already had real traffic and important content. I needed to see what people came for, which paths they used, where the page lost them, and which answers were getting buried.
Analytics and traffic paths
I reviewed where people arrived, what brought them in, which devices they used, where they went next, and whether they reached help, naloxone, treatment, resources, or recovery content.
Heatmaps and scroll behavior
I studied what people clicked, what caught their attention, how far they scrolled, and which important sections disappeared too far down the page.
Stakeholder conversations
I worked with campaign stakeholders to understand the public-health goals, the language that had to stay accurate, the resources that mattered most, and the people the site needed to serve.
Content and SEO audit
I found outdated priorities, repeated ideas, buried resources, unclear labels, and pages that search visitors could not find or understand quickly.
Four people had to recognize themselves quickly
These visitors did not arrive with the same knowledge, urgency, or emotional state. The site had to give each person a clear route without breaking the campaign into separate experiences.
Someone worried about immediate danger
May be scared, moving fast, and unsure whether what they are seeing is an overdose.
Needs to know: Is this an emergency, and what do I do now?
A family member or friend
Needs clear guidance, signs to watch for, naloxone access, and support without judgment or jargon.
Needs to know: How can I help without making this worse?
Someone seeking treatment or recovery
May need reassurance, a clear route to care, recovery stories, and a first step that feels possible.
Needs to know: Where can I start, and will someone meet me there?
A community educator or partner
Needs trustworthy facts, useful materials, and a simple way to point other people toward help.
Needs to know: What can I trust, use, and share?
02 Structure
I put the urgent path first, then let people choose how deep to go.
The old site was organized around the campaign. I reorganized it around what a person needed to do: get immediate help, understand the risks, find naloxone, look for treatment or recovery, read real stories, or use trusted resources. Those paths connected to each other instead of sending people back to the homepage.
01
Is someone in immediate danger?
Put emergency instructions ahead of campaign messaging and educational content.
02
What am I trying to understand?
Give people direct paths to facts, warning signs, fentanyl, overdose, and changing drug risks.
03
Do I need naloxone?
Explain what naloxone is, how it works, and where to find it in one clear path.
04
Where can I find support?
Connect treatment, recovery, helping someone else, and local resources to a visible next step.
05
What can I share?
Make facts, stories, videos, and community resources easy to understand and share.
Principles that drove the transformation
The rules were simple on purpose. They gave us a clear way to judge every page, label, section, and action based on how people would actually use the site.
Lead with the immediate action
Emergency guidance, naloxone, and help could not sit behind a campaign introduction. The highest-risk question had to be answered first.
Use plain language to route people
Labels used the words people were likely to look for. Clinical detail stayed available after the right path was clear.
Design for the phone first
With 83.8% of visitors on mobile, section order, tap targets, reading length, menus, forms, maps, and actions had to be designed for the phone from the start.
Create repetition without clutter
Important actions returned when the surrounding content created a reason to act. I repeated the route, not the entire message.
The site presented a campaign.
- The site’s original focus no longer matched the changing opioid crisis.
- Important content sat inside tiles and dense sections with no clear order.
- People had to guess where help, naloxone, facts, stories, and treatment were hiding.
- Long desktop pages became even harder to use on a phone.
- Actions competed with the information instead of following from it.
The site presented the next useful choice.
- Emergency guidance and help stayed visible across the site.
- Navigation grouped information around what people needed to find or do.
- Audience paths helped people quickly recognize where they belonged.
- Mobile content was rebuilt for scanning, understanding, and touch.
- Actions appeared beside the information that gave people a reason to use them.
A transformation beneath the visual change
The redesign did more than modernize the campaign. It turned a collection of messages into connected paths to information and help.
Previous site
Redesigned site
I kept the campaign recognizable while rebuilding the order, navigation, audience paths, mobile experience, and the way information led to action.
03 Build
The UX stayed connected from research to production.
I did not hand off a design and hope the live site kept the logic. I carried the work through wireframes, interface design, content, WordPress development, mobile behavior, accessibility, SEO, analytics, and QA. The decisions survived because I stayed with them through the build.
01
Read the behavior
Traffic, heatmaps, device use, and stakeholder input showed where the old site helped and where it hid the next move.
02
Reframe the content
I grouped the content around urgent questions, risks, naloxone, treatment, recovery, stories, audiences, and resources. The old campaign structure no longer controlled the experience.
03
Wireframe the first moves
Early wireframes set the emergency layer, main message, help paths, audience choices, supporting proof, and repeated actions before visual styling.
04
Design a usable campaign system
The interface balanced urgency with hope. It used strong contrast, readable type, reusable cards, clear buttons, human imagery, and consistent patterns.
05
Build it in WordPress
I turned the system into responsive HTML, CSS, JavaScript, and WordPress components for resource paths, the naloxone finder, forms, and ongoing content.
06
Measure and refine
After launch, I reviewed traffic, mobile use, page engagement, scroll depth, actions, forms, and search growth to see what worked and what still needed attention.
Representative reconstruction
The wireframe was a sequence of decisions.
I rebuilt the original planning logic in the same wireframe style used across these case studies. It shows the choices that mattered: emergency guidance first, one clear message, direct paths to help and learning, audience recognition, supporting content, and a final action.
The question was never “What can we fit on the homepage?” It was “What does this person need before they can safely choose the next step?”
Audience paths
Get help
The system behind the pages
The site had to stay clear as drug information, stories, resources, campaigns, and public-health priorities changed. I built reusable patterns so editors could update the content without rebuilding the experience every time.
Task-based navigation
Facts, warning signs, naloxone, treatment, resources, and stories used clear labels and predictable paths.
Persistent emergency layer
Overdose guidance and help stayed visible without turning every page into an alarm.
Reusable content patterns
Audience cards, resource groups, stories, lessons, warnings, videos, and actions followed shared rules instead of one-off layouts.
Editor-safe WordPress build
Editors could update fast-changing content without breaking spacing, order, accessibility, or mobile behavior.
SEO, speed, and accessibility
Clear headings, readable contrast, fast mobile pages, metadata, crawlable resources, keyboard support, and alt text were built in.
Measurement and QA
Tracking, heatmaps, responsive testing, forms, maps, action paths, scroll behavior, and post-launch analytics made the work measurable.
Design into code
The build was part of the public-health experience.
Because I designed and developed the interface, I could protect the urgent message, reading order, tap behavior, and content relationships all the way to launch. The important decisions did not get lost in handoff.
- Responsive WordPress front-end development
- Naloxone finder and resource pathways
- Reusable campaign and education components
- UX writing and content restructuring
- SEO, accessibility, performance, tracking, and QA
Mobile path
The phone was not the smaller version. It was where most people used the site.
With 83.8% of visitors on mobile, the site had to work in short reading windows and stressful moments. I simplified the header, increased tap space, shortened openings, moved urgent routes forward, stacked choices clearly, and kept actions close to the content that made them matter.
- Emergency guidance stayed visible and readable
- Navigation focused on the most useful paths
- Sections were reordered for quick scanning and touch
- Resource cards and forms were built for a phone
- Headings and copy were shortened for smaller reading windows
04 Behavior
The heatmap showed where attention started, and where the page began to lose it.
I used behavior data to test the page, not decorate the case study. The heatmap showed strong attention around the emergency strip, navigation, search, and “Get Help Now.” People also used the first clear content choices. Attention dropped in longer sections, which confirmed that high-priority routes had to appear earlier and return when the context made them useful.
The utility layer mattered
Emergency guidance, search, navigation, and the help action earned attention before deeper campaign content.
People used category paths
Clear choices moved people forward better than a long introduction.
Priority could not wait
Important resources could not sit low on the page and depend on everyone reaching them.
Repeat the route, not the noise
High-value actions returned after useful information, when people had a reason to act.
Behavior turned the redesign into a testable system
The heatmap separated design opinion from real behavior. It showed which controls people used and where the page order needed to do more.
I used those patterns to strengthen the first screen, keep urgent actions visible, move resources earlier, and decide when repeating an action was helpful.
A public-health page can be accurate and still fail if the person cannot recognize the next move quickly enough.
The design had to shorten the distance between concern and action without removing the facts people needed to trust that action.
What I carried into iteration
These were not launch-only fixes. They became rules for new pages, campaigns, drug information, stories, and resources as the site grew.
01
Protect the urgent layer
Keep emergency instructions and help actions visible, readable, and separate from campaign messaging.
02
Measure completed movement
Page views matter less than whether people reach naloxone, treatment, forms, maps, and the resources they came to find.
03
Keep mobile content intentional
A new desktop section does not automatically deserve the same place or length on a phone.
04
Use search growth as a content signal
Growing entry pages show which questions people bring from search and where the site needs a clearer next step.
05 Results
The redesign helped a statewide resource reach far more people with clearer paths.
No single screen or channel caused the result. Better UX, mobile usability, SEO, content, social and cross-network campaigns, stronger resource pages, and clearer actions worked together. The numbers showed major audience growth, a heavily mobile audience, more use of priority content, and more movement toward recovery-related actions.
+2,681.65%
Reported user growthAudience
The campaign and redesigned experience reached a much larger audience during the measured period.
7,621
New usersAcquisition
Social and cross-network campaigns brought thousands of new people to the public-health resource.
83.8%
Device realityrsDevice reality
The audience confirmed that mobile order, speed, tap behavior, and short reading windows had to lead the design.
+240.79%
Resource page viewsOpioid Addiction Resources
A high-priority resource page saw a large increase in use after the redesign and campaign work.
The strongest signal was not traffic alone. It was movement toward useful content and action.
Priority resource pages became easier to find. Mobile visitors got an experience built for the way they arrived. Deeper content earned more use, and clearer actions such as “Get Help Now” supported more activity on recovery-related forms.
EarlierHelp, naloxone, and resource choices appeared closer to the first question.
DeeperBetter content placement helped more people explore priority sections.
ClearerClear actions connected the information to a useful next step.
Performance figures come from the analytics summary supplied for this case study. They reflect the measured redesign and campaign period. They show the overall direction, not the impact of one isolated design change.
What the results told me
The metrics supported the design choices, but they also kept the story honest. A public-health website grows through content, search, campaigns, mobile usability, and the clarity of the next step.
01
Mobile-first was the correct starting point
The device mix made it clear that mobile was the main experience, not a smaller version built later.
02
Priority content became easier to reach
The increase in opioid resource views showed that navigation, search, campaign traffic, and page order were bringing people into more useful information.
03
Reach and UX had to work together
More traffic would have meant less if the site still hid help, naloxone, treatment, and resources after the click.
04
The site needed an iteration foundation
Analytics and heatmaps gave the team a way to judge new content and changing public-health needs after launch.
Clearer urgent paths
People could find emergency guidance, help, naloxone, treatment, and resources without decoding the campaign.
A true mobile experience
The site was built around the device most people used, with clearer order, better tap behavior, and less friction.
More useful reach
SEO, campaigns, content, and UX worked together to bring more people into priority public-health information.
A measurable foundation
Heatmaps, analytics, forms, action tracking, and page behavior gave the team a stronger basis for future changes.
My contribution
What I actually did on Know the Dangers
I worked across research, content, design, development, search, and measurement. Keeping those pieces connected helped the public-health goals survive all the way to the live experience.
Stakeholder conversations and requirements
UX analysis and stakeholder presentation
Analytics, traffic paths, device review, and heatmaps
Content inventory, SEO audit, and search planning
Site structure and navigation
User journeys and urgent-action flows
Wireframes and interface design
Mobile-first and responsive design
UX writing and content restructuring
WordPress front-end development
Naloxone finder and resource experience
Reusable page and campaign components
SEO, metadata, and crawlable content structure
Accessibility, performance, responsive QA, and launch support
Post-launch analytics, heatmaps, and iteration
The work in one sentence
I did not just redesign a state campaign site. I rebuilt how people moved from fear or uncertainty to a useful next step.
The final site connected emergency guidance, opioid education, naloxone, treatment, recovery, stories, and community resources in one mobile-first system that could keep changing with the crisis. That meant more than a new visual design. It meant connecting research, public-health priorities, writing, site structure, SEO, front-end development, accessibility, and post-launch data around one question: what does this person need right now?