The Problem
Habitat for Humanity East Bay/Silicon Valley (EBSV) realized their website was lacking the foundation and infrastructure they are well-known for building in real life. Their existing website left them with:
- An outdated design that masked the message to their target audiences.
- A hard to follow navigation that caused visitors to get easily confused and quickly leave the website.
- Low user engagement from their target audiences with very few conversion opportunities.
- Lack of a clear SEO strategy that ultimately led to missed opportunities for volunteers and donors from organic search.
- Difficulty in making on-the-fly website updates. The existing site was built on Drupal, making even the smallest of changes difficult for the marketing team.
The Solution
Habitat for Humanity EBSV realized the importance of having a new website to provide a more engaged user experience for their audiences. During their research, the Habitat team knew they wanted to move to a platform that allowed for easy updates and independence from their IT department. Even the smallest changes on their Drupal platform required help from IT and developers.
They began to look at other Habitat for Humanity affiliate websites and came across a HubSpot redesign Lynton completed for the Twin Cities affiliate. After speaking with the Twin Cities’ marketing team, the Habitat EBSV team learned more about HubSpot and contacted Lynton to discuss our redesign process. They ultimately decided to engage in a redesign with Lynton using our Growth Driven Design approach as they felt that consistent website support and iterative A/B testing would offer the best experience for their site visitors.
Building Buyer Personas
Before beginning design mockups, it was important to understand who the website would be targeting. Developing buyer personas provided insight to what content needed to be included and also how each persona would flow through the website. While we had worked with the Twin Cities affiliate, there are regional differences across the affiliates. For example, the San Francisco metro area is among the most expensive to live in the country and is host to many immigrant families.
Through interviews with their internal marketing team, we developed buyer personas to target with content and messaging on the website. The questions covered the company overview, marketing goals, current marketing efforts, and understanding the people they serve from volunteers, donors and applicants.
Nailing Down Site Architecture
With every redesign, we spend time reviewing the current website analytics looking at top visited pages, bounce rates, time spent on website among other key analytics. We then develop a recommended site architecture with updated courtesy navigation and main navigation. The navigation changes we recommended for Habitat EBSV were directed at their main personas, allowing the specific personas to easily identify where they need to be on the website. The navigation allows visitors to learn how to get involved, how they can support Habitat, the services that are provided and the impact that Habitat EBSV has made for over 30 years in the community.
Constructing a Comprehensive SEO Strategy
Once the site architecture was finalized, we began to do keyword research to increase Habitat EBSV’s organic search traffic. The nonprofit landscape in the East Bay/Silicon Valley area is competitive, with many options for interested volunteers and donors. In addition, they are trying to educate potential donors on the need to give to local charities. The current site missed the mark with its existing SEO strategy, so we opted to research hundreds of keywords, finding the right ones to target on the new website.
The final outcome was a content strategy document with recommended page titles, meta descriptions, and H1 tags that would drive qualified traffic to their new site.
Finalizing Blueprints
Just as a blueprint of a home must be finalized before beginning the design and build phase, a website redesign follows the same steps. Website wireframes are like home blueprints. This is when things begin to take shape. A wireframe is just a fancy word for a website outline. It makes up the basic structure (think skeleton or bare-bones) of your website. We built wireframes for Habitat EBSV’s top pages to show an initial layout of the website and how it would be organized.
Let the Build Begin!
After persona development and site strategy, it was off to design. With three unique personas, we knew that we needed to target them each differently, but keep the design elements cohesive. Our design goals surrounded having each persona complete specific actions:
- Volunteers need to be able to learn about different opportunities to get involved and website imagery should make them feel inspired to take action.
- Donors should easily be able to locate giving opportunities, learn about the impact their donation will have, and easily be able to donate in real-time.
- Applicants need to easily find services and housing opportunities relevant to them in the area they live in. They need opportunities to receive more information about home counseling services, request home service or complete a pre-application for homeownership.
With this in mind, we set out to create a modern, responsive nonprofit website based on inbound marketing methodology and growth-driven design principles and a site that could easily change and evolve with Habitat EBSV’s needs. We wanted to capture the uniqueness of East Bay/Silicon Valley and the brand to create a site that would stand out amongst their peers and the Habitat for Humanity community. It was important to us to make sure we had the opportunity in the designs to highlight the people, their stories, and the many volunteers of this community. As with most nonprofits, their stories and testimonials are truly the heart of what they do and needed to create that connection to ultimately impact volunteers/donors to take action.
Development and Launch
Once we understood their users we planned out a new structure and website templates flexible enough to support the many bits of content that needed to be clear, visual and easy to scan/read. After designing based on their updated branding standards, we developed HubSpot templates and trained the Habitat EBSV team on how to use them.
One of the development challenges Habitat EBSV was faced with was presenting home repair services by area. Using HubDB, we were able to dynamically generate results based on county and city searches. We also used HubDB to dynamically generate Habitat EBSV's upcoming volunteer events. Using HubDB makes it easy for the Habitat team to add and maintain events. Website visitors can search events by month and category type.
Learn More: [Video] How We Build Super-Charged Inbound Websites
Next Steps: Growth-Driven Design
The website launched in February 2018. Since then the client moved into a Growth-Driven Design approach, where we are making continual improvements to their website. With A/B testing site pages, this will ensure that the website will perform optimally for its visitors.
Results
The new site launched February 2018 and is already showing value. There is increased growth from organic traffic in the same period in 2017: a 6.22% growth in sessions and 2.91% increase in organic users.
