Pat Tillman Foundation :: Navigation Optimizations
  • Add to Collection
  • About


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

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. 
- 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
- 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.
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