Methodologies
Screener survey | User interviews | Contextual inquiry | Affinity mapping | User persona | Journey mapping | Design studio | Rapid prototyping | Wireframing | Usability testing
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. Our goal was to improve the website's trustworthiness by being transparent regarding their donations.
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. Our goal was to improve the website's trustworthiness by being transparent regarding their donations.
Methodologies
Screener survey | User interviews | Contextual inquiry | Affinity mapping | User persona | Journey mapping | Design studio | Rapid prototyping | Wireframing | Usability testing
Black Girls Code
Duration
2 week sprint
Role
UX Designer
Tools
Figma
Sketch
Miro
Zeplin
InVision Studio
Microsoft Powerpoint
Team
Jordan Kolb
James Lim
Gillian Weitz
Research
We started the research process by creating a screener survey to find ideal individuals to interview. 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.
Showing Support While Separated
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 its 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 individual people.
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.
When You Can’t Donate Time...
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 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?
Design
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!
Mid-Fi Wireframes & Usability Testing
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.
The biggest issue with our mid-fi usability test was users not knowing where to access the new Donation Info page we created. 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.
Hi-Fi Wireframes & Usability Testing
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 changed the color of the “CODE” in the logo to 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.
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
We added a much clearer looking mailing list box and “follow us” social media icons to streamline the bottom part of the front page.
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 bombared 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 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 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.
Conclusion
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 extremely focused 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.
As is, I believe the changes we made accurately reflect our synthesized research.
Read other case studies!
SeeCurrents
