How can we provide a better user experience in Casa de Esperanza's website to help users navigate it with more ease?
In this project, I served as the Information Architect lead of the team and as a User Experience Designer.
Pamela Patton, Ashley Hehl, Guillermo Rangel, Valeria Obando, Tyler Luce.
Casa of Hope is a non-profit organization that promotes "self-sufficiency and spiritual growth through supportive housing, training, and skill development, and [provides] medical, dental, and construction services" in Honduras. This organization approached Weekend For Good, a partnership between AIGA West Michigan and Code for Good that during one weekend comes together to serve non-profits. For this project, we had one weekend to successfully transform the site and reach our goal. The only restriction was that we couldn't rebrand the company and thus we needed to keep the logo they already had.
As the members of the organization had little knowledge about websites but some experience using Wordpress, we decided to keep this CMS to secure they would be able to keep updating their site’s content long after we had overhauled it. Moreover, the theme they were using was not entirely responsive to different devices which is why we decided to look for a theme that had a responsive and customizable block system.
To initiate this process, we conducted a general overview of the site to better understand the way in which it was organized. We found that the website had navigational issues and many of their pages were redundant. For this reason, one of our priorities was to rethink the Information Architecture of the site to help users navigate it more efficiently.
Initially, each of us made a sketch of what information needed to be prioritized in the homepage and in what order to ensure that the organization’s message was understood in the first few seconds a user interacted with the website. We then proceeded to put our ideas together. For each of the sections of the homepage, we established a purpose and a way to achieve it. The order is as follows:
1. What we do › share a success story and add a call to action to donate
2. Why Honduras › map to give context and data
3. The issues we try to tackle › communicate the importance of education, health issues, and job opportunities
4. How is Casa of Hope unique › Transparency is prioritized, show how donations are used
5. How did everything begin › Share why this started and the evolution of the organization and add a call for action for people interest in joining the organization.
Initially, the architecture of the navigation bar was as follows:
What We Do › Education | Construction Assistance | Dental | Medical
About Us › Meet the Board Members | Testimonials | Newsletters
While the initial structure encompassed all the information that a user might be interested in, it had too many links and took attention away from the main item we wanted users to focus on which is the Donation button. We wanted to not only reduce the number of pages not only for this reason but to avoid duplicated information to be repeated all over the site and having fewer pages would help control this.
Having this in mind, we decided to unify all of the different kind of help they provide in one page that would still be called “What We Do” instead of having it in four different pages. Under the “About Us” page, we consolidated the information that used to be under “Honduras” and kept the “Meet the Board Members” page. We also added the “News” and the “Contact Us” page under it. As we wanted users that had just gotten to the page to be able to both Donate and Volunteer in just one click we kept these elements as they were in the navigation bar but in an inverted order.
We also learned the organization had several images that portrayed how they helped the community, we decided we wanted to have these images that showed the human aspect of the organization distributed throughout the site instead of only in the “Photos” page, and for this reason, we got rid of it and used more images in each of the remaining pages.
The change in structure is as follows:
What We Do
About Us › Meet the Board Members | News | Contact Us
Volunteer › Events
Based on the previous recommendations, we came up with this simplified design version of their website.
Additionally, the computer scientist in our team was able to create a Donation Calculator that would reflect the transparency of the organization by giving the user a clear idea of what their donation would provide.