net magazine’s charity design challenge

 By John Hanawalt, Senior Visual Designer

In the latest issue of net magazine, three designers, including myself on behalf of Elefint, were presented with a design challenge: invent a nonprofit and design a homepage that addresses common web design considerations for mission-based organizations. You can view our final design here and watch a video walk-through below.


Our nonprofit

For the challenge, we imagined a nonprofit, We Live Here, that works to address the negative impact of gentrification. The issue is not only relevant to us as a San Francisco studio but also one that reflects the potential of design thinking to affect social good.

As we conceived of it, We Live Here would connect new, wealthier residents with the communities they are joining to crowd-fund and staff projects that would strengthen the neighborhood for everyone. Projects could range from raising funds for local services for the homeless to skill shares where, for instance, new neighbors in the tech industry could share their knowledge with local youth. We Live Here would provide a platform for communities to create their own innovative solutions to the challenges created by shifting demographics.

The challenge

Our nonprofit, like many mission-based organizations, needed a feature-rich homepage that:

  • Provides a concise overview of what the organization does;
  • Speaks to diverse audiences;
  • Guides visitors through clear navigation and calls to action;
  • Engages visitors with content that is interactive, tailored to their interests, and—of course—well-written;
  • And encourages visitors to support the organization by joining or funding their work.

Our solution

Our final design accomplishes all of this through strong color and layout and, more importantly, an overarching commitment to engaging, interactive content.

Instead of a slideshow or banner image, visitors are greeted with an interactive project map that invites them to engage with and explore our content right away. This approach is carried throughout the whole site—even in the “Donate” button, which would allow visitors to begin the donation process without having to go to a new page with a daunting form first.


Content on the homepage uses an “inverted pyramid” layout, starting with broad information on the issue and the organization’s work and narrowing down to smaller, more detailed content, such as featured projects, blog posts, and events. At every point along the way, visitors have the opportunity to click deeper into the website based on their own interests.

Many nonprofits try too hard to feature every aspect of their work on the homepage, front-loading their website and overwhelming visitors. Good content and design can lead visitors through your site at their own pace and according to their interests. Learning about your organization becomes an experience of discovery for the user rather than a digital game of show and tell that you control.

And of course, we want visitors to have that experience of discovery independent of the device they are using. So if we were to develop this site, we would use responsive design techniques, allowing us to deliver the same content in a layout appropriate for a variety of devices. On an iPhone, the initial view of We Live Here’s site would look like this. For some organizations, a separate mobile-only site may be more appropriate (see this post on choosing between responsive and mobile  websites), but regardless of your technological approach, the mobile experience should be as engaging and well-thought out as on a desktop.

Even nonprofits with drastically different missions and requirements for their website can benefit from the approach we took with We Live Here:

  • Embracing a unique vision and visual identity;
  • Striving for clarity and conciseness in your content and design;
  • Proactively utilizing new web technologies and approaches;
  • Using your website as a touchpoint for genuine interaction with your organization, rather than a dry depository for information.

To read more about our design and see the other responses to this design challenge, check out the most recent issue of net magazine.




Our site is being re-designed and updated as we speak. Please be patient, while you peruse through our old site.

Got it