Habitat For Humanity St. Louis

Website Redesign

Habitat for Humanity Saint Louis believes in a world where everyone has a decent place to live. A nonprofit organization that builds homes, communities, and most of all, hope, they are dedicated to eliminating substandard housing locally by utilizing a comprehensive program in which hard-working local families invest their time into building and purchasing their own homes. Learn more by reading our website redesign case study.


Habitat for Humanity St. Louis provides an opportunity for families living in substandard rental housing to help build and then purchase a home they can afford to maintain. Having had the same website for nearly a decade, they were looking to overhaul its fractured layout, cumbersome CMS, and often confusing donation API. Habitat St. Louis reached out to us to incorporate the updated branding of the national affiliate into a new, mobile-friendly that not only reflected their mission but brought the goals of increasing donations and volunteers up to date with the rest of the non-profit world.


The national branch of Habitat for Humanity underwent a brand refresh recently, and as Habitat St. Louis is essentially a franchise of that brand, we were bound to follow the new color and typographic schemes. However, this was not a limiting factor for us at all, as it allowed us to think less about different color and type combinations, and more about the concepts related to and worked well with the particular colors chosen from the nationally provided palette.

St. Louis Website Development Company

The design pallet that was used for the website redesign or Habitat for Humanity in St. Louis, MO.

Pictures Tell The Story

Habitat St. Louis, just like the national organization, is a people-centric entity, and all people have stories. It was those stories that drove the image choices for this site, with each and every image being mindfully and deliberately selected to portray stories that cross all demographic and psychographic boundaries to impact us at our emotional, human core. The choice to utilize mostly lowercase headlines and subheads was a direct result of this, as the goal was to both bring attention to the headlines, yet not have them feel as if they were “yelling” at the user or overpowering the underlying message that they were meant to support.

Increasing Giving

One of the primary goals of this site was to design and implement a donation form that was a vast improvement over the old, cumbersome form and API that the previous site had been utilizing for over a decade. What most people don’t know, is that, while certain projects are heavily supported by the national organization, local Habitat branches get very little of their individual operating budget from the parent group and instead rely almost entirely on direct donations from the community.

Instead of utilizing one long form, by breaking the process up into “bite-sized” phases, we have been able to drastically increase donations over the old site, with the numbers currently still being compiled.


Website Redesign Case Study CTA 50/50.



Website Redesign Case Study. Footer and CTA.

Sweat Equity.

Contrary to the belief of large portions of the public, Habitat branches do not simply GIVE away houses. There is a lengthy application process that results in candidates that are ready, willing, and able to put in not only a certain about of “sweat equity,” into their potential “new home.” It was important to Habitat St. Louis to make this point clear but also do so in a way that would make the time and effort worth it in the end for prospective applicants, but also reinforce the connection to their overall goals, as well as their approach to making those goals become a reality.


Website Redesign Case Study For Habitat For Humanity A Nonprofit client.

Back To Matchbox Case Studies