Creating an interactive hub to drive crisis prevention awareness and education
Industry: Nonprofit
Duration: 9 months
Role: Lead Designer
Impact: Creating a new impact page transformed how the nonprofit communicates its reach, making it easier for users to engage with crisis and suicide prevention efforts. By providing quick and intuitive access to essential information, the site enhances awareness nationwide, helping users feel seen, equipped, and supported.
Activities
Heuristic evaluation
Discovery research (21 interviews)
Insight report and persona creation
Ideation, co-creation, and prioritization workshops
User testing (4 rounds)
Low and high-fidelity mockups and prototypes
Design System creation
Project background
A national nonprofit focused on crisis prevention needed a way to present its impact holistically. Despite offering multiple crisis intervention services, its contributions were fragmented by service and region, limiting awareness of its full reach.
To address this, we created an interactive impact page that serves as a central hub, combining data and personal stories to educate the public, inspire advocacy, and support volunteer efforts.
My Role and Responsibilities
As the lead designer, I was involved in every stage of the design process—from research and ideation to prototyping and user testing—while leading key deliverables and owning core features of the experience. I collaborated closely with another designer, strategists, the data team, and the development team, ensuring alignment across disciplines. Together, we enabled a strong three-legged stool—Engineering, Data, and Design—creating a stable foundation for collaborative decision-making and impactful outcomes.
Process and Approach
Our approach followed four key phases—Discover, Strategize, Design/Data/Develop, and Share—ensuring a user-centered, data-driven impact page.
Discover – Research & Insights
We conducted stakeholder and key audience interviews, used design stimulus and data sorting activities, and synthesized insights into personas and key themes to guide our direction.
Strategize – Defining the Vision
Through vision-setting and prioritization workshops, we aligned on the impact page’s goals, data visualizations, and storytelling approach, creating a clear roadmap.
Design, Data & Development – Iterative Execution
We designed key data visuals, integrated real 988 user stories, conducted four rounds of usability testing, and refined the experience through regular stakeholder demos.
Share – Launch & Engagement
To drive impact, we collaborated on marketing strategies, launch planning, and tracking tools, ensuring a cohesive rollout through weekly cross-functional alignment.
Challenges and Solutions
Challenges:
Siloed Data and Stories – The nonprofit’s impact was fragmented across services and regions, limiting a holistic understanding.
Balancing Data and Human Connection – Too much focus on data risked making the page feel impersonal, while too many stories could dilute credibility.
Ensuring Accessibility and Usability – Crisis and suicide prevention data is complex, making it difficult for diverse audiences to interpret and navigate.
Cross-Functional Alignment – Engineering, data, and design teams needed to collaborate effectively while managing evolving stakeholder expectations.
Solutions:
Unified Storytelling & Data Integration – We designed an interactive impact page that seamlessly combines data visualizations and real user stories to present a comprehensive view.
Strategic Balance of Data and Narrative – Through thoughtful content design, we ensured users engage with both hard facts and personal experiences, making the page both informative and emotionally compelling.
User-Centered Design & Testing – Four rounds of usability testing helped refine accessibility, navigation, and content clarity, ensuring an intuitive experience for all audiences.
Cross-Functional Collaboration – A three-legged approach (Engineering + Data + Design) with regular demos and workshops fostered alignment and allowed for agile decision-making.
Impact and Results
Creating a new impact page transformed how the nonprofit communicates its reach, making it easier for users to engage with crisis and suicide prevention efforts. The page blends data-driven insights with human-centered storytelling, equipping users with knowledge, connection, and action-oriented resources.
Key Outcomes:
Understanding the state of suicide prevention – Interactive maps, timelines, and visualizations provide up-to-date insights on crisis trends.
Engaging with real stories of hope – The page features Help Seeker and Counselor experiences, grounding 988 engagement in optimism and relatability.
Challenging stereotypes and reducing stigma – Demographic insights, diverse narratives, and myth-busting data reinforce the message that “you are not alone.”
Driving advocacy and support – Designed to inspire action, the page encourages users to volunteer, share resources, and support crisis prevention efforts.
By blending compelling storytelling with robust data, the impact page strengthens public understanding, fosters empathy, and provides users with tools to engage meaningfully.
Reflection
This project was a powerful example of how data and storytelling can work together to drive awareness and action in crisis prevention. Our user-centered approach, extensive research, and iterative testing ensured that the impact page truly resonates with audiences.
However, there were missed opportunities as well. Due to internal shifts within the organization, the page was not actively promoted during key awareness moments, such as Mental Health Month/Day, limiting its initial reach. Additionally, as our engagement ended, we were unable to continue into the second phase of development. Some of our designed improvements remain in the backlog, waiting for future implementation.
Despite these challenges, the foundation we built—both in research-driven insights and scalable design—ensures that this work can continue evolving. The impact page is now a central hub for crisis awareness, and its potential for future growth remains strong.
Feedback
“Alaa has been an essential part of our team for the Vibrant Impact Page. Her patience and expertise enabled her to drive the project forward, even with a high-need client requiring extensive coaching. Alaa was crucial in preparing actionable work for our team and consistently stayed ahead of our aggressive pace. She was always available for desk check calls and client-requested page tweaks, ensuring the page met all governance council requirements for language, symbols, and branding.
Alaa demonstrated strong leadership and ownership, helping the client work through available data and stakeholder ideas to build a comprehensive vision for the impact page. Her advice and leadership were crucial to our delivery team's success. Alaa's empathy, understanding, and user journey mapping skills resulted in a cohesive microsite across all tabs. Working with Alaa has been an absolute pleasure, and I have every confidence in her ability to lead customer relationships and coach teams in future projects.”
Bonnie J, Senior solution owner at Slalom
“I am very glad to have had the opportunity to work with Alaa on the Vibrant project. Her designs are excellent and are based on the needs of both the client and the user. An area I saw Alaa excel in was with bringing vision to the client and earning their trust. There were a number of times where the client would say something like, "We don't need to discuss this too much, I'm sure Alaa will come up with something great". She worked closely with the product owner on the Vibrant side and was instrumental in guiding the vision of the product.
From the developers' side, Alaa always made herself available to the devs for clarification or troubleshooting when implementing the designs. She was able to hear the issues and concerns from the developers then make tweaks to design or push back when appropriate. This flexibility allowed the page to be delivered on a tight schedule without comprising the designs too much.”
David S, Architect at Slalom