Select Page
The Gatesman Site

The Gatesman Site

The Gatesman Site

The Gatesman site undertook an overhaul in Spring of 2017. Our team had been seeing some cool trends and technologies that we were excited to use ourselves for some testing. 

    Getting Started

    I worked as the UX Lead in tandem with Kelsey Pledger, Junior UX Designer. We defined our target audience. Most people who contacted us for work were Director level and above in Marketing, Branding, PR,  or Corporate Communications. 

    We took a deep dive with the users and did a competitive analysis on industry websites to gleam some more insight on the latest trends. A few of the largest recommendations were:

    • Utilizing a new “always hamburger menu” allowed for more space and function.
    • We included the word “Menu” based on user feedback.
    • Users were overwhelmed and reducing the number of pages & case studies could help narrow focus.
    • Increase the quality of case study content to really tell the story of our work. Users wanted to know the process and that their is a real strategy behind our work.
    • Adjust language and talk like an industry leader. Example using terms like “expertise” over “capabilities”
    • Modern and Clean: Large fonts, background video, full screen scrolls
    • Consistent, focused 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 >

    Designs

    Working with 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

    The White House Frontiers Conference 2016

    Screams ran through the office “OBAMA IS LOOKING AT MY DESIGNS!”

    When your work is being directly approved by The White House, it’s pretty exciting, but challenging.
     

    In the late summer of 2016, Gatesman stepped up to create a site for The White House, hosted by Carnegie Mellon University and The University of Pittsburgh. The timeline was very tight, the design and functionality all needed to be simple but innovative, MVP style… and above all ADA compliant with section 508 and accessible by ALL users.

    Go! Go! Go!

    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 the talented Mike Wellman.

    This project had a very quick, 3 week turn around.

    Our team was used to working in a formal waterfall process: research, information architecture, wireframes, mock-ups, then development. In this case, we didn’t have time for the whole blown out process, so we got scrappy. I facilitated collaborative white board sessions that included all disciplines. We worked together on the sitemap and wires and did a lot of design browser.

    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

    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

    StarKist® Website

    StarKist came to Gatesman with the realization that they were soon to be losing the majority of their traffic to mobile devices… but their website, was not mobile friendly. They wanted a retrofit. To use what they had and make it conform for smaller screens.

    From experience, I know that this process can take just as much time as rebuilding the site from scratch and we advised the client to consider a total overhaul.

    Competitive Research
    Working with creative director, Jeff Barton, we did some research into popular modern CPG sites and came up with a few responsive designs to get them excited. As the lead 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.

    User Research
    We wanted to make sure that the content was organized in a way that the user was familiar with when purchasing tuna. We did some card sorts and focus groups with our users to answer the questions: Do they shop by flavor? Packaging? Size? Price? We gain insight into 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.

    I created the IA for the new site and user flows for the community area that included touch points with email and social.

    %

    Time Increase in Session Durations

    University Website User Personas

    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.

    House of Tsang® Web Site

    With Gatesman+Dave I had the opportunity to help create a web site for the Hormel food brand, House of Tsang®. I was responsible for the creating user experience & visual design along-side a team of developers and other creatives.

    The responsive site had a very fast turn around and went from concept to completion in about 6 weeks.

    *A very talented concept artist, Dani Kruse, is responsible for all of the pretty illustrations that you see.

    Tsang Wireframes

    Tsang Sitemap

    Tsang Home page