Build4good

build4good: Connecting College Students with Nonprofit Tech Internships

Role

Web Designer

Timeline

Aug. 2024 - Jan. 2025

SKILLS/TOOLS

Figma/Figjam, User Research, User Testing, Visual Design, Squarespace

TEAM

Just me!

SUMMARY

Connecting Tech Students to Nonprofit Internships

As part of my remote Web Design position with the matching and mentoring program build4good, I spearheaded the overhaul of their website to encourage more student applications and generate trust. Over 3 months, I used UXR findings to improve the experience and visual design of build4good’s website.

build4good is an initiative of New America, and matches students in technology fields to host nonprofit organizations lacking technical expertise for a summer intern project.

Solution

An improved online presence, fostering trust and encouraging applicants

Old website:

Redesigned website:

You can check out the website here!

IMPACT

Quantifying my designs

63%

decrease in time to find key information

240%

increase in unique website visitors in the first month

48%

increase in users clicking "apply"

Research

It's difficult to find information, and easy to distrust

I conducted 1:1 interviews with:

Previous interns

Prospective interns

Nonprofits

From these interviews, I discovered key insights about users' internship search:

"I thought build4good was a scam before I applied"

The old website does not adequately convey professionalism to users, resulting in doubts regarding legitimacy.

"I spent a lot of time to decide if the internship was a good fit for me"

Users reported spending a long time trying to find important information. Both prospective and previous interns reported pay, location, eligibility, and qualifications as key factors to determine whether to apply. Organizations reported a lack of information about past organization partners.

"I only used the website before I submitted my application"

The website is mainly used during the application stage of interns' build4good experience and organizations' matching process. Therefore, the website's use case is to presenting the internship and facilitating applications.

I also conducted my own audit of the website and found a few other issues to repair:

The old website lacks sufficient color contrast and consistent visual design

IDEATION

Structurally altering the website to streamline workflows

Old information architecture:

The old website's information architecture was overly nested and complex

New information architecture:

The new website's information architecture is simpler and presents important information first

I consolidated the information users reported as most important, and brought it to more heavily trafficked areas of the website. I also replaced repetitive and unnecessary content with information users reported as being important to know about build4good.

Translating UXR to a functional, content-rich website

With this, I began my low fidelity sketches for a few of the main pages:

Initial redesign sketches of the Home, About Us, and Organizations pages

Refining

Mocking it all up!

Our first order of business was to mock up the new content design in Figma:

Mid fidelity mockups of the new website

Ensuring WCAG compliance

As noted in my audit, there were numerous color contrast issues with the website. I started by creating a color palette which uses only WCAG-compliant colors, as shown by the below example change:

Enhancing access to the website by adhering to WCAG color contrast guidelines

Building brand trust via storytelling

The old website tried to build trust through including testimonials. However, users reported the testimonials making them feel more distrusting of the website because testimonials can be easily faked. I decided to explore ways to tell an intern's story to improve reputability:

Moving from testimonials to intern reflection "spotlights"

Improving visual hierarchy

Visually, the old website was quite cluttered and difficult to follow. This was largely because of the large amount of clashing typefaces and lack of visual hierarchy. I decided to consolidate to just the Poppins typeface, focusing more on visual hierarchy within one font.

Improving visual hierarchy with just one typeface

Implementing the website via Squarespace

With these mockups, I pushed to implementing them on the actual website. Because I am not a developer and did not have a developer on the team, I decided to create the website myself using Squarespace. While this did restrict some creative ability with the drag-and-drop interface, I decided it would be the best option due to:

Future ease of use: Ultimately, someone else will be in charge of the website and an easy interface would be easiest for seamless handoff
Timeline: The website is most important during the application season, so getting the website published as quickly as possible was most integral

Confirming designs with user data

I conducted 12 A/B tests, evaluating the new website against the current website. Here are my findings:

63% decrease in completion time for finding key information

Because users' main pain points stemmed around accessing information and spending too much time finding details, I evaluated my designs based on task completion time.

Users reported less frustration with the new website

The old website saw much more audible frustration and visible uncertainty of where to proceed to complete the task.

Heat maps of user activity showed less use of the new website's apply button

Because a main goal for the redesign was to encourage applications, I provided more opportunities to apply in more central areas on the website. This change resulted in a 48% increase in users clicking the apply button compared to the new website before the alteration.

SOLUTION

A new website!

You can check out the website here!

Reflection

A rewarding experience to work within a different field of design

This was a very fruitful learning experience, and here are a few of my takeaways:

Compromising to achieve goals

I've previously had the privilege of working with developers, where I had much more flexibility with design feasibility. However, I learned the importance of working within client constraints, such as using a more design-limiting platform like Squarespace.

Design principles are applicable to problem solving

Initially, I was worried that web design would be more visual than I was hoping; I greatly enjoy UX design work. I realized that the product design process is applicable in many scenarios, including this one, from identifying the problem with UXR to confirming your decisions with testing to empathizing with the user.

Confirming with quantitative data

While I have previously conducted user testing on my designs, they were always qualitative user tests. With this project, I learned how to conduct A/B testing and generate insights to evaluate my design changes.

Meticulousness, down to the finest detail

I witnessed firsthand how much small details, whether it be visual or higher-level process, can impact a user's experience with and impression of a product.

It was incredibly rewarding to work with the organization that matched me to my prior summer internship! I am very grateful to have had the opportunity to connect tech students like me to impactful nonprofits, and I'm excited to continue to contribute to build4good and see where it goes in the future!

I'd like to thank the build4good founders for their design feedback and endless support throughout this process. Most of all, thank you for reading! <3