Habitat for Humanity- North Shore

A volunteer project to redesign the website for the Habitat for Humanity’s Boston North Shore location.

Project Overview

THE OBJECTIVE

To research and redesign a responsive website for the Habitat for Humanity’s - North Shore by integrating the brands style guidelines, organizing the information architecture and usability of the website.

Duration: 6 week Sprint

Device: Responsive Design

MY Role: User Researcher | UX Manager | Website Developer | User Testing

Habitat for humanity - north shore

The Habitat for Humanity - North Shore (HFHNS) is a non-profit housing organization that serves around twenty communities on the North Shore of Boston. It is dedicated to eliminating substandard housing locally through constructing, rehabilitating and preserving homes; by advocating for fair and just housing policies; and by providing training and access to resources that help families improve their shelter conditions.

the problem

The existing Habitat for Humanity - North Shore (HFHNS)’s website had a very dated look. It is hard for users and volunteers to navigate and find basic information.

Old Website

the solution

The task was to redesign the Habitat for Humanity’s website by updating the Habitat’s style standards and making it more simple and accessible. To develop a Restore website, which is a brick and mortar store that sells refurbished furniture.

My Design process

1. User Research

   Competitive Analysis:

   I researched non-profit organizations that were similar to the Habitat’s mission. I also looked at the Habitat for Humanity’s style standards.

Heuristic Analysis

I carried out a Heuristic analysis of the for the same organizations to get a sense of how Habitat’s North Shore website was faring. Using Jacob Nielson's 10 Usability heuristics, a scale of 1-5 (major to minor) was used to grade the the usability of the website.

2. design

User Flow

WireFrames

Design: I studied and researched the Habitat for Humanity’s website to understand the global brand guidelines, typeface, color scheme and messaging.

• The ReStore website was designed as part of the Habitat website instead of handling a separate website. This creates a holistic experience for the users.

• Each important function like donate, volunteer, housing help, restore is it’s own tab. That makes it easier for users to access relevant information.

• The site has more visual images now with corresponding text information which makes it more appealing.

• The site is built for volunteers to update information and events easily. The current builds and volunteer stories can be accessed and images can be uploaded easily.

3. Develop

Final Prototype: After the prototype was finalized, I started developing the Habitat website in SquareSpace. It’s an easier platform to build and develop. As the volunteers would be maintaining this website, it was essential that it was easier to make updates for them. Tasks like the volunteering events, calendar, current builds and the Restore furniture items needed daily updating.

FINAL PROTOTYPE

4. Test and Iterate

After building the website on SquareSpace, I tested it with the Habitat members. The response was very positive and welcoming. I was able to make a few updates with their feedback.

• The team was eager to explore the website and found it visually appealing and easier to navigate.

• The tabs were clearly visible and relevant information was easily accessible.

• The restore tab which was an important part of Habitat was much more robust and had more features than the old website.

• The team was able to learn how to edit the website and keep it updated.

It was a pleasure to work with the Habitat North Shore volunteer team. Their enthusiasm and mission to make a difference in people’s lives was inspiring. I’m motivated and looking forward to go back and volunteer for the building projects.