Say It Out Loud

Build deeper connections through meaningful conversations.

UI Design
Illustration
Motion
Client
National Alliance on MentalIllness (NAMI)
Team
Illustrator - Esther Chen
2D animator - Alex Ledesma
Developer - Boron Studio
Scope
User interface design, user experience design, user testing, development, and launch video.
An illustration featuring the text "Say It Out Loud!" in bright green letters, accompanied by a character shouting while cupping their hands around their mouth. The character stands on a dark blue background with beams of light and question and exclamation marks representing the act of speaking up and expressing oneself.

The goal is to foster meaningful relationships and empower individuals to support both their own mental health and that of their peers.

Challenge:

Addresses the challenge of breaking mental health stigma among young adults by providing an engaging, interactive way to start conversations, explore coping mechanisms, and build self-awareness.

The Result:

Develop a game that aligns with the types of online conversations youth adult are having, offering a platform to start topics that are typically hard to talk about.

Each of our user had played at least 2.28 time of the game.

An illustration of four diverse characters sitting cross-legged in a meditative pose, each with different skin tones but identical clothing—a light hoodie and blue pants—on a green background. They appear calm and centered.
A monochromatic line drawing of a person at a desk, overwhelmed by notifications and messages represented by floating speech bubbles with exclamation marks and symbols. The person appears distressed, resting their head on one hand and raising a finger, surrounded by chaotic lines.
A monochromatic line drawing of a person casually sitting on a bench, looking at their phone. Floating speech bubbles filled with messages and symbols surround them, expressing a sense of overload, with the person looking somewhat concerned.
A line drawing of a person in a hijab, holding a planner in one hand and pointing to a large, floating schedule with stars and circles. The character appears focused and organized, creating a sense of planning and preparation.
An illustration of three characters working together—one using a laptop, another holding a document, and a third raising a hand with a bell. They are surrounded by abstract shapes on a dark background, representing teamwork and collaboration.
A colorful illustration of a character with a sad expression, looking into a hanging mirror. The character has light purple hair and wears a yellow hoodie, conveying an introspective or self-critical mood against a green background.
A vibrant illustration of a character in a wheelchair shouting into a megaphone filled with colorful geometric shapes like triangles and circles. The scene is set against a dark blue background, with exclamation and question marks representing communication and expression.

In designing the game, we made sure the visuals were inclusive, with characters that reflect a wide range of backgrounds and experiences.

We believe that everyone should feel represented and comfortable, so we encourage players to start with the right mindset by following the safe space guide.

A low-fidelity wireframe of the "Say It Out Loud" mobile app, showing different stages of the user journey, from the welcome screen to player options, home screens, informational resources, and game questions. The layout is minimalist, with placeholders for content and icons, illustrating the basic structure of the app before final design elements are applied.
A visual representation of a mobile app flow showcasing multiple screens for the "Say It Out Loud" app. The design features vibrant colors, illustrations of characters engaging in different mental health activities, and various card decks like "Whisper It," "Say It," and "Mix It." The flow shows how users interact with the game, select decks, answer questions about well-being, and receive information on mental health topics.
A dark blue background featuring small, abstract neon yellow shapes arranged in different clusters, representing various pattern designs for exploration and creativity.
A mockup of three smartphones displaying different game decks for a mobile app. The decks are titled "Whisper It," "Say It," and "Mix It," each with unique illustrations of characters engaging with questions and symbols. The background is dark, with neon green and pink highlights for interactive buttons.

The game is structured into levels that gently guide you through different comfort zones. The first level focuses on learning and sharing, setting a foundation for connection.

As you progress, the game encourages more expression, helping you and your peers open up in a supportive environment.

A minimalistic design with the word "SAY" in bold white and green letters, placed on a solid green background. Simple graphic elements like a yellow dash and small circles add visual interest, aligning with a modern and playful style.
A graphic featuring an oversized dark blue ampersand over a repeated "NAMI" logo pattern in green on a beige background. The ampersand includes subtle design elements like zigzag lines, creating a dynamic and layered visual effect.
A graphic displaying the word "LOUD" in bold white text with a black stripe running through the center. The background is beige with green and black minimalist accents, creating a sleek and bold contrast.
The word "TRUTHS" appears in bold, white letters centered on a bright pink background, with a repeating outline version of the text in the background. Confetti-like shapes are scattered throughout, creating a lively, fun visual style.

Ready to start?

Let's dive in together to see how we can bring your ideas to life ✨

Connect Now