I teamed with web developer Cornell Green, to revamp the H.A.N.A. website.
My role as the UI designer was to come up with a design that would highlight the key goals of the organization, which are donations, education, and exploration of the positive aspects of Haiti.
After sitting down with a couple of the organization’s leaders, we determined who their target audience is.
- Working adults with an interest in social issues and current affairs
- Could be donating to other charities
- Attend H.A.N.A. events
- Keen on giving back to society
- Have visited, plan to visit, have family/friends, or were born in Haiti
- Have a vague interest in the organization
With the audience in mind, H.A.N.A. had several concerns about their current site, including:
Look and Feel:
The site looked outdated, the navigation bar was cluttered and there was a major lack of content.
Functionality:
The goals of H.A.N.A. are to get donations, help kids get an education, show people there is more to Haiti than natural disasters, and form a community of volunteers that share their experiences and make the site their main hub for positive things happening.
The site didn’t hit on any of these goals. There is no call to action to donate, and the main content is outdated.
Social Media:
There was no link or visible social media aspects anywhere on the site. Social media is a key factor in sharing pictures and information, and building a community.
Previous Home Page Design
Cornell and I met with H.A.N.A. in order to get a feel for what features, goals and content the organization wanted on their site.
Once we had a full understanding of their desires, I began working on transforming the site using quick sketches and wireframes.
After completing the sketches and wireframes of the new layout, H.A.N.A. approved the design and provided us with the content for the site and I began working on the final design.
Updated Home Page
I wanted to design a colorful and inviting home page. H.A.N.A.’s goals are prominent on the page, and I added video features and social media opportunities to promote interaction and to build a community between current members and potential donors.
Previous Donation Screen
The donor screen provides no information, no back story, no brand identity.
Updated Donation Page
I provided several donation options and point out not only how you can help by donating, but also exactly what your donation will go towards. I carry the brand identity over on each page to keep everything unified.
Previous Education Page
The education screen is very bland, and again gives no background on the program or information.
Updated Education Page
I wanted to give some information options to entice potential donors to really feel for these kids, and make them much more likely to make a donation. Seeing is believing, so I also provided a video to get donors even more involved with the program.
Mobile Design
The new H.A.N.A. website now presents all goals in a unified, bright and powerful way. Not only is the site pretty, but it’s functional.
Donating to an organization is often impulsive, and by having call to action options everywhere, combined with a quick and easy donation form, the site will now convert potential donors into actual donations.
Working Prototype
Click for an interactive prototype of the H.A.N.A. mobile site
Outcome
Cornell and I found that through proper planning and communication we were able to improve and redesign the site’s major issues. With the lack of content on the original site, it was no easy task to acquire all the necessary info and images to fill the needs and goals of what the site aimed to accomplish.
Luckily by working with great leaders of H.A.N.A., everything was able to come into place, and the new site displays both beauty visually and great overall function.
John Taber 