Black Girls Code Redesign| Case Study
Black Girls Code is a nationwide nonprofit that empowers girls of color to become leaders of innovation in STEM fields, and helps them build their future through computer science and technology.
Overall Concept
The concept of this project is to redesign the nonprofit Black Girls Code with the goal of increasing the number of visitors and donations to the site. Through our user research, ideation, and prototyping we will create a responsive web design that will meet these goals while maintaining a visually appealing layout.
The Motivation of our User
Through our research we’ve learned that visitors and members of Black Girls Code are more motivated to donate when you allow them to decide their donation destination. This intrinsic motivation will ultimately help bring STEM programs to young girls of color, and help them become leaders in the tech industry.
The Problem
Nonprofits are excellent ways to bring attention to and raise funds for important issues, especially ones that improve the lives of children, but many nonprofits fail to show what your donations are specifically being allocated towards.
The Solution
In this redesign of Black girls code, we will provide an easy to use feature that allows the user to select specifically what their donation will be allocated towards, which will in turn increase the foot traffic and number of donations that the site receives.
User Insight Statement
“Nikole, who is caring and compassionate, is looking for a nonprofit that gives back to the black community while allowing her to choose her donation allocation, because she wants to know that her donation is being used for its intended purpose.”
Research Plan
Objective: The objective of this test is to determine if there are any pain points that would prevent users from donating to Black Girls Code.
Methodology
Interviews: Based on our proto-persona Nikole, we were able to determine the natural paths that she would take while visiting the site. We used this information to draft up 3 tasks that we asked our users to to complete in order to determine which specific features would cause a user to either donate, or completely leave the site.
Surveys: The second half of our research plan included a 10 question survey that we sent out via Facebook, instagram, and email to 14 randomly selected users. Each user matched the characteristics of our user persona. In this survey, we learned that
“There are still divides between races. There has yet to even be a black man or woman to win the Nobel Prize awarded for science besides the one for economics. Education is key to intellectual proliferation.”
Key User Insights
- If the user knew what they were specifically donating to, they would be more likely to donate and at a larger amount.
- Receiving confirmation once a donation has successfully gone through.
- Users prefer to stay on a company’s site, but if they are taken to a 3rd party site, they want to be notified.
- Users want consistency when it comes to UI components
- Consolidation of information to minimize the number of webpages.
Heuristic Evaluation
We performed a heuristic evaluation to determine the overall usability of the BGC organization’s current website design. From this we were able to make several determinations for the existing site:
- The site lacked consistency with it’s page links, spacing, and buttons.
- The search functionality of the site lacked responsiveness
- The amount of text information on the site was overwhelming.
- The site could be enhanced further by updating it’s overall design to increase responsiveness and create a more concise/minimal look and feel.
Competitor Analysis
— While non-profits may not have “competitors” within their environment, we were able to gain valuable insights from performing a competitor analysis on the websites of other non-profit organizations:
- We were able to see how other organizations digitally interact with their community and potential donors
- We were able to to identify how they communicate their position and vision to persuade consumers to support their programs
- It gave us valuable insight into how to structure our information to better define the organization’s brand and purpose
- It showed us some key “Do Nots” so that we could avoid any similar pitfalls in our design
Card Sorting
Card Sorting — To further help us improve the usability of BGC’s site, we performed card sorting as part of our method to redesign their navigation. We found that the structure for their navigation was already pretty concise, so the overall design was left broadly unchanged. However, we identified items that made more sense to be consolidated with others, removed items that only added clutter to the navigation menu, and renamed items to be more attractive to consumers.
Site map — From our card sorting, we created a new site map that we then used as a template for our navigation redesign. It provided a more concise structure for the site’s information and made items in the navigation menu more attractive to consumers to encourage use of those pages.
Wireframes
From our research, we were able to identify several key insights that we wanted to then translate into features for our redesign. Namely:
- simplifying the design to remove any cumbersome/overwhelming information
- Transparency for donors on how their donations are used
- A focus on donations for the organization to increase the amount of support for BGC
- A simplified donation workflow to again increase and encourage support for BGC
- And a map feature to help create additional community awareness and engagement for BGC campaigns and programs
Design/Style Guide
Added Features
This feature will let the user take control of their donation and pick where the donation is contributed to. Our hypothesis is that users will give multiple donations over time if they know where the donation is specifically being used.
The STEM map feature is an interactive horizontally & vertically scrolling map that allows users to find schools and events in specific regions that are participating in STEM programs for the youth. As as well as finding careers for STEM fields in their area.
Testing/Iterations
Testing/Iterations
We used 4 differed components for our A/B tests
“For number 2, it is so much easier to read white on black text. My eyes can easily navigate around the page and don’t get strained like with the pink text.”
Prototypes
Try our Desktop, Tablet, and Mobile Prototypes
Opportunities and Next Steps
- Connect with BGC team: We initially tried to get in contact with someone within the BGC organization, however we were unable to. So, we would like to speak with a representative to get a more detailed understanding of the organization’s vision and the direction they plan on taking that vision.
- Research on repeat donations due to the donation destination feature.
- Redesign of Partnership Requests through website: We want to take a closer look at how the organization currently goes about obtaining partnerships with other companies. We want to provide a better way for BGC to show off their current partnerships and create an enhanced digital medium to attract more companies to partner with their organization.
