2025
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
Tools
Figma, Adobe Photoshop
The Problem
Black Girls Smile aims to provide meaningful, accessible support for black girls and young women navigating their mental health journey. However, the current platform lacks personalization, which makes it difficult for users to find relevant, emotionally resonant resources when they need them most.
Additionally, the website’s backend is time-consuming to manage, limiting the organization’s ability to update content quickly and scale their digital offerings — ultimately affecting their ability to grow community impact.
1. Empathize
Table of Content
2. Define
3. Ideate
4. UI
5. Validate
Membership
“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.”
Navigation Continue
“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.”
Information Overload
“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.”
1. Empathize
Overview
-
Client Interview
After an initial interview with the cofounder, it has been found that she has already identified some of her goals and possible pain points.
Membership
The client wants to add a membership account for the users to take surveys and add an inventory for their favorite upcoming events and resources
Navigation Continue
There appears to be too many resources to find for users. The client wants the browser to find it easier and less stressful to seek resources.
Information Overload
The client wants to rearrange the order of the browser layout configuration to improve user-friendly navigation.
-
Research Goal
The goal is to validate and disprove insights that was received from the cofounder herself, that way I could understand what will improve her community's impact and eventually reach more black females/users.
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.
-
Affinity Map:
User Persona
With insights gathered from the interviews, I designed two personas to represent our core age groups. These personas helped in understanding the unique qualities, preferences, and behaviors of Black teen girls and young women.
Persona 1
Persona 2
I created this affinity map to organize and group insights from user interviews into common themes. This helped me better understand user pain points like confusion navigating the site, feeling overwhelmed by content, the need for emotional connection and identifying areas to focus on for improving the user experience on the website.
Competitive Market Analysis
-
Methodologies
1. Competitive Market Analysis
2. User Interview
2. Define
Information Architecture
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, the client provides me with their brand style guide which includes various colors, two typography, and many icons. I selected the 4 warm colors and one primary font to match the feeling and flow on what BGS represents. With these elements I was able to create the UI components like primary and secondary buttons, including the behavior they show in different states.
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.