Offering Hope, Support and Empowerment.

Responsive web design for HeadsUp, a Philadelphia mental health nonprofit

Quick Overview

The Background

First Episode Psychosis (FEP) affects about 100,000 adolescents and young adults in the U.S. each year. Yet, due to rampant misconceptions and stigmas around this condition, too many individuals go un- or under treated. A group of doctors, specialists, and advocates approached us to help them design and launch a new brand dedicated to improving awareness and overturning stigmas around FEP in Pennsylvania. After months of researching, conceptualizing, designing, and building, HeadsUp was born—a new beacon of hope for those struggling with their mental health.


Learn it

We completed a robust project discovery to learn about psychosis, those affected by it, and the best way to encourage individuals to get help.

Build it

We crafted a new brand from the ground up, including a new name, mission, vision, values, tagline, logo, and exclusive custom illustrations.

Launch it

We designed and built a website to serve as a digital home for the new brand, becoming a vehicle to grow HeadsUp’s notable mission.


Building a Mental Health Brand Strategy

Our culture has made great strides toward understanding mental health, but there is still much to do. We were tasked with creating a brand to challenge common misconceptions about psychosis while simultaneously raising awareness. It was a substantial challenge, but a worthy one: the research we conducted and the resulting brand strategy mean that more people will get the help they need.

Uncovering the Truth Through the Stigma of Psychosis

We conducted interviews, ran surveys, analyzed search trends, performed secondary research, and had conversations with those who’ve experienced FEP.

Each bit of new information chipped away at the layer of stigma surrounding psychosis to reveal its reality. Just as you shouldn’t build a house on a shaky foundation, you shouldn’t build a brand on anything other than the truth.

Who is Generation Z?

First Episode Psychosis most often occurs in young people ages 15-30. The majority of this demographic is commonly known as Gen Z. The success of this brand depended so much on its ability to resonate with this audience, so we carved out ample space in our discovery to get close to this unique generation. What did our brand research reveal? These were our big takeaways:

A Brand New Name for a New Beginning

A brand whose mission is to create a rising tide for mental wellness deserves an equally bright and positive name. The original project name was long and, as our research uncovered, carried connotations of addiction rehab. “HeadsUp” gestures to our focus on mental health, commands the audiences’ attention, and encourages a positive outlook, creating the ideal foundation for this brand and its mission to soar.


A New Brand Identity

The brand identity we built for HeadsUp is a written and visual representation of hope for anyone affected by psychosis. Rooted in the comprehensive research we performed at the outset of the project, this new brand leans towards optimism, encourages change, and always remembers the humanity through the diagnosis. This rising tide lifts all boats.

A Symbol of Hope and Mental Health

The logo we designed for HeadsUp highlights the role of conversation and open communication on mental health. The mark has a simple, modern design that can be adapted to multiple situations without losing its conceptual integrity. Positive dialogue starts here.

HeadsUp’s mission is not only to connect people with appropriate, evidence-based care, but to extinguish the stigma around mental health overall. Their impact begins and ends with a positive message: both a better life and a more understanding world are possible.

Branding and print design for HeadsUp, a nonprofit mental health center
Nonprofit logo design shown on tote bag

Typography & Color

Bright, bold, creative, optimistic, professional: five adjectives that underpinned our choices of fonts and colors for the HeadsUp brand.
Brand color palette for HeadsUp, a Pennsylvania based mental health center

Brand typography

The workhorse – used as
a bold primary headline

Brand typography

Used sparingly for high-impact,
branded messaging

Brand typography

A friendly typeface for paragraphs
and long-form content

Custom Illustrations for HeadsUp, a Pennsylvania nonprofit organization
Custom illustration design for a Philadelphia nonprofit

Helping People Through Sound UX Strategy

HeadsUp’s mission includes connecting a variety of different audiences with different resources, education, and tools. Designing a website that works for all of these distinct groups starts with a foundational UX strategy that considers users’ goals and pain points.

Mapping out Each User’s Journey

A little empathy goes a long way when creating an effective user experience. We worked closely with HeadsUp to document each audience’s specific journey through the site, ensuring they can quickly access the content they need without unnecessary roadblocks.

The Simple Sitemap is Often the Smartest Sitemap

With so many diverse website goals, we approached the site architecture understanding that any unnecessary convolution could spell quick failure for our visitors.


Designing the Web Experience

The brand we built for HeadsUp became the foundation from which we designed the accompanying website. The visual direction of the new web design is fun and optimistic without obstructing HeadsUp’s mission of connecting more individuals with the resources they need on psychosis, while dismantling harmful stigmas in the process.

Responsive web design for HeadsUp, a mental health nonprofit in Philadelphia

Making Psychosis Easy to Understand

Working closely with the HeadsUp team and our video partner, we provided creative direction and illustration assets for a short animated video aimed at helping individuals who’ve experienced psychosis and the people around them understand what it is, and why it’s important to get help early.

HeadsUp – What is Psychosis?

A Strategic Web Development Process

Some websites are all about flash, motion, and surprise. Others are purely functional, barebones exercises in web development. HeadsUp’s website balances the best of both worlds. We developed this site so that it felt modern without overwhelming visitors with potentially alarming animation. As such, we were able to build a new site that is accessible to all without having to sacrifice a high standard of design.

Optimism and Creativity on Display

After learning of the program participants’ incredible creativity, we built a custom artwork gallery to showcase their work on the website, becoming a testament to hope even in the midst of a difficult and confusing experience.

Achieving ADA Compliance in Style

Though a worthy thing to strive for, ADA compliance can sometimes hamstring a web design due to added visual restrictions and guidelines. Not here. By building the brand from the beginning with accessibility in mind, we were able to create a site that is both stunning and Double-A ADA compliant.


Strength in Numbers

Overall the new website has been well received by the mental health community, collaborators across the country, and program participants.

Mobile Results for HeadsUp Nonprofit
3 minutes
is the average visitors spend on the “For Me” page
Visitors spend over 3 minutes on the “For Me” page that is targeted towards young people experiencing psychosis first-hand. 
of traffic visits the web pages and digital resources for clinicians
The web pages and digital resources for clinicians have a very low bounce rate and represent 50% of site traffic.
3 minutes
is the average visitors spend on “Find a Center” page
“Find a Center” is the 3rd most trafficked page and is performing well with average visitors spending over 3 minutes engaging with this content. 

More Like This

Logo Design // Illustration // Print Design // Website Design // Website Development

Push10 Arrow

UX Strategy // Web Design & Development // Illustration

Push10 Arrow