Nathan E. Pierce

---

Web. Designer. Developer.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

During my time at Feeding America, I conceived, devised, managed, and personally executed a campaign to reduce site-wide page load time, resulting in a projected increase in revenue of $4-10M annually. This project involved forecasting a model to better understand potential returns on increased site speed; building an optimized version of the homepage and donation form, which looked identical to the user but utilized many innovative techniques to reduce the page load time; converting images to the proper format and optimizing them; performing a formal script review to identify inefficiencies in third party JavaScript libraries and either updating them to the most recent version, removing them and writing my own JavaScript, or replacing the library with a different, more efficient, library; integrating New Relic, a software analytics company, into the site in order to gain insight into real-time, real user page load times; and tracking results to audit the forecast and measure changes in donation conversion rates and dollar-amounts gained. Ultimately, the optimized homepage achieved a 58.5% reduction in page load time (15.72s down to 6.53s), led 20% more visitors to the donation form, fostered an 87% increase in conversion rate, and a 50% increase in donations. Given its success, Feeding America immediately implemented the test version in place of the control homepage and continued to monitor page load times moving forward with the visitor’s experience in mind.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

As part of the Site Speed Optimization Campaign, I built an optimized version of the homepage. This version looked identical to the user but utilized many innovative techniques to reduce the page load time, including: converting images to the proper format and optimizing them; performing a formal script review to identify inefficiencies in third party JavaScript libraries and either updating them to the most recent version, removing them and writing my own JavaScript, or replacing the library with a different, more efficient, library; using image sprites instead of multiple small images or using html and css to create basic images/icons instead of downloading multiple images; cleaning up a lot of unnecessary/redundant code (HTML, CSS and JavaScript); concatenating and minifying all code, and uglified JS, compressed HTML, CSS, and JS; optimizing the downloading and execution of external scripts by setting to defer or async; using mobile-first, responsive design; caching files and configuring ETags; using external CSS and JS files; removing unnecessary URL redirects; and using CDNs where possible. Upon completion of the optimized homepage, I created an A/B test using the Optimizely platform in order to see how the faster experience would affect the user’s session and actions. In order to gain insight into real-time, real user page load times, I added an integration with New Relic, a software analytics company. Ultimately, the optimized homepage achieved a 58.5% reduction in page load time (15.72s down to 6.53s) with real users on all internet connection types and all devices. This, along with other updates, led 20% more visitors to the donation form, fostered an 87% increase in conversion rate, and a 50% increase in donations. Given the campaign’s success, Feeding America immediately implemented the test version in place of the control homepage and continued to monitor page load times moving forward with the visitor’s experience in mind.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

The Content Strategy Site Refresh included 3 stages of minor redesigns for a few key pages. Batch 1 included a refresh of the homepage, Hunger in America, Our Network, and Take Action. Batch 2 included a refresh of Impact of Hunger, Our Network, Our Approach, and Real Stories of Hunger. Batch 3 included a refresh of Child Hunger Facts, Raise Your Voice, Food Waste, and the State Hunger pages. The design and development was a collaboration between myself and Feeding America’s vendor, Blackbaud—with them taking the lead—while I led the QA/QC—which I did for all site updates on multiple device types in all major browsers, and developed a QA/QC process for other co-workers to follow.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

Feeding America’s Give A Meal Campaign is an annual campaign that includes a 2 to 1 match by Bank of America on all donations made from November to January. That is, for every $1 donated, the Bank of America Charitable Foundation will give $2 more, up to $1.5 million—giving donors the opportunity to triple their impact during the holiday season.

As part of this campaign, I was tasked with creating an “image” that is displayed on the “Thank you/Donation Confirmation” page. The “image” needed to be dynamic: a calculation needed to be performed that would take the dollar amount donated, multiply that by the Bank of America match, and then convert that to meals. There were a few caveats, though: the match was capped at $1,000 per donation, and the total match by Bank of America maxed out at $1.5 million. The image also needed to include social links to share the details of the donation on Facebook and Twitter—again including the calculated number of meals donated. All of this was to be positioned on a background image of an empty plate on a tablecloth. This dynamic image was created for the 2017 version of the Give A Meal Campaign and has been used every year since then. Before the creation of this dynamic image, Feeding America had created thousands of unique images with a different number of meals donated on each one. Every year, if the meal calculation had changed, then the thousands of images needed to be updated, manually. This project allowed for a more efficient way of making updates, as necessary, and included a single image and a small amount of javascript, instead of thousands of images.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

Led the design and development of all major redesigns on the site. I created wireframes, mockups, and prototypes in order to convey ideas and gain buy-in from company stakeholders. I solved inefficiencies in existing code and designs, improving the function of all pages and the outcomes of donation campaigns. Some of the pages redesigned include Child Hunger, Child Hunger Facts, Teach Kids About Hunger, Why Feeding America?, Holiday Partner Promotions, Giving Tuesday, Food Rescue, Advocacy, Hunger and Food Insecurity, among others.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

I created an array of components for the site, including multiple sets of icons, inline promos, accordions, forms, a sticky condensed masthead, an “oranges” section with links to take action, and a redesigned footer.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

The donation forms are arguably the most important part of the Feeding America site. Making sure that these pages are as efficient and user-friendly as possible is of great concern. In order to gain insight into what was working—and what wasn’t—I partnered with the Senior Manager of Analytics & Measurement Strategy to conduct a multitude of tests with Optimizely and Google Analytics. A few of the different A/B tests that I created and conducted were: a condensed version (which removed a lot of unnecessary whitesapce); a hunger council version (which promoted a higher donation amount and offered the donor an opportunity to join the Hunger Council club); a social pressure version (which promoted a certain donation amount and informed the user that the average donor is giving that amount); an optimized version (which removes as many inefficiencies as possible in order to improve page load time and thus improve user satisfaction); a pampered chef version (which promoted a monthly donation as opposed to a one-time donation and offered donors a Monthly Pampered Chef Recipe); a multi-step version (which broke down the donation form into smaller, logical steps); as well as some other minor updates (including standard buttons vs radio buttons). These tests helped me solve inefficiencies in existing code and designs, improving the function and outcomes of the donation campaigns.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

I created images for use on our Facebook, Twitter and Instagram accounts, as requested by the Sr. Manager of Social Media & Content Strategy.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

I addressed the Information Architecture by renaming pages to be more SEO-friendly, adding breadcrumbs, regrouping pages, prioritizing content and user pathways to increase clarity and reduce clutter, and removing low-value redundant pages.

Served as lead designer and developer for FeedingAmerica.org, the nation’s largest domestic hunger-relief organization.

As the sole Web Designer and Developer, I was the point person for all questions regarding the site. I shared knowledge and educated others, both within and outside the organization, by means of: training new members of the marketing team on the CMS; creating code snippets and page templates for non-technical content authors, including an interactive help page to assist them in using variables (the page listed all reusable metrics in our database, and allowed the content author to obtain the proper code snippet for said metric by clicking a button); and educating partner’s developers on best practices and efficiency strategies. Some other minor projects included: updating the Jobvite Mobile pages to use the Feeding America color scheme and fixing a few other bugs; creating a knowledge panel for Google, and other search engines, with structured data; and helping to update the Feeding America Style Guide (for both online and print).

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership’s requests.

I wanted to present a new-look homepage for Camelback Volkswagen. Their homepage was in need of a refresh and instead of a few small tweaks, I thought bold designs and new ideas were the way to go. I used their primary color, “Camelback Blue,” and their secondary color, “Camelback Orange,” throughout the homepage. Large images, splashes of vibrant color, elements that extend beyond the page and new techniques with CSS3 cover this page. The text-based pattern above the footer, which lists all VW models, is just that—text. Most designers/developers would simply use an image, but I chose to use actual text so that it improves SEO. Each model name is rotated and clipped to a container, so as not to overflow. Each model name is also a link that, when clicked, adds a new style, with transition, and takes the user to all available models in inventory. Upgrades like this were added to improve the appearance of the site, but also the function and performance.

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership’s requests.

This page was also in dire need of a redesign. As you can see, the original page was extremely text heavy and uninspired, and the use of the tired old stock photos in a grid were simply boring. I liked the idea of the “happy customers” appearing in the “14,” representing the fact that Camelback VW has been voted the “#1 Auto Dealer 14 Years in a Row.” But the “14” on the original page didn’t really work. It stuck out, but for the wrong reason. It just came out of no where.

So, in the redesign, I made sure to really make it stand out, in the right way. In fact, I made it come right off the page. I added some glow behind it, because it’s in the limelight, and a large cast shadow, to show how Camelback towers over the competition and leaves a big shadow over them. In addition to the idea of the shadow and what it means, it also creates interesting angles for the text next to it.

Being the BEST for 14 straight years is an amazing accomplishment, so I wanted to make sure to highlight this. As such, I placed it right at the top. And since this page talks about the benefits, perks, and accomplishments of the dealership and their customers, I thought it made sense to surround the entire page in a banner. And finally, The Camelback Difference badge that I created adds another element of intrigue to the page, which grabs the eye of the potential customer and invites them to learn more.

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership’s requests.

While talking with the General Manager of Camelback Volkswagen, he mentioned that he would like an image created that would quickly identify and convey “The Camelback Difference.” I decided that a badge would be the best type of image to create, as it would allow me to use it throughout the site, at both large and small sizes. I designed these badges with a duality in mind: familiarity and awareness. For those who know of The Camelback Difference, I want this badge to serve as a quick reminder. For those who are unaware, I want this badge to be a learning jump-off point.