Risk → understanding → action
Know the Dangers
Visitor questionWhat do I need to know or do right now?
Next moveGet help, find naloxone, or understand the risk
Shipped public health work
UX research · UX/UI · front-end
Know the Dangers carried urgent information. The website made people work too hard to find the help. I rebuilt it around what someone needed to do next.
I led stakeholder conversations, UX research, analytics and heat-map review, information architecture, UX writing, interface design, mobile-first front-end development, WordPress implementation, SEO, launch support, and behavior review. The goal was to turn a cluttered information site into a clear statewide resource for understanding opioid risk, finding naloxone, getting treatment, and helping someone else.
See the decisions behind the transformation. Urgent paths, mobile behavior, wireframes, build, SEO, and iteration.Public healthStatewide opioid resource
83.8%Mobile audience
End-to-endResearch through launch
01 People
The old site had information. People still had to hunt for the part that could help.
Know the Dangers began with a narrower focus on synthetic drugs. As the opioid crisis changed, the site accumulated more facts, stories, resources, warnings, and campaign content without rebuilding the experience around the questions people were now bringing to it. The redesign had to turn that content into a usable path, especially for someone arriving worried, overwhelmed, or on a phone.
This was not a conventional marketing problem. A visitor could be trying to recognize an overdose, find naloxone, understand fentanyl, help a family member, locate treatment, read a recovery story, or share accurate information with a community. The site had to support those needs without sounding cold, alarmist, or difficult to trust.
I led the UX, UI, and front-end work from analysis through launch. I reviewed analytics, traffic paths, device use, and heatmaps; talked with stakeholders and people close to the campaign; mapped the content and navigation problems; and presented a UX direction that put urgent actions and plain-language choices ahead of the old site structure.
I stayed inside the build. I created the information architecture, wireframes, interface system, responsive behavior, UX copy, WordPress implementation, SEO foundation, accessibility and performance work, tracking, QA, and post-launch behavior review. That kept the experience connected 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 existing site already had real traffic and important content. The work was to understand which paths people used, where the hierarchy failed, what received attention, and what disappeared as the page continued.
Analytics and traffic paths
I reviewed entry pages, traffic sources, device use, high-volume content, exits, page movement, and the routes people took toward help, naloxone, treatment, resources, and recovery content.
Heatmaps and scroll behavior
I studied where people clicked, what drew attention in the header and first screen, how far they moved through long pages, and where important sections lost visibility.
Stakeholder conversations
I worked with campaign stakeholders to understand the public-health priorities, the language that had to remain accurate, the resources that mattered most, and the audiences the site needed to serve.
Content and SEO audit
I mapped outdated emphasis, duplicate ideas, weak search entry points, buried resource content, unclear labels, and the pages that could answer common questions more directly.
Four people had to recognize themselves quickly
They did not arrive with the same knowledge or emotional state. The shared interface needed to give each person a clear route without splitting the campaign into disconnected websites.
Someone worried about immediate danger
May be frightened, scanning quickly, and uncertain whether the symptoms they see are an overdose.
Needs to know: Is this an emergency, and what do I do now?
A family member or friend
Needs plain guidance, naloxone access, signs to watch for, and support without judgment or medical jargon.
Needs to know: How can I help without making this worse?
Someone seeking treatment or recovery
May need reassurance, clear service routes, recovery stories, and a next step that feels possible rather than abstract.
Needs to know: Where can I start, and will someone meet me there?
A community educator or partner
Needs accurate facts, shareable resources, culturally relevant material, and a way to point others 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 experience exposed sections of the campaign. The new structure needed to expose useful decisions. I reorganized the site around immediate help, facts, signs and risks, naloxone, treatment and recovery, personal stories, and resources, then connected those paths instead of forcing visitors back through the homepage.
01
Is someone in immediate danger?
Keep the emergency instruction visible before any campaign message or educational content.
02
What am I trying to understand?
Use direct paths for facts, signs, risks, fentanyl, overdose, and changing drug conditions.
03
Do I need naloxone?
Explain what it is, how it works, and where to find it without making people search several pages.
04
Where can I find support?
Connect treatment, recovery, helping others, and local resources to a visible next move.
05
What can I share?
Make stories, facts, videos, and community resources easy to understand and pass along.
Principles that drove the transformation
The rules were deliberately simple. They gave the team a way to judge every page, section, label, and call to action against the conditions in which people would actually use the site.
Lead with the immediate action
Emergency guidance, naloxone, and help could not compete with a campaign introduction. The first screen needed to answer the highest-risk question first.
Use plain language to route people
Labels described the question or action in the visitor’s words. More clinical detail remained available after someone knew which path to take.
Design for the phone first
With 83.8% of the audience on mobile, section order, tap targets, reading length, menus, forms, maps, and CTA placement were product decisions, not responsive cleanup.
Create repetition without clutter
Important actions appeared again when the surrounding content created new intent. The system repeated the route, not the entire message.
The site presented a campaign.
- The scope no longer matched the changing opioid crisis.
- Important content was divided into visual tiles and dense sections without a clear priority.
- People had to infer where help, naloxone, facts, stories, and treatment lived.
- Long desktop pages carried too much structure into mobile.
- Calls to action competed with education instead of emerging from it.
The site presented the next useful choice.
- Emergency guidance and help remained visible across the experience.
- Task-based navigation grouped facts, risks, resources, stories, treatment, and naloxone.
- Audience pathways helped people recognize the route that fit their situation.
- Mobile content was reordered around scanning, comprehension, and touch.
- Calls to action were placed beside the information that created the need to act.
A transformation beneath the visual change
The redesign did not simply modernize the campaign. It changed the site from a collection of messages into a set of connected public-health paths.
Previous site
Redesigned site
I kept the campaign recognizable while changing the hierarchy, content order, navigation, audience routes, mobile behavior, and relationship between information and action.
03 Build
The UX stayed connected from research to production.
I did not hand off a visual direction and hope the live site kept the logic. I carried the work through wireframes, interface design, content structure, WordPress development, responsive behavior, accessibility, SEO, analytics, and QA so the decisions survived implementation.
01
Read the behavior
Analytics, heatmaps, traffic sources, device use, and stakeholder input established where the current experience was helping and where it was hiding the next move.
02
Reframe the content
I grouped content around urgent questions, common risks, naloxone, treatment, recovery, stories, audiences, and resources instead of preserving the old campaign structure.
03
Wireframe the first moves
Low-fidelity flows established the emergency layer, hero message, primary paths, audience choices, supporting proof, and repeated actions before visual styling.
04
Design a usable campaign system
The interface balanced urgency and hope with high contrast, readable type, reusable cards, strong buttons, human imagery, and consistent content patterns.
05
Build it in WordPress
I translated the system into responsive HTML, CSS, JavaScript, and WordPress components, including resource paths, the naloxone finder experience, forms, and editorial patterns.
06
Measure and refine
I reviewed post-launch traffic, mobile use, page engagement, scroll behavior, CTA activity, forms, and search growth to identify where the redesign was working and what still needed attention.
Representative reconstruction
The wireframe was a sequence of decisions.
I rebuilt the original planning logic in the same visual wireframe system used across these case studies. It shows the decisions that mattered: emergency guidance first, one clear primary 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 experience needed to remain consistent as new drug information, campaign content, stories, resources, and public-health priorities changed. I built patterns that gave editors room to work without rebuilding the hierarchy every time.
Task-based navigation
Facts, signs, risks, naloxone, treatment, resources, and stories used direct labels and predictable page relationships.
Persistent emergency layer
Overdose guidance and access to help stayed visible without allowing the alert treatment to overwhelm every other page.
Reusable content patterns
Audience cards, resource groups, stories, educational modules, warnings, videos, and CTAs used shared rules instead of one-off page layouts.
Editor-safe WordPress build
The CMS supported updates to fast-changing content while preserving spacing, hierarchy, accessibility, and responsive behavior.
SEO, speed, and accessibility
Semantic headings, readable contrast, mobile performance, metadata, crawlable resource pages, keyboard support, and alt text were built into the system.
Measurement and QA
Tracking, heatmaps, responsive testing, forms, maps, CTA paths, scroll behavior, and post-launch analytics made the redesign inspectable.
Design into code
The build was part of the public-health experience.
Because I designed and developed the interface, I could protect the urgency, reading order, tap behavior, and content relationships while solving the implementation details that often weaken a redesign after 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 experience had to work in short reading windows and stressful moments. I simplified the header, increased tap space, shortened openings, moved urgent routes forward, stacked audience choices clearly, and kept calls to action near the content that explained them.
- Emergency guidance stayed visible and readable
- Navigation centered the highest-value routes
- Sections were reordered for scanning and touch
- Resource cards and forms worked without desktop assumptions
- Headings and copy were shaped 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 hierarchy, not to decorate the presentation. The heatmap showed concentrated attention around the emergency strip, navigation, search, and “Get Help Now,” followed by strong interaction with the first set of content choices. Scroll depth thinned as the page moved into longer sections, which reinforced the need to place high-priority routes earlier and repeat them with context.
The utility layer mattered
Emergency guidance, search, navigation, and the help action drew attention before deeper campaign content.
People used category paths
The first clear content choices created more useful movement than a long introductory message alone.
Priority could not wait
Important resources placed too far down the page could not depend on every visitor reaching them.
Repeat the route, not the noise
High-value actions returned after relevant education so people could act when the content created readiness.
Behavior turned the redesign into a testable system
The heatmap helped separate visual preference from observed behavior. It showed which utility controls earned attention and where the information hierarchy needed to carry more of the work.
I used these patterns to strengthen first-screen choices, maintain the urgent action layer, place resource routes earlier, and judge where repeated CTAs were useful instead of redundant.
A public-health page can be accurate and still fail if the person cannot recognize the next move quickly enough.
The design had to reduce the distance between concern and action without stripping away the facts people needed to trust that action.
What I carried into iteration
These were not one-time launch fixes. They became working rules for evaluating new pages, campaigns, drug information, stories, and resource updates as the site continued to grow.
01
Protect the urgent layer
Emergency instructions and help actions remain visible, readable, and distinct from campaign messaging.
02
Measure completed movement
Page views matter less than whether people reach naloxone, treatment, forms, maps, and the resources that answer the original question.
03
Keep mobile content intentional
New desktop sections do not automatically earn the same order or length on a phone.
04
Use search growth as a content signal
Growing entry pages show which questions people are bringing from outside the site and where clearer related paths can help them continue.
05 Results
The redesign helped a statewide resource reach far more people with clearer paths.
The result was not caused by one screen or one channel. UX, mobile usability, SEO, content, social and cross-network campaigns, stronger resource pages, and clearer calls to action worked together. The project metrics showed large audience growth, a heavily mobile user base, deeper use of priority content, and more movement toward recovery-related actions.
+2,681.65%
Reported user growthAudience
The campaign and redesigned experience reached a dramatically larger audience during the measured period.
7,621
New usersAcquisition
Optimized social and cross-network efforts brought thousands of new people into the public-health resource.
83.8%
Mobile usersDevice reality
The audience confirmed why mobile order, speed, tap behavior, and short reading windows had to lead the design.
+240.79%
Resource page viewsOpioid Addiction Resources
One of the highest-priority information paths saw a substantial 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 gained visibility, mobile visitors received an experience designed for how they actually arrived, deeper sections earned more engagement, and refined actions such as “Get Help Now” supported more form activity on recovery-related content.
EarlierHelp, naloxone, and resource choices appeared closer to the first question.
DeeperStrategic content placement supported more exploration of priority sections.
ClearerCalls to action connected information to a visible next step.
Performance figures are based on the analytics summary supplied for this case study. They reflect the measured redesign and campaign period and should be read as directional outcomes, not a controlled experiment isolating one design change.
What the results told me
The metrics supported the main design choices while also keeping the interpretation honest. A public-health website grows through the interaction of content, search, campaigns, mobile usability, and the clarity of the action once someone arrives.
01
Mobile-first was the correct starting point
The device mix made it clear that the mobile hierarchy was the primary experience, not a secondary adaptation.
02
Priority content became easier to reach
The lift on opioid resource content showed that navigation, search entry, campaign traffic, and page hierarchy were bringing people into more useful information.
03
Reach and UX had to work together
Campaign growth would have been wasted if the landing experience 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 keep evaluating new content and changing public-health needs after launch.
Clearer urgent paths
People could recognize emergency guidance, help, naloxone, treatment, and resources without decoding the campaign structure.
A true mobile experience
The site was designed around the device most people used, with clearer order, stronger tap behavior, and less friction.
More useful reach
SEO, campaigns, content, and UX worked together to bring a larger audience into priority public-health information.
A measurable foundation
Heatmaps, analytics, forms, CTA tracking, and page behavior gave the team a clearer basis for future changes.
My contribution
What I actually did on Know the Dangers
This was a full UX, content, interface, development, search, and measurement project. I connected the research and public-health goals to the live experience instead of treating each phase as a separate handoff.
Stakeholder conversations and requirements
UX analysis and stakeholder presentation
Analytics, traffic paths, device review, and heatmaps
Content inventory, SEO audit, and search planning
Information architecture 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 finished experience connected urgent guidance, opioid education, naloxone, treatment, recovery, stories, and community resources inside a mobile-first system that could keep changing with the crisis. That meant more than a new visual design. It meant tying stakeholder needs, analytics, heatmaps, information architecture, writing, SEO, front-end development, accessibility, and post-launch measurement to the same question: what does this person need now?