Black Girls CODE

UX + UI DESIGN | RESPONSIVE WEBSITE REDESIGN

TIMELINE

2 weeks

THE TEAM

MY ROLE

TOOLS

Jordan Kolb

James Lim

Gillian Weitz

UX Designer

UX Researcher

Miro

Sketch

Figma

Google Slides

Zeplin

THE PROBLEM

In this project, my teammates and I were tasked with redesigning a responsive website for Black Girls Code. Upon examining the website, our team had immediately noticed quite a few imperfections.

Our goal for this project was to help improve the websites legitimacy by making it clear to donators how Black Girls CODE uses the donations they receive. Taking note of this issues and some others, we started our journey to help improve the website for Black Girls CODE.

Overview

Black Girls CODE is a non profit organization that aims to increase the number of women of color in the digital space by empowering girls of color ages 7–17 to become innovators in STEM fields through exposure to computer science and technology.

The non profit organization hosts regular events like panel discussions, hackathons, and summer camps which rely on contributions and donations to help kick off these events.

THE DISCOVERY

In the current Covid-19 era, protesting in-person can lead to dangerous consequences. Many people look to support the Black Lives Matter movement remotely from the safety of their homes. They have been looking for ways to donate their money by trying to be more thoughtful about whom it’s going to and how these organizations use these contributions.

Opportunity Statement

Donors need more reinforcement regarding
where the money is going within Black Girls Code because they want to be certain their
contributions are helping the black community.

Screener Survey

Once the team and I came up with our opportunity statement we moved on to create a screener survey. The team brainstormed a list of questions we wanted to include in our screener survey as we were looking for participants who had donated to nonprofits, however, we also wanted the perspective of a participant who didn’t donate, and
why they choose not to donate.

Screener Survey Results

Looking at the responses we received, we were able to view participants who had experience within all the categories, as well as users who had experience in some categories versus others (e.g. some
experience with tech websites and events but no experience volunteering or donating), which would bring a different viewpoint.

We had a total of 19 responses from our screener survey and interviewed 5 of those participants.

Screener Survey Responses

19

Interviews Conducted

5

Interview Insights

Some key insights we had to our interviews were:

Individuals are very much inclined to donate to nonprofits that they find on social media.
Seeing other people support a nonprofit might be all that they need to decide whether it’s worth donating to.

The intended audience based on our data are people who want to support the Black Lives Matter movement remotely. These are people who are either too busy or too compromised to directly get involved with protesting but still want to feel like they were part of the movement.

SYNTHESIS

After the team wrapped up our interviews we took the data we found to create an affinity map. Our groupings were renamed and refined as many times as needed until the insights started to emerge. We created 2 "I" statements and they are “I want my values to be recognized in the places I donate to” and “I want to know how the money is being used”. The next step is to move on to creating our Persona.

Persona

The next step was to take our insights and data from our interviews and affinity map to create our persona that will be representing our user base.

Our Persona

(Click to Enlarge)

Meet Diana

Diana is a nurse that wants to help contribute to the Black Lives Matter cause. Since she is exposed to sick people at the hospital and has a busy schedule, she needs to contribute remotely to keep others out of harms

way from Covid-19.

She also has a niece that is interested in technology. Dina is passionate about her niece being part of the diversity in STEM to help make that change. Some of Diana's needs and pain points are:

Needs

Needs her values to match those of the companies to whom she is donating.
Needs to know that the companies she is donating to are transparent about their spending.
Needs affirmation from her friends and colleagues to figure out whether the places she donates to are legitimate

Pain Points

Wants to be an activist in her community but because of COVID-19 and her busy schedule, it's impossible.
Wants her niece to add to the diversity within STEM programs.
Helping people in person is dangerous due to her constant exposure to those who are ill.

Journey Map

After creating our persona Diana and seeing her needs and pain points, the team and I needed to record her journey. Let’s see where her journey for the quest to donate takes her in our journey map.

Diana's Journey Map

(Click to Zoom In)

We created five sections to help represent Diana’s journey through the Black Girls Code website. Those categories are as follows.

Discovery - Diana found a tweet/post about Black Girls Code on social media and was excited.
Communication - Diana starts to experience her downward journey of frustration as she cannot find information on the website about where donations go. So she has no choice but to search externally.
Validation - She finds news articles about how Black Girls Code is a reputable organization and about large well known companies that have donated to them on the front page of Google.
Donation - Diana decides to return to BGC’s website after reading validating articles through Google and ends up making a $25 donation to the organization. This gesture puts her in a good mood.
Proliferation - After making her contribution, she ends up sharing about it through posting on social media using the links on BGC’s website. This helps to validate and also completes her cycle.

Based on the above insights, we created a problem statement.

Problem Statement

Diana needs more 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 legitimacy without needing to leave their website and search externally?

Usability Test (Existing Site)

The next step after creating our problem statement was to conduct a usability test on the existing website to gain data and insights on problem areas with the current website. One of the tasks we asked participants to accomplish was to find donation information. This page does not currently exist on the current website. The team and I wanted to extract insights and study where the participants would go searching for this information. Other insights we gathered from participants was that the readability and length of text on the What We Do page was difficult to read.

Usability Testing Report

Mid-Fi Wireframes

DESIGN

After we completed our usability test on the existing website for Black Girls CODE, we took our insights and conducted a Design Studio with our team. In this process we collaborated design ideas quickly while keeping Diana (our persona) in mind. We sketched, pitched, critiqued, iterated, converged, and refined our ideas until we came up with our final design.

From there, we moved on to design our Mid-Fi wireframes using Sketch app.

Existing What We Do Page

On the What We Do page on the existing website, users are met with long paragraphs of text.

The light grey text on a dark background makes it hard to read and is not inviting to the user. The team aimed to increase readability and improve the navigation of the Black Girls CODE site in our Mid-Fi designs.

What We Do Page Mid-Fi Wireframe

Donation Info Page Mid-Fi Wireframe

In our Mid-Fi wireframes for the What We Do page, we incorporated bullet points at the top of the page that highlight important information.

Under that we have the Black Girls CODE goal statement that is large in size, centered and users are able to conveniently view it quickly.

Also, on the What We Do page, we kept it balanced by alternating the text, added images to keep the user interested and we chose to go with white colored text to help make it easier to read.

On the Donation Info page which does not currently exist on the website, you can see a balance of informational and emotional aspects to encourage users to donate.

The team and I also included quotes above the donate button to influence users even more to donate. After all, your donation contributes to events like the ones listed above!

Hi-Fi Mockups

After we completed designing our Mid-Fi Wireframes we conducted a usability test and used the insights from the results of that test to help improve the designs in our Hi-Fi mockup.

Primary Navigation HI-Fi Mockup

What We Do Page HI-Fi Mockup

Home Page HI-Fi Mockup

Where Your Money Goes Page HI-Fi Mockup

Donation Page HI-Fi Mockup

The team and I used the Figma app to design these Hi-Fi mockups of the Black Gilrs CODE site. We kept our persona in mind through the design phase and improved the navigation and readability for our users. In addition, we also changed the name of our Donations page to Where Your Money Goes. Based on our usability test from our MId-Fi designs users were getting confused and thought the Donations page was where they would go to make a donation.

In the existing website when a user wants to make a donation they are led to an external site that disoriented the user. Our Hi-Fi mockup of the Donation page was designed with the intent of keeping the user within the Black Girls CODE website. This makes the user feel secure about financial transactions while making a donation.

Both of our tasks from our Hi-Fi usability test came back as a success. The updated primary Navigation and readability of the pages proved to help users understand where the information they were searching for is located compared to the existing website.

Usability Testing Report Hi-Fi Mockup

Click On Image To Enlarge

VIEW PROTOTYPE

TITLE OF THE CALLOUT BLOCK

NEXT STEPS

Some users were confused by or even missed seeing the Donate button.

One next step is to move the Donate button to the right side of the primary navigation bar where it will sit separate from the rest of the other categories so that it stands out more to the user.

TAKEAWAYS

In conclusion, We believe that the changes to readability, color scheme,and secondary navigation items make for an improved user flow. These improvements should help retain users from needing to exit the website for information like our persona, Diana had to.

I learned from this project that having a growth/open mindset and not being married to my designs while still paying attention to our data and insights from our interviews and usability tests will make for a better redesign of the Black Girls CODE website.