Refreshing a Tech Nonprofit

Responsive Web Redesign
Volunteer • Fall 2017 • 6 Weeks

Run entirely by women in industry, CodeChix is a nonprofit dedicated to retaining female engineers in tech. I volunteered to modernize their website before their annual convention.

My Contributions —

Research, design, prototyping


Help Wanted

Now several years old, the current CodeChix site was outdated and information-dense. CodeChix wanted to revitalize their site to attract sponsors for their annual convention, DevPulseCon.

Screenshots of before this project, which contained outdated information throughout. Left: home page. Right: conferences page.


After connecting with Rupa, CodeChix’s founder, I volunteered for the job. Constraints included a maximum of four pages and a six-week timeline. The goal was make the website more:

  1. Attractive to potential sponsors.
  2. Inclusive to those who don’t identify as women, who are also invited to events.
  3. Clear that CodeChix is focused on retention and are run entirely by women in industry.



A handful of similar nonprofits I researched. From left to right: Black Girls Code, Girl Develop It, Tech Ladies, and Women Who Code.

After some discussion and preliminary research, we identified the website’s three main audiences:

Female engineers
who are interested in membership.

Male engineers and PMs
who want to support but are unsure how to contribute.

Corporate sponsors
who donate resources and fund events. They are happy to help, if they review a nonprofits track record.

I also surveyed some senior engineers about why they would help tech nonprofits or provide mentorship. The responses often mentioned the following:

  1. Legitimacy. Besides the cause itself, they evaluated how sincere an organization was before contributing.
  2. How to help. Even if they liked a cause, they would only help if they felt that their help was effective.
  3. Community. They were happy to “give back” mentorship they themselves received.

Iterating Information & Design

Given the multitude of information on the current site, it was critical to start with content. After reviewing several sketches, we chose the IA in the flow below.

Top: the old IA. Bottom: the proposed version. Outdated and redundant copy was removed.

With our goals and constraints in mind, we decided the following:

  • Highlight sponsorship over donations. Both are important, but sponsors (financial and in-kind) have been critical to keeping CodeChix active.
  • Have a “Programs” page over “About”. Dedicating a page to programs gives potential sponsors a better overview of CodeChix's endeavors so far. Additionally, it past resources for members, adding to the nonprofit's open-source culture.

We also repeated elements throughout that hooked sponsors and members, such as DevPulseCon and blog posts.

Early iterations of various pages.


The final mockup for the home page.
Responsive versions of various pages.
Some style guide elements.

We preserved the green and black as a nod to CodeChix’s original brand. I switched to primarily having dark text on light backgrounds to increase legibility. Due to reducing the page count, each one hosted more content. I differentiated sections by background color to group relevant information.

A prototype of the desktop view is available on InVision. At the time of this case study, the redesign has yet to launch.


It was a great experience to work with such a passionate organization. Looking back, here is what I would do differently:

  1. Plan more for the jobs board. The jobs board was not yet open at the time of this redesign. However it could be a major incentive for membership and possibly more accessible.
  2. User test the IA and the prototype to each audience group. The architecture could be done by card sorting or by A/B testing different layouts. I put this off out of concern for time constraints. In hindsight, I believe I could have fit at least one round of testing.

Streamlining the Hiring Process

Top →