IAVI

IAVI website redesign

MacBook Pro.png

Background

 

The International AIDS Vaccine Initiative  (IAVI) launched in 1996 as a non-profit organization dedicated to developing a vaccine to cure AIDS. IAVI collaborates with more than 100 academic, industry, and government organizations around the world in service to its mission.

 

The Problem

 

The IAVI website has poor user experience, is hard to navigate, and needs new visual design elements. How might I add User Interface Elements so users can quickly gather information and have a more cohesive experience? 

 

The Opportunity

 

I will redesign the website by providing user interface elements, current trends, and best practices. With this design, IAVI will stay competitive and reflect on business and marketing strategies. 

 

My Role and Timeline

UX Freelancer, 2 weeks


Evaluations-Competitive Analysis

 

I researched other organizations' websites in order to learn how IAVI could improve their homepage. IAVI could add a Hero photo, an enlarge image carousel, videos, and be mobile friendly. 

 
Screen Shot 2017-11-13 at 11.21.24 AM.png

Evaluations-Comparative Analysis

 

I visited and evaluated donors' websites to innovate and improve IAVI's homepage. The IAVI website does have call to action buttons and an About Us section, but could benefit from a Select Language or Sign into Account feature. 

 
Screen Shot 2017-11-13 at 11.27.03 AM.png

Sitemap

 

I created a Sitemap for the IAVI Website. It has 7 categories in its main navigation bar and several secondary navigation links. 

 

Wireframes

 

I designed six wireframes created in Balsamiq. I will focus on the Homepage, Our History, What we do, Media Center, Publications, and Donate pages.

 

Redesign of Homepage

 

My strategy was to add more images, (67% of users process images 3x faster than text) and increase the font size. I also wanted the text to flow and navigate through the website complementing the images. 

 
 

KEY TAKEAWAYS:

  • Changed font to Helvetica Light.
  • Changed font size to 14.
  • Added a screen to screen image carousel.
  • Added a mission statement.
  • Change fact sheets to images and text instead of links.

Redesign of Our History Page

 

IAVI's Our history page is full of text which is information overload. My strategy is to provide images which will break up the text and increase readability. 

 
 

KEY TAKEAWAYS:

  • Change font size to 14.
  • Add images.
  • Changed the side navigation bar to a horizontal navigation bar under the Our History title.

 Redesign of What we do

 

I kept the navigation and image carousel the same and moved on to content. My strategy on this page was to provide bigger images to engage users to click on the links. 

 
 

KEY TAKEAWAYS:

  • Increase image sizes.
  • Bold key words that provide links.
  • Incorporate a horizontal image and text format to minimize scrolling.

Redesign of Media Center

 

IAVI is rich in content under the Media Center tab but poor on providing images. My strategy here was to provide hero photo images that are captivating. The block of images allows users quick access to the Latest News from IAVI section. 

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under the Media Center title.
  • Moved text to top of page to inform users of subscription options.
  • Added hero photo images instead of links.

Redesign of Publications Page

 

Publications are enhanced when adding images. To increase user experience, the strategy used here is to provide images associated with that link.  

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under the Publications title.
  • Added images and text along with the links.

Redesign of Donate Now

 

Donation pages should be short, easy, and intuitive through good design. The user should also be aware of the security credentials which IAVI  provides. 

 
 

KEY TAKEAWAYS:

  • Changed the side navigation bar to a horizontal navigation bar under Donate title.
  • Changed the color of the boxes for more of a cohesive look.
  • Removed white space.

Back to top

Next Steps

 
  • Add images to drop down pages.
  • Redesign charts.
  • Redesign maps.