John Taber

UI/UX Designer, Product Designer

H.A.N.A. Website Redesign

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.

 

hannabanner2

 

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

Screen Shot 2017-04-24 at 12.44.51 PM

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.

hana-wires

 

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

hana

 

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

Screen Shot 2017-04-24 at 12.46.21 PM

The donor screen provides no information, no back story, no brand identity.



Updated Donation Page

Group 12

Donor payment

 



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

Screen Shot 2017-04-24 at 12.45.35 PM



The education screen is very bland, and again gives no background on the program or information.



Updated Education Page

Scholarship

 



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

hana-mobiles



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

hana mobile

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.

Share this:

  • Twitter
  • Facebook

Like this:

Like Loading...
Website Powered by WordPress.com.
  • Follow Following
    • John Taber
    • Already have a WordPress.com account? Log in now.
    • John Taber
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Copy shortlink
    • Report this content
    • View post in Reader
    • Manage subscriptions
    • Collapse this bar
 

Loading Comments...
 

    %d bloggers like this: