ToRide
BlackGirlsCode
A Case Study
BlackGirlsCode is an organization that funds STEM programs for children in underprivileged areas.
Our goal was to improve the website's trustworthiness by being transparent regarding their donations.
Opportunity Statement
In the current COVID era, protesting in-person can be a dangerous affair. Many people look to support Black Lives Matter remotely from the safety of their homes.
BlackGirlsCode’s users need more reinforcement regarding where the money is going within the organization because they want to be certain her contributions are helping the black community.
Tools
Figma
Miro
Sketch
Zeplin
Methodology
Screener Survey
User Interviews
Usability Tests
Affinity Map
Persona
Journey Map
Rapid Prototypes
Wireframes
Prototypes
Overview
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”. In order to expose more girls of color to the world of technology, they host hackathons, summer camps, and other events, which cost money to host or participate in.
Duration
2 week sprint
UX Team
Jordan Kolb
James Lim
Gillian Weitz
Screener Survey
We wanted to interview 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.
Insights From User Interviews
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 its worth donating to.
People who want to support the Black Lives Matter movement remotely whether it be because they are immunocompromised or too nervous to get directly get involved with protesting. BLM was the catalyst that encouraged 4 out of 5 of our interviewees to donate to a nonprofit.
Due to COVID, a lot of people didn’t feel comfortable with 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 individual people.
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 the money is being used.”
Journey Map
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.
• COMMUNICATION- 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 to social media, completing the cycle.
Problem Statement
Diana needs reinforcement regarding where the money is going in Black Girls Code because she wants to be certain her contributions are helping the black community.
How might we increase Black Girls Code’s legitimacy without needing to leave the site to search externally?
Existing Site Usability Test
Our usability test's first task was to ask users where they would expect to find information regarding where the donations go. The existing website does not have this information so we gave users this task to see where they would go to find it. Users also complained about the existing site's readability and length of paragraphs in the What We Do page.
Mid-Fi Wireframes
The changes we would make to the mid and hi-fidelity prototypes were primarily navigation-based, as well as focusing heavily on improving the readability.
The light grey on dark grey background makes the text hard to read. We used clearly labeled bullet points that summarize the important highlighted info from the original's many long paragraphs.
We created a new screen that takes information from two other outdated pages: the blog and partners pages. Now users can see how much money went into each event. It also further encourages them to donate so they too can make an event like the ones listed happen. We also moved the Donate button to be present in the header on all screens.
Mid-Fi Usability Test Results
The biggest issue with our mid-fi usability test was users not knowing where to access the new Donation Info page we created. What we found was that some users thought the Donation Info navigation item would lead to the same link that the Donate button would. 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.
Hi-Fi Mockups
Hi-Fi Usability Test Results
The navigation and readability are improved! Users were able to properly find the new pages and parse through the information on the What We Do page much faster than they were able to on the original site.
In Summary
The user interviews we conducted revealed that the biggest problem users had with the BlackGirlsCode website was with 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 very narrow-minded scope. I learned that more pronounced layout changes, which still focus on improving readability and navigation, would make for a better redesign to the site.
ToRide