Gabriela Ospina
GettyImages-664657555.jpg

GAF Website

 

GAF SITEMAP AND NAVIGATION REORGANIZATION

GAF is North America’s largest residential and commercial roofing manufacturer. They encountered user experience challenges as well as content and design execution challenges on their website redesign. As part of the RAIN team hired for the job I was the lead UX designer on this project.

 
screens–1.png

 

challenge

GAF had started to work on a new website redesign with another agency, in which a number of clear user experience related issues were hampering the usability of the website, including navigational structure, naming conventions, CTA interaction models, design elements, and user-pathing considerations. 

One of the main challenges of the website was the navigation organization, the goal was to drive users to content tailored to their role and needs. 

The site structure was defined by GAF’s product offerings and categories. Dual navigation between residential and commercial created navigation duplication between the two sections. Users were not clearly directed to content that will help them take the next step in the path to purchase (finding information or finding a contractor). 

 
Original sitemap

Original sitemap


 

RECOMMENDATIONS

Take the site from a place that is focused on product offerings to a site that is focused on the consumer’s needs by addressing navigational structure naming conventions, structure and organization. In turn develop user pathing that allows for self identification and easy access to desired content.

Key elements to consider:

  • Move away from using product offerings to define the site structure.
  • Rework navigation to prioritize easy entry in to sections that will resonate with users like their role or the kind of information they are looking for.
  • Move away from deep nested navigation and learn on in-page navigation to drive users to lower-level product sections.

 

APPROACH:

To understand all the information found on the site. A content audit needed to be done to understand where duplicates were being made and create a logical path for the user to digest the information.

Utilizing OOUX object audit was the most efficient approach to this problem.

After breaking all the information down, and seeing the relationship of content, four major buckets were decided to group the information in. Each high level topic was grouped under each bucket “Products” “For Homeowners” “For Professionals” “Roof Design” “Our Company” this helped then figure out the lower level items and clearly see if there were any duplicates inside each top level item or across the buckets.

 
OOUX.png
 

NAVIGATION REDESIGN

The second part of this project was redesign the navigation to reflect the restructure of the website. 
Utilizing the main five buckets a limit of two levels was recommended for each subsection of the site. 

 
screens–2.png
sitemap.png