Develop for Good

What is Develop for Good?

An organization that aims to accelerate the digital transformation of the nonprofit sector while empowering the next generation of leaders in tech

DFG matches nonprofits with students and industry mentors to create long-lasting social good through projects that impact millions of users, provide real-world experience to volunteers and form valuable relationships between the members of the project cycle.

The Problem

To get involved with DFG, volunteers need an easier way to find key information on the website because the previous one is overwhelming and hard to navigate

DFG receives hundreds of applications each cycle, however, they constantly get content-related requests for information that it's already on their website. Also, the statistics show that it has a high bouncing rate, a small percentage of returning visitors, and a huge amount of application drop-offs.

Who are we designing for?

Through our initial analysis of the website, and meetings with the client, we identified 3 key users

Students

University students interested in making social impact and volunteering

Industry Professionals

Professionals interested in mentoring students in their areas of expertise

Nonprofits

Organizations interested in getting services at a significantly reduced cost

User Interviews

To understand the goals of the users and the problems they’ve experienced using the website, we conducted interviews with the multiple type of users

We had the chance to interview many people involved in DFG, and due to the limited time we possessed, we divided the team so each sub-team could focus on only one type of user. I focused on the students, and I centered my interviews in a way I could learn about their experience in application process and the information they need to make the decision to get involved in DFG.

Key Findings

Most of the problems were shared across the multiple users, and due to the time constraints, we defined the areas that would have the biggest impact on the experience

After each sub-team finished their interviews, we met to share our insights. Even though we had various type of users, they shared similar goals and experiences. Understanding this helped us to identify the most important areas that needed to be improved during the project cycle.

The Solution

Restructure the website to better communicate information for all users highlighting what Develop for Good offers

Information Architecture

The users were frustrated by the old website's main navigation, we redesign it to give them one-click access to information that matters to them

Our research showed that the previous sitemap was confusing, some labels didn't reflect the information users expected and made the process of finding information complicated. Our proposal gives them the opportunity to get directly to the essential information depending on their role, key information shared across all users is located under its own section, and secondary information was removed from the main navigation.

To determine the information and structure of the pages, we based on the user journey from coming to the website to taking the decision to apply and the questions they had at each stage

Content Writing

The biggest challenge was to phrase all the information effectively. Through multiple iterations, we were able to write the content in a way that met users and client necessities

Content writing wasn't anyone's area of strength on the team, sometimes what we redacted wasn't clear or what the client wanted. After multiple proposals, endless rounds of feedback with the client, and help from a content writer, we created content that was easy to understand, direct, and reflected what DFG wanted to communicate.

Some iterations for the headline and home page content

Accessibility

A project that aims to help everyone, no matter its situation, needs to have a website accessible for all

The previous website had many accessibility issues, the most noticeable was the lack of contrast in some sections between text and background. I ensure that the components we used were accessible, from choosing colors that met a minimum AA contrast ratio and providing alt text for images, to guarantee that touch targets were at least 44x44.

Final Design

The home screen, an introduction to Develop for Good

The home screen present what is DFG, highlights their accomplishments, and what you can do or get regardless the type of user you're.

In the volunteers, nonprofits, and mentors pages, you can find all relevant information for your role

These pages previously were huge blocks of text that make the scan of the content complicated and didn't help the users understand the information easily. We structure these pages to show only the information users need, with a wording easy to understand, and a layout simple to digest.

The projects pages let you explore what DFG has done and the current projects, everything available right away

Users struggled trying to find the projects available for the project cycle, this information wasn't on the website and was really important. The only way to find them was by going to the application portal, which was a website hard to find. We brought them to the website under its own section, along with a set of filters that simplify the search of the projects users are interested in.

What I Learned

Making everyone in the team feel valuable leads to better results

• It was a long project, and making everyone feel important and committed was complicated, when someone wasn't totally engaged it was reflected in our work and results, so we needed to find ways to create a good environment for everyone.
• This was my first project working with a team of devs I'm not part of, and the constant communication with them was key to understand the limitations we had and take informed decisions.
• Working closely with the DFG executive team was a great experience, I understood you don't only design for the users, but also everything you do must be in line with what the client wants and needs.