SAFE Project
Redesigning the digital presence of the Annenberg estate to bridge the gap between historical prestige and modern usability, significantly reducing support volume through intuitive navigation and visual booking.
The brief 🔎
Prompt
SAFE Project is a national leader in addressing the addiction epidemic through evidence-based programs. Their existing website struggled with "legacy cruft"—outdated components and a cluttered structure that made it difficult for users to find life-saving resources. My objective was to modernize the visual identity and create a flexible, component-based design system that could organize vast amounts of information without overwhelming the visitor.
Design Process
I led the Website Design phase of this end-to-end project, which followed a structured path from discovery to launch.
Target Users
- The SAFE Project serves a diverse national audience, ranging from individuals in crisis to professional partners. The redesign focuses on high-contrast accessibility and a clear information hierarchy to ensure users find support regardless of their technical device or emotional state.
The Hesitant Seeker: Individuals struggling with substance use who need immediate, private, and judgment-free access to treatment options and emergency support.The Informed Parent: Concerned family members seeking educational resources, prevention tools, and relatable stories to help navigate the addiction epidemic.The Professional Partner: Fellow NGOs and community leaders who coordinate with SAFE's lines of operation to share evidence-based training and program data.
Research Methods
How Might We Questions
- To translate the research and personas into actionable design goals, I focused on these How Might We (HMW) statements. These served as the guiding principles for the visual and structural decisions made during the redesign.
- HMW restructure the information architecture so that individuals in crisis (like Alex) can access the "Get Help" helpline within a single click from any page?
- HMW transform text-heavy pages into a balanced, component-based system that is easy for parents (like Elena) to read and navigate?
- HMW improve visual representation so that diverse users see themselves reflected in the imagery and feel a sense of belonging?
- HMW optimize internal page headers and navigation to reduce "wasted space," allowing professional partners (like Marcus) to find program data quickly?
- HMW design a robust, filter-based search experience that accounts for variations in terminology and provides immediate, relevant results?
research 🔬
Background Research
The team audited the current site and discovered "legacy cruft"—obsolete design components that limited engagement. We analyzed how peer organizations handled sensitive topics to find a balance between seriousness and hope.
Research Goals
- Organize "SO MUCH STUFF" into a standardized, scannable format.
- Improve search functionality to move beyond exact-word matching.
- Ensure the site reflects a diverse audience to avoid alienating specific demographics.
User Personas
- I used research data to create user personas for our ideal users, capturing their characteristics, preferences, and needs. These personas inform our product development and design strategies.
User Research Insights
Problem Statement
The SAFE Project website fails to effectively deliver life-saving resources because its outdated, text-heavy design creates a high cognitive load and lacks the inclusive visual representation necessary to reach all communities impacted by addiction.
final design 👩🏼🎨
Design Decision
The visual strategy was built to align with SAFE Projects’ mission of taking meaningful action through evidence-based, non-partisan programs. The goal was to shift the digital identity from a text-heavy, outdated resource hub to a vibrant, modern platform that feels both professional and welcoming.
Visual Identity
Prototype
These comparisons highlight the transition from a dated, static interface to a vibrant, high-performance experience. Every section was reimagined to balance the gravity of the mission with modern digital standards.
user testing 🦸
Staff & User Feedback
Success: Staff praised the new standardized portfolio pages, which now clearly note the "audience" for each offering.Improvement: The smaller, more modern hero banners were rated as much more professional than the previous "giant blue boxes."Impact: The addition of a filterable search results page solved the major frustration regarding site navigation and resource discovery.
Keep Reading
More examples of design that drives results.