Analyzing the Journey
I arrived at Habitat at the beginning of an ambitious period of growth but there was no record of how the organization interacted with donors. This made it difficult to implement new recruiting and retention strategies. The journey map above is an early example of how we started to organize and gather data.
We had a wealth of data in our donor management system that we mined first, looking at when people made their initial and second gifts. We also had information from our resource team from their years of listening to feedback. We then looked at some of the holes in the chart that were mostly around what our donors goals were and what they were feeling and thinking. Through several segmented surveys we were able to gather actionable data that allowed us to fill holes in our baseline analysis and also make improvements in our interactions such as:
Calls to action in our follow-ups and thank you emails that focused on how the donors money was being used locally.
Better timing of appeals to coincide with inspiring events.
Segmentation to prevent asks after donations were received.
Improving the UI
The original Habitat website consisted of several layers of what I cal “Portal Pages”. Click after click you would be confronted with 2 - 3 similar looking pages with a grid of 4 titles, images, and descriptions. According to our analytics most people did not make it more than 2 levels deep with anything below that being almost unseen. Aside from burying content, the overall UI of these pages needed help. The updated design (above right) attempted to address the following issues:
Unclear Design: The title of each quadrant was separated from the description by an image that, in many cases was unrelated to the actual content of the link. ie: Individual has a picture of a group of women, this is right above Women Build which has a picture of staff outside the office.
Hierarchy Issues: The first thing users see is a volunteer button, to the right is an information box that largely went unread that contained what the team deemed essential information about the scarcity of available volunteer slots.
Too many similar pages: Having so many levels of navigation with the same layout and no breadcrumbs made it difficult for users to know where on the site they were.
The updated design:
Used brand colors and style guidelines to clearly differentiate the 4 options
Is used only on top-level pages when appropriate eg. There is less content and more links to different sections.
Uses breadcrumbs to allow the user to easily see where they are and how to access previous content.
Uses images as style elements that fade into the background and do not distract from the important information.
The Habitat website used a mega menu consisting of 54 different pages with 3 levels of visible hierarchy. The actual site hierarchy, in some cases, went 5 to 6 pages deep. Our goal was to identify high value content, consolidate non-essential information, and flatten the hierarchy to ensure simple and direct paths existed between the home page and essential information.
Analytics & Competitive Analysis
To start off our project we looked at our own analytics to determine common user paths, bottle necks, and underserved pages. We also spoke with department stakeholders to discuss what they felt was important information that was not being presented to their users, be they donors, potential homebuyers, or volunteers.
We also looked at other successful affiliates around the country. There were several common elements we found in their top level navigation that helped give form to our intuition and anecdote based hypothesis.
Some common themes we noticed
There are always two donate buttons, one that goes directly to a donation form and one that gives the user more options to donate and these are both top level items with a stylistic differentiation or with the non-form option being called “Support”. Driving customers to either of these choices is generally a win.
Volunteer should be a top level item. Our affiliate does not have a lot of volunteer opportunities for individuals because of our paid groups filling many of the slots but it’s important to capture and direct this groups attention as they have the potential to become strong supporters.
Menu items that were inconsistent from site to site showed us how each affiliates service offerings and region required slightly different approaches. One affiliate might have “Housing Help” if they offered an array of ownership or repair programs while an affiliate doing a large volume of building might choose “Our Impact” to display their presence in the city.
We decided to remove several old pages that were not needed and consolidate others that were fragmented but related. For our top level items we decided to remove Our Builds as much of the information was outdated and redundant. This allowed us to bring buried menu options up in the hierarchy, eliminate redundant pages and stay within only 6 top level items.
Get Involved - Programs - Our Builds - ReStore - About Us - Donate
Donate - Volunteer - Get Involved - Programs - ReStore - About Us
Designing within Brand Guidelines
Eat Drink Build is a local event thrown by one of Habitat's volunteer groups: Women Build. Restaurants donate a portion of their proceeds on the day of the event to Habitat. The new Habitat for Humanity International brand guidelines have been slowly adopted by affiliates around the country but this event had not yet had a brand refresh at our affiliate. The guidelines for events in the new brand book are somewhat limited. One of the directives is to not have logos or unique artwork for programs like this which can make it difficult to create eye catching marketing materials. This concept aims at a balance between the strict "No logo" brand guidelines and something loud and fun to catch the eye.
Using simply iconography, via the guidelines, and the full brand color palette, we came up with a solution that was bright and eye-catching, but still felt feels like Habitat.