Pat Tillman Foundation :: Navigation Optimizations
83
2
0
Published:
  • Add to Collection
  • About

    About

    Navigation optimizations for the Pat Tillman Foundation's website
    Published:
 
Client: Pat Tillman Foundation
Project: Website Phase 2 Development

 
Background
After the launch (phase 1) of the initial PTF website about 6 months prior, I was brought in to manage the design process of the second phase of development, which included the development of new templated pages, along with brand new content types that needed to be accounted for within the story build. 
 
Being new to the project, and knowing that there had not been any previous usability testing, I was granted permission to do some minor testing - in order to get a little more familiar with how people were using the site, as well as potentially find any design errors that we could add to the optimizations for this second development phase. 
 
Deliverables:
- Guerilla Usability Testing
- Reporting & Optimization Recommendations
 
 
 
Original Homepage and Navigation UI Elements
 
Homepage Design
 
 
Global Navigation's Standard State
 
Global Navigation's Dropdown State
 
Global Footer Navigation
 
 
 
Guerilla Testing Outline
 
Participants:
- 1/2 day of user testing
- 6 users total (all new users who were not familiar with with the foundation as a whole)
 
About Scenario & Task 1: Being that the users were new to the site, I simply asked them to browse the site like they typically would with a goal in mind of at a high level, understanding what the foundation is about, how it got started and what they do. 
 
I took note of any facial expressions and browsing issues that they came across, such as funtion errors and frustrations. 

About Scenario & Task 2: The core task (as with most non-profit organizations) is to donate money to the foundation. I asked the users to locate and follow the donation flow as if they were supporting the cause.
 
 
Findings
 
Core findings:
 
- 2/5 users believed that the navigational contents were too condensed making it hard on the eye.
 
- Similarly, and specific to task #2, the “Donate” navigation option felt hidden to users & not “eye-catching” enough, quoting: 
 
“I feel like Donate should pop more”
 
- 4/5 users felt frustration and experienced an error within the sub-content drop-downs. 
 
The drop-down bar when clicked has an inconsistent experience, staying expanded for specific pages, and disappearing for other page loads - leaving users slightly confused that they’re in the right place they’re supposed to be.
 
 
 
 
The Solves
 
 
 
1-2. Simplified the global top navigation:
- Leveraging the width of the browser for responsive
- Separating the core browsing content between the core task CTAs (Donate and Shop)
- Made the core CTAs more actionable for better conversion (leveraging stand out buttons vs. links)
- Creating more room for additional navigation content elements
 
3. Designed a consistent "list layout" drop-down nav for sub category content 
 
4. Introduced breadcrumb navigation for transparent browsing so the user knows where they are at all times
 
5. Introduced a newsletter subsription CTA for newly created content / company updates
 
6. Moved "Contact Us" and social CTAs to global footer to gain more real estate in the main navigation
 
 
 
Updated UI Designs
 
 
 
 
New Drop Down State
 
 
 
 
Breadcrumb Element