2025
BLACK GIRLS SMILE
A redesign of BGS’s website to improve access to mental health resources, promote community engagement, and reflect the brand’s culturally responsive mission. This website provides educational tools, therapy access, and donation support in a space that feels safe, welcoming, and affirming.
Role
UX/UI Design, UX Research, Branding
Project Duration
8 Weeks
THE PROBLEM
The platform lacks personalized features, making it challenging for users to receive tailored support. Additionally, maintaining the existing site is time-intensive, limiting the organization’s ability to efficiently manage content and scale its offerings.
THE APPROACH
1. UX Research
2. Define
3. Ideate
4. UI
5. Validate
1. Ux Research
Conducting Research
To redesign the website for Black Girls Smile (BGS), I first researched popular mental health sites that can relate to teen girls (13-17) and young women (18-25). What I've noticed that they have in common is explaining how their platforms work and including more creative features to express their empowerment.
This user research was conducted to gain a full understanding of the needs, motivations, and challenges of the users served by Black Girls Smile. The objective was to uncover actionable insights that will inform the design of programs, resources, and digital experiences that empower Black girls and young women in their mental health journey. By exploring the perspectives of key user segments, I aimed to identify opportunities for enhanced support, engagement, and community-building.
User Interview
Black Girls Smile focus on black teen girls and young women, so I've interviewed 3 females ranging 12-25 who experienced exploring the site. Each interviewee had their own perspective discussing pain points.
Navigation Continue
​
“When I first got to the site, I didn’t know where to start. It says ‘I’m a Black girl’ or ‘I’m an Advocate,’ but what’s really inside? I just want to know where I can get help for stress and feeling down.”
​
Information Overload
​
“There are so many articles and links. I get that it’s supposed to help, but it’s too much. I just want to know what’s most important for someone like me.”​​​​
Community Engagement ​
​
“It would be great if there was a space where I could actually talk to other women—maybe a forum or support group. Sometimes just talking to someone who gets it makes a big difference.”
Affinity Map:
User Persona
Persona 1
Persona 2
2. Define
Site Map
This site map is structured to provide clear and intuitive navigation for users seeking mental health support, education, and engagement. It is designed with a user-centered approach, ensuring that both new visitors and returning members can quickly find the information they need.
User Flow
I've designed two primary user flows to help direct users' needs. I consider focusing on when black girls and women explore the options for programs that relate to their problems.
1. Enrolling the program
The user flow starts with users exploring support options, including SHE’s Mentally Prepared, Therapy Assistance, and On-Demand Workshops. After selecting a service, they enroll and choose between online or in-person sessions, confirm their choice, and complete the process. This flow ensures easy access to mental health support, with potential enhancements for personalization and navigation.
2. Membership Sign Up/Sign In
This user flow visualizes the journey a user takes to become a member of the Black Girls Smile website, emphasizing simplicity and multiple options for registration.
3. Ideate
Wireframes
Mid-fidelity wireframes were created since the client wanted the same titles and information. I decided to add 6 key frames from the prototype which consider the Home, About, Membership, Providers, Resources and Programs.
4. UI
Branding
After discussing the key frames, I've selected the 4 colors from the brand style guide that the client provide me with, chose Bricolage Grotesque as the font, and
5. Validate
User Testing
Questions that were asked to the users who participated in the interview:
1. Can users easily find the resources they need?
2. Do users understand the language and tone used on the site?
3. Do users feel overwhelmed by the amount of information?
It's revealed that while the site’s warm color palette and clean design create a welcoming atmosphere aligned with its mission, users experienced confusion navigating between similar sections, particularly "Programs" and "Resources." The sign-up process was noted as unclear, especially when choosing between Google sign-up and manual registration, and the membership feed lacked personalized recommendations.
Additionally, while users recognized the brand’s mission, they felt it could be strengthened by featuring more relatable member stories. Prioritizing navigation clarity, streamlining the sign-up process, enhancing personalization, and incorporating real stories can significantly improve the user experience.
Key Takeaways
Challenges
My biggest challenge for this project was creating a website for a nonprofit mental health organization and understanding their approach. Interviewing the client to find pain points was no issue. However, seeing their approach to user needs was complicated, and I would forget that I was working for a nonprofit instead of a marketing company.
-
​
Lesson Learned
​Designing for a mental health nonprofit taught me to balance user empathy with strategic design choices, ensuring the site is both supportive and easy to navigate.
Instead of waiting for client feedback, I recognized the value of proactively researching user needs, such as interviewing target users to uncover pain points directly.
