Black Girls CODE provides classes and summer programs to young people of color who are interested in getting into STEM.
Black Girls CODE is a nonprofit organization looking to “empower girls of color to become innovators in STEM fields, leaders in their communities, and builders of their own futures through exposure to computer science and technology."
BGC hosts hackathons, summer camps, and other events, which cost money to host or participate in. Our goal was to improve the website's trustworthiness by being transparent regarding their donations. This information was not present on the existing site.
User interviews | Contextual inquiry | Affinity mapping | Feature prioritization | Design studio | Rapid prototyping | Wireframing | Usability testing | Responsive designing
We started the research process by creating a screener survey to find ideal individuals to interview. We wanted people who have donated to nonprofit websites, volunteered at nonprofits, and people who have attended technology-themed Hackathons. This ensured we attracted not only people who have nonprofit knowhow, but also people familiar with STEM and STEM-related topics.
Key takeaways after synthesizing our user interview notes:
People are inclined to donate to nonprofits that they find on social media. For some of our interviewees, seeing other people support a nonprofit might be all that they need to decide it's worth donating to.
People end up remotely supporting the Black Lives Matter movement because they are immunocompromised or too nervous to get directly involved with protesting. BLM was the catalyst that encouraged 80% of our interviewees to donate to a nonprofit.
Due to COVID, a lot of people didn't feel comfortable going out and protesting. As a result, people turned their attention to nonprofits due to how quick and easy it is to donate. People also felt that nonprofits were more capable of achieving change than individuals.
Our persona, Diana, is a nurse who desperately wants to get involved with the Black Lives Matter movement, but can’t due to being around coronavirus patients for her job and her busy schedule. She needs to keep working so she donates to organizations she finds through social media instead. She also has a niece who is interested in technology and wants her to succeed despite the lack of diversity in STEM programs.
Two I-Statements from our affinity map would define Diana's needs when it comes to donating to a nonprofit:
"I want to make sure my values are being represented."
"I want to know how my money is being used."
We split our Journey Map into five distinct processes that Diana goes through as she navigates the BlackGirlsCode website:
DISCOVERY- Diana is pleased to discover on social media that there is a nonprofit that directly relates to what she wants to support.
SKEPTICISM- Diana becomes increasingly frustrated with the poor readability of the About Us page, as well as the lack of information directly pertaining to where donations go to. The website poorly communicates its message and transparency.
VALIDATION- Diana ends up leaving the website to look for more information. When she checks the front page of Google, her mood improves upon seeing all the positive press. She decides to head back to the website.
DONATION- Diana conducts the physical act of donating. The donation process itself is fine and not as important to change.
PROLIFERATION- Diana shares it on social media, completing the cycle.
In order to figure out how users interact with the existing site, we conducted a usability test.
We included 3 tasks to gain information on where users would expect to find information about where the organization’s money goes and how to donate.
Users mentioned the readability of certain pages being low. It made scanning for information during the first task an arduous process. Using this information we were able to go forward with re-designing the Black Girls CODE webpage!
We ran a design studio session together and included the stakeholder in these calls for direction. used the data from our previous feature analysis and prioritization to ideate some solutions on paper. These would then become the basis for our mid-fidelity wireframes.
The biggest issue with our mid-fi wireframes was users not knowing where to access the new Donation Info page. Two users thought the “Donation Info” navigation item would lead to the same link that the Donate button would and ignored it. By renaming the page to “Where Donations Go” or something similar, users would understand immediately what the page was for and what information they would find on it.
We used Photoshop to redo the logo and change the color of the “CODE” in match the pink used on the rest of the site. The original site used 4 different shades of pink. We use only 2 shares of pink.
We added a quick intro to the website to give new visitors a quick bite-sized summary of what the organization is about.
The bolded text is now pink to give the page some color and attract the user’s attention.
The original website uses a non-ADA-compliant grey-on-black text that makes it extremely difficult to read without straining the eyes. We changed this to a solid white color.
We added a much clearer looking mailing list box and “follow us” social media icons to streamline the bottom part of the front page.
The title was originally in all-caps. We changed it to lower-case to match the rest of the site, which never uses all-caps.
The original size of the text here was way too large. We shrunk it down to fit the general text size of the rest of the page.
We added quotes to humanize the page a bit. Your money can help make another child’s experience more fun.
We added a donate button on the bottom of the page because our Diana, our persona, would have donated immediately after reading about where the donated money goes.
We added a section for simple bullet points so that the reader can quickly see what Black Girls Code is about without needing to skim the paragraphs for info.
We also added a section that summarizes the goal, or mission, of Black Girls Code. We wanted to make sure both of these were on screen before the paragraphs so the user isn’t being immediately bombarded by paragraphs of text.
We used Montserrat font to break up the monotony of the text on the website. The original site only used Roboto for all text.
We also increased the brightness of the text to increase readability.
Alternating paragraphs with pictures makes reading through the paragraphs less of a chore and balances out the page a bit better. We also bolded important text in pink so that a user who is skimming the article can find the most pertinent information easily.
The new donation page now takes place within the site as opposed to taking the user to an external one. Users did not trust the disconnect between the Black Girls CODE website's aesthetic and the donation service.
We wanted to keep Black Girls CODE's mission statement in full view while a user goes through the donation process.
Using an API would allow users to donate to Black Girls CODE without ever needing to leave the site and incurring that initial sense of distrust.
The navigation and readability are improved! Users were able to properly find the new pages and parse through the info on the What We Do page much faster than they were able to on the original site.
This was completed back in 2020 as unsolicited volunteer work for Black Girls CODE. I used to work as a STEM Instructor for underprivileged youth, so their mission statement aligned with my own views.
After we finished our two-week sprint, I reached out to the founders of Black Girls CODE and sent them a compiled document of our research and revised high-fidelity wireframes. They responded back thanking us for our support and willingness to look through the site.
The new 2023 website (which looks amazing by the way) addresses the concerns that our testers had! Now the Donate page explicitly mentions what donations are used for in a way that greatly encourages site visitors to contribute. The mission statement is included on top. They even included the donation API in the site itself instead of taking the user to an external page!
The user interviews we conducted revealed that the biggest problem users had with the Black Girls CODE website was its readability and lack of pertinent information regarding donations. We combined two pages on the original site, the Blog and Partners pages, into a new "Where Your Money Goes" page that shows the name, description, and funding of past BGC events. We also improved readability by changing the text font and color. Our focus on improving ONLY the issues that came up in research made our improvements extremely focused in scope. I learned that more pronounced layout changes, which still focus on improving readability and navigation, would make for a better redesign of the site.
As is, I believe the changes we made accurately reflect our synthesized research.
