Select Page
The Gatesman Site

The Gatesman Site

The Ask

In the spring of 2017 the Gatesman site was due for an update. Our team had been seeing some cool trends and technologies that we were excited to try out. The main goals for the new site were:

  • Easy navigation that focused on the most importaint pages for our target audience 
  • Modern look and feel, innovative

Competitive Analysis

For this project I worked as the Lead UX Architect in tandem with Kelsey Pledger, Junior UX Designer. First we defined our target audience (Director level and above in Marketing, Branding, PR, Corporate Communications, etc. Roughly ages 35-54) and then took a deep dive into industry websites to gleam some more insight on the latest trends. A few of the largest findings via the competitive analysis were:

  • Utilize new “always hamburger menu” trend for space and function. Include word “Menu”
  • Reduce number of pages & case studies (all competitors had far fewer than us)
  • Increase the quality of case study content to tell the story
  • Talk like an industry leader. Example using terms like “expertise” over “capabilities”
  • Modern and Clean: Large fonts, background video, full screen scrolls
  • Consistent call-to-action across the site, contact us

Interactive Wireframes

Since the layout of the site was drastically different from the previous layout, we decided to create interactive wireframes to communicate our ideas to the team. This included clickable links and a working navigation.

Check out our Interactive Wireframes >


Working under Matt Axman, Creative Director at Gatesman, I created the interface design for a handful of pages on the site. 

The White House Frontiers Conference 2016

The White House Frontiers Conference 2016

Executive Approval

When your work is being directly approved by The White House, it’s pretty exciting, but challenging. In the late summer of 2016, Gatesman was charged with the task of creating a site for The White House, hosted by Carnegie Mellon University and The University of Pittsburgh. The timeline was very tight, the design and function needed to be simple but innovative, and above all ADA compliant with section 508 and accessible by ALL users.


For this project I led the User Experience efforts, working in tandem with Kelsey Pledger a Junior UX Designer. The site was designed by Matt Axman and developed by Mike Wellman.

This project had a very quick, 3 week turn around. So opposed to our usual phased approach (Discovery, UX, Design, Development) we had to make sure to really work collaboratively which often meant just sitting together, making design and UX decisions in our dev site. 

The direction was “simple but innovative” and was executed with a clean vibrant design and subtle CSS3 animations.

Frontiers Sitemap

CMU Strategic Plan 2025 Website

CMU Strategic Plan 2025 Website

I was responsible for the research and user experience for the Carnegie Mellon University 2025 Strategic Plan website at Gateman. With lots of inter-connecting content, the greatest challenge was making sure that the user could flow through the large amount of copy without getting lost or overwhelmed.

My project deliverables:

  • Competitive Analysis
  • Sitemaps
  • Wireframes

The design was created by the talented Braden MacKey.

StarKist® Website

StarKist® Website

Landing The Job

StarKist® came to Gatesman realizing the importance of responsive design asking if we could retrofit their current website. From experience, I know that this process can take just as much time as rebuilding the site from scratch and advised them to consider a total overhaul. Working with the creative director, Jeff Barton, we did some research into popular modern CPG sites and came up with a few designs to get them excited. As the Lead User Experience Designer on the team, I started with a competitive and comparative analysis with leaders in the CPG arena that included brands like Bumble Bee Tuna, Chicken of the Sea, Hidden Valley, Smuckers, and Uncle Ben.

The Right Structure

We concentrated heavily on information architecture because of StarKist’s extensive product offering. We wanted to make sure that the content was organized in a way that the user was familiar with when purchasing tuna. We discussed all of the options: Do they shop by flavor? Packaging? Size? Price? Focus groups were conducted to gain insights on tuna consumption. In the end, we needed a solution that would make sense for both how the user shopped as well as a structure that would allow growth as StarKist added new products and potentially different seafoods came onboard. In addition, I created user flows for their community area that includes touch points with email and social.


Time Increase in Session Durations

We <3 Charlie

This was a super exciting and fun project for everyone involved. Another large opportunity was to capitalize on such a beloved personality, Charlie the Tuna, and to inject small surprises throughout the site. The team really rocked it. The initial site was designed by the very talented Arther Germer.

University Website User Personas

University Website User Personas

The Challenge

Older University websites are known to become large and bloated over the years. In this project example, the site I was working on was up to 7,800 pages and counting. Lots of duplicate content had been created between departments due to a multitude of publishers that had little contact with one another, as well as a lack of ownership and central governance. To top it off, the target audience, Prospective Students was forgotten. It even included public pages that were intended for internal administrations eyes only.

The Solution

We started by reading previous research articles provided by a trusted partner. This helped us to get into the mind of the targets and then formulate questions to conduct user surveys for each of the three main targets: high-school students, alumni, and donors. The audience matrix above was used heavily when creating the new sitemap to determine what content could stay and what could go as well as the priority. We got the sitemap down to 500 quality targeted pages.

Information Architecture Guidelines

Information Architecture Guidelines

A Quick Cheat Sheet

Over the past few months I have been working on an quick cheat sheet to give clients when we first start looking at their sitemap. The goal is to set some rules up front about naming and structure.

Here are my four fast rules for website IA in no particular order: trigger words, simplicity, proximity and priority.

Navigation Links & Site Structure Best Practices

Below are the first steps for creating easy to use navigation on your site:

  • Users look for trigger words when trying to perform a task on a website. These words are short and to the point, or are used consistently across the internet or by your competitors. In regards to navigation, it is best to try to keep link titles as simple as possible for fast, easy recognition. Remove any repetition.
  • Less is more. Decision paralysis occurs when the user is presented with too many options that they don’t understand. It is best to try to make a decision obvious. Try to limit main navigation options to 8 links or sections.
  • Proximity is an important cue for the user. People have a tendency to recognize stronger relationships between objects that are located close to one another. Items that are like should be grouped together for fast and easy recognition.
  • Priority is another important cue. Placing items in highly visible spots on a site, like the first and last items in a horizontal navigation bar, ensures the user will locate this item easily.

Do you like the fast four? Have something to add? Let me know, email me!