Nathan E. Pierce
Web. Designer. Developer.

Client List

Filter

Select All Clear All

Feeding America

Site Speed Optimization Campaign

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
March, 2016 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, UX, IA, IxD, QA, QC, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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.

Optimized Homepage Test Results (Avg. Page Load)
Optimized Homepage Test Results (Avg. Page Load)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, All Devices & Desktop)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, All Devices & Desktop)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, Tablet & Mobile)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, Tablet & Mobile)
Optimization Campaign Results (Homepage, Donation Form, All Pages: Basic v. Moderate v. Advanced Optimization)
Optimization Campaign Results (Homepage, Donation Form, All Pages: Basic v. Moderate v. Advanced Optimization)
Image Optimization Results
Image Optimization Results
Image Optimization Results (First Pass—High Traffic Pages)
Image Optimization Results (First Pass—High Traffic Pages)
Image Optimization Results (Overview)
Image Optimization Results (Overview)
Image Optimization Results (By Page)
Image Optimization Results (By Page)
Image Optimization Results (Homepage Only)
Image Optimization Results (Homepage Only)
JavaScript and CSS Optimization Results (Homepage Only)
JavaScript and CSS Optimization Results (Homepage Only)

Optimized Homepage

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
August, 2017 – October, 2017
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, UX, IA, IxD, QA, QC, 2017, Non-profit, Chicago, Illinois

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.

Feeding America Homepage, Optimized, Desktop
Feeding America Homepage, Optimized, Desktop
Feeding America Homepage, Optimized, Tablet
Feeding America Homepage, Optimized, Tablet
Feeding America Homepage, Optimized, Mobile
Feeding America Homepage, Optimized, Mobile
Optimized Homepage Test Results (Avg. Page Load)
Optimized Homepage Test Results (Avg. Page Load)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, All Devices & Desktop)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, All Devices & Desktop)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, Tablet & Mobile)
Optimized Homepage Test Results (Graph, Daily Avg. Page Load, Tablet & Mobile)
Optimization Campaign Results (Homepage, Donation Form, All Pages: Basic v. Moderate v. Advanced Optimization)
Optimization Campaign Results (Homepage, Donation Form, All Pages: Basic v. Moderate v. Advanced Optimization)
Image Optimization Results (Homepage Only)
Image Optimization Results (Homepage Only)
JavaScript and CSS Optimization Results (Homepage Only)
JavaScript and CSS Optimization Results (Homepage Only)

Content Strategy Site Refresh

Role
QA/QC Lead, Supporting Designer, Supporting Developer
Dates
May, 2016 – April, 2017
Tags
QA, QC, Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, 2016, 2017, Non-profit, Chicago, Illinois

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.

Feeding America Homepage (Original, aka “The Before”, Desktop)
Feeding America Homepage (Original, aka “The Before”, Desktop)
Feeding America Homepage (Redesign, aka “The After”, Desktop)
Feeding America Homepage (Redesign, aka “The After”, Desktop)
Feeding America Homepage (Redesign, aka “The After”, Desktop with Sticky Masthead)
Feeding America Homepage (Redesign, aka “The After”, Desktop with Sticky Masthead)
Feeding America Homepage (Original, aka “The Before”, Tablet)
Feeding America Homepage (Original, aka “The Before”, Tablet)
Feeding America Homepage (Redesign, aka “The After”, Tablet)
Feeding America Homepage (Redesign, aka “The After”, Tablet)
Feeding America Homepage (Redesign, aka “The After”, Tablet with Sticky Masthead)
Feeding America Homepage (Redesign, aka “The After”, Tablet with Sticky Masthead)
Feeding America Homepage (Original, aka “The Before”, Mobile)
Feeding America Homepage (Original, aka “The Before”, Mobile)
Feeding America Homepage (Redesign, aka “The After”, Mobile)
Feeding America Homepage (Redesign, aka “The After”, Mobile)
Feeding America Homepage (Redesign, aka “The After”, Mobile with Sticky Masthead)
Feeding America Homepage (Redesign, aka “The After”, Mobile with Sticky Masthead)
Feeding America Homepage (Redesign, aka “The After”, Mobile with Sticky Masthead, Slid Off)
Feeding America Homepage (Redesign, aka “The After”, Mobile with Sticky Masthead, Slid Off)
Hunger in America (Original, aka “The Before”, Desktop)
Hunger in America (Original, aka “The Before”, Desktop)
Hunger in America (Redesign, aka “The After”, Desktop)
Hunger in America (Redesign, aka “The After”, Desktop)
Hunger in America (Original, aka “The Before”, Tablet)
Hunger in America (Original, aka “The Before”, Tablet)
Hunger in America (Redesign, aka “The After”, Tablet)
Hunger in America (Redesign, aka “The After”, Tablet)
Hunger in America (Original, aka “The Before”, Mobile)
Hunger in America (Original, aka “The Before”, Mobile)
Hunger in America (Redesign, aka “The After”, Mobile)
Hunger in America (Redesign, aka “The After”, Mobile)
Our Work (Original, aka “The Before”, Desktop)
Our Work (Original, aka “The Before”, Desktop)
Our Work (Redesign, aka “The After”, Desktop)
Our Work (Redesign, aka “The After”, Desktop)
Our Work (Original, aka “The Before”, Tablet)
Our Work (Original, aka “The Before”, Tablet)
Our Work (Redesign, aka “The After”, Tablet)
Our Work (Redesign, aka “The After”, Tablet)
Our Work (Original, aka “The Before”, Mobile)
Our Work (Original, aka “The Before”, Mobile)
Our Work (Redesign, aka “The After”, Mobile)
Our Work (Redesign, aka “The After”, Mobile)
Take Action (Original, aka “The Before”, Desktop)
Take Action (Original, aka “The Before”, Desktop)
Take Action (Redesign, aka “The After”, Desktop)
Take Action (Redesign, aka “The After”, Desktop)
Take Action (Original, aka “The Before”, Tablet)
Take Action (Original, aka “The Before”, Tablet)
Take Action (Redesign, aka “The After”, Tablet)
Take Action (Redesign, aka “The After”, Tablet)
Take Action (Original, aka “The Before”, Mobile)
Take Action (Original, aka “The Before”, Mobile)
Take Action (Redesign, aka “The After”, Mobile)
Take Action (Redesign, aka “The After”, Mobile)
Impact of Hunger (Original, aka “The Before”, Desktop)
Impact of Hunger (Original, aka “The Before”, Desktop)
Impact of Hunger (Redesign, aka “The After”, Desktop)
Impact of Hunger (Redesign, aka “The After”, Desktop)
Our Network (Original, aka “The Before”, Desktop)
Our Network (Original, aka “The Before”, Desktop)
Our Network (Redesign, aka “The After”, Desktop)
Our Network (Redesign, aka “The After”, Desktop)
Our Approach (Original, aka “The Before”, Desktop)
Our Approach (Original, aka “The Before”, Desktop)
Our Approach (Redesign, aka “The After”, Desktop)
Our Approach (Redesign, aka “The After”, Desktop)
Real Stories of Hunger (Original, aka “The Before”, Desktop)
Real Stories of Hunger (Original, aka “The Before”, Desktop)
Real Stories of Hunger (Redesign, aka “The After”, Desktop)
Real Stories of Hunger (Redesign, aka “The After”, Desktop)
Child Hunger Facts (Original, aka “The Before”, Desktop)
Child Hunger Facts (Original, aka “The Before”, Desktop)
Child Hunger Facts (Redesign, aka “The After”, Desktop)
Child Hunger Facts (Redesign, aka “The After”, Desktop)
Raise Your Voice (Original, aka “The Before”, Desktop)
Raise Your Voice (Original, aka “The Before”, Desktop)
Raise Your Voice (Redesign, aka “The After”, Desktop)
Raise Your Voice (Redesign, aka “The After”, Desktop)
Food Waste (Original, aka “The Before”, Desktop)
Food Waste (Original, aka “The Before”, Desktop)
Food Waste (Redesign, aka “The After”, Desktop)
Food Waste (Redesign, aka “The After”, Desktop)
Food Waste (Redesign, aka “The After”, Tablet)
Food Waste (Redesign, aka “The After”, Tablet)
Food Waste (Redesign, aka “The After”, Mobile)
Food Waste (Redesign, aka “The After”, Mobile)
State Hunger Pages, Michigan (Redesign, aka “The After”, Desktop)
State Hunger Pages, Michigan (Redesign, aka “The After”, Desktop)
State Hunger Pages, New Hampshire (Redesign, aka “The After”, Desktop)
State Hunger Pages, New Hampshire (Redesign, aka “The After”, Desktop)
State Hunger Pages, Washington (Redesign, aka “The After”, Desktop)
State Hunger Pages, Washington (Redesign, aka “The After”, Desktop)

Bank of America and the Give A Meal Campaign

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
August, 2017 – September, 2017
Tags
Web Design, Web Development, Images, SEO, UI, QA, QC, 2017, Non-profit, Chicago, Illinois

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.

Bank of America and the Give A Meal Campaign
Bank of America and the Give A Meal Campaign

Web Page Redesigns

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
March, 2016 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, IA, IxD, QA, QC, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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.

Child Hunger (Original, aka “The Before”, Desktop)
Child Hunger (Original, aka “The Before”, Desktop)
Child Hunger (Redesign, aka “The After”, Desktop)
Child Hunger (Redesign, aka “The After”, Desktop)
Child Hunger (Original, aka “The Before”, Tablet)
Child Hunger (Original, aka “The Before”, Tablet)
Child Hunger (Redesign, aka “The After”, Tablet)
Child Hunger (Redesign, aka “The After”, Tablet)
Child Hunger (Original, aka “The Before”, Mobile)
Child Hunger (Original, aka “The Before”, Mobile)
Child Hunger (Redesign, aka “The After”, Mobile)
Child Hunger (Redesign, aka “The After”, Mobile)
Child Hunger Facts (Redesign, aka “The After”, Desktop)
Child Hunger Facts (Redesign, aka “The After”, Desktop)
Teach Kids About Hunger (Original, aka “The Before”, Desktop)
Teach Kids About Hunger (Original, aka “The Before”, Desktop)
Teach Kids About Hunger (Redesign, aka “The After”, Desktop)
Teach Kids About Hunger (Redesign, aka “The After”, Desktop)
Teach Kids About Hunger (Redesign, aka “The After”, Desktop, Expanded Accordions)
Teach Kids About Hunger (Redesign, aka “The After”, Desktop, Expanded Accordions)
Teach Kids About Hunger (Redesign, aka “The After”, Tablet)
Teach Kids About Hunger (Redesign, aka “The After”, Tablet)
Teach Kids About Hunger (Redesign, aka “The After”, Tablet, Expanded Accordions)
Teach Kids About Hunger (Redesign, aka “The After”, Tablet, Expanded Accordions)
Teach Kids About Hunger (Redesign, aka “The After”, Mobile)
Teach Kids About Hunger (Redesign, aka “The After”, Mobile)
Teach Kids About Hunger (Redesign, aka “The After”, Mobile, Expanded Accordions)
Teach Kids About Hunger (Redesign, aka “The After”, Mobile, Expanded Accordions)
Why Feeding America? (Original, aka “The Before”, Desktop)
Why Feeding America? (Original, aka “The Before”, Desktop)
Why Feeding America? (Redesign, aka “The After”, Desktop)
Why Feeding America? (Redesign, aka “The After”, Desktop)
2016 Holiday Partner Promotions (Original, aka “The Before”, Desktop)
2016 Holiday Partner Promotions (Original, aka “The Before”, Desktop)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Desktop)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Desktop)
2016 Holiday Partner Promotions (Original, aka “The Before”, Tablet)
2016 Holiday Partner Promotions (Original, aka “The Before”, Tablet)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Tablet)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Tablet)
2016 Holiday Partner Promotions (Original, aka “The Before”, Mobile)
2016 Holiday Partner Promotions (Original, aka “The Before”, Mobile)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Mobile)
2016 Holiday Partner Promotions (Redesign, aka “The After”, Mobile)
What Is Food Insecurity? (Redesign, aka “The After”, Desktop)
What Is Food Insecurity? (Redesign, aka “The After”, Desktop)
Advocate (Original, aka “The Before”, Desktop)
Advocate (Original, aka “The Before”, Desktop)
Advocate (Redesign, aka “The After”, Desktop)
Advocate (Redesign, aka “The After”, Desktop)
Food Nutrition Assistance Programs (Original, aka “The Before”, Desktop)
Food Nutrition Assistance Programs (Original, aka “The Before”, Desktop)
Food Nutrition Assistance Programs (Redesign, aka “The After”, Desktop)
Food Nutrition Assistance Programs (Redesign, aka “The After”, Desktop)
Healthy Communities Need Healthy Foods (Redesign, aka “The After”, Desktop)
Healthy Communities Need Healthy Foods (Redesign, aka “The After”, Desktop)
Hunger Blog (Redesign, aka “The After”, Desktop)
Hunger Blog (Redesign, aka “The After”, Desktop)
Need Help? Find Food. (Original, aka “The Before”, Desktop)
Need Help? Find Food. (Original, aka “The Before”, Desktop)
Need Help? Find Food. (Redesign, aka “The After”, Desktop)
Need Help? Find Food. (Redesign, aka “The After”, Desktop)
Need Help? Find Food. (Redesign, aka “The After”, Desktop, Expanded Accordions)
Need Help? Find Food. (Redesign, aka “The After”, Desktop, Expanded Accordions)
Importance of Nutrition on Health in America (Original, aka “The Before”, Desktop)
Importance of Nutrition on Health in America (Original, aka “The Before”, Desktop)
Importance of Nutrition on Health in America (Redesign, aka “The After”, Desktop)
Importance of Nutrition on Health in America (Redesign, aka “The After”, Desktop)
Senior Hunger Facts (Original, aka “The Before”, Desktop)
Senior Hunger Facts (Original, aka “The Before”, Desktop)
Senior Hunger Facts (Redesign, aka “The After”, Desktop)
Senior Hunger Facts (Redesign, aka “The After”, Desktop)
Volunteer (Original, aka “The Before”, Desktop)
Volunteer (Original, aka “The Before”, Desktop)
Volunteer (Redesign, aka “The After”, Desktop)
Volunteer (Redesign, aka “The After”, Desktop)

Website Components

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
March, 2016 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, IxD, QA, QC, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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.

Pie Charts (High Blood Pressure, Diabetes, Health Care)
Pie Charts (High Blood Pressure, Diabetes, Health Care)
Pie Charts, Bar Chart and Arrows
Pie Charts, Bar Chart and Arrows
Icon Set (Green: Repeat a Grade, Developmental Impairment, Social Problems)
Icon Set (Green: Repeat a Grade, Developmental Impairment, Social Problems)
Icon Set (Orange: BackPack Program, Kids Cafe, Summer Food Service Programs, School Pantry Programs, SNAP)
Icon Set (Orange: BackPack Program, Kids Cafe, Summer Food Service Programs, School Pantry Programs, SNAP)
Text-based Iconography: 15.3M
Text-based Iconography
Text-based Iconography: 103M
Text-based Iconography
Text-based Iconography: 2x
Text-based Iconography
Text-based Iconography: Less than 5 years old
Text-based Iconography
Expanded Accordion (Kids Books About Hunger)
Expanded Accordion (Kids Books About Hunger)
Expanded Accordion (Questions for Kids After Volunteering)
Expanded Accordion (Questions for Kids After Volunteering)
Typography Art: A child’s chance at a bright tomorrow starts with having enough good, healthy food today.
Typography Art
Typography Art, version 2: A child’s chance at a bright tomorrow starts with having enough good, healthy food today.
Typography Art, version 2
Forms (Join General Mailing List, Join Action Alerts Mailing List and Texting List)
Forms (Join General Mailing List, Join Action Alerts Mailing List and Texting List)
Inline Seed Promo (Desktop)
Inline Seed Promo (Desktop)
Inline Seed Promo (Tablet)
Inline Seed Promo (Tablet)
Food Insecurity Definition, Hero Image
Food Insecurity Definition, Hero Image
Feeding America Homepage (Original, aka “The Before”, Desktop)
Feeding America Homepage (Original, aka “The Before”, Desktop)
Feeding America Homepage (Redesign, aka “The After”, Desktop, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Desktop, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Desktop, showing a sticky condensed masthead)
Feeding America Homepage (Redesign, aka “The After”, Desktop, showing a sticky condensed masthead)
Feeding America Homepage (Original, aka “The Before”, Tablet)
Feeding America Homepage (Original, aka “The Before”, Tablet)
Feeding America Homepage (Redesign, aka “The After”, Tablet, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Tablet, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Tablet, showing a sticky condensed masthead)
Feeding America Homepage (Redesign, aka “The After”, Tablet, showing a sticky condensed masthead)
Feeding America Homepage (Original, aka “The Before”, Mobile)
Feeding America Homepage (Original, aka “The Before”, Mobile)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing an “oranges” section with links to take action, and a redesigned footer)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing a sticky condensed masthead, Slid Off)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing a sticky condensed masthead, Slid Off)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing a sticky condensed masthead, Slid On)
Feeding America Homepage (Redesign, aka “The After”, Mobile, showing a sticky condensed masthead, Slid On)

Donation Forms

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
March, 2016 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, UX, IxD, QA, QC, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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.

Feeding America Donation Form, Hunger Council Test
Feeding America Donation Form, Hunger Council Test
Feeding America Donation Form, Hunger Council Test, Version 2
Feeding America Donation Form, Hunger Council Test, Version 2

Social Images

Role
Lead Designer
Dates
March, 2016 – January, 2018
Tags
Web Design, Logos, Images, Icons, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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.

Social Image, Square (Giving Tuesday, Giving Food Day)
Social Image, Square (Giving Tuesday, Giving Food Day)
Social Image, Square, Version 2 (Giving Tuesday, Giving Food Day)
Social Image, Square, Version 2 (Giving Tuesday, Giving Food Day)
Social Image, Square, Version 3 (Giving Tuesday, Giving Food Day)
Social Image, Square, Version 3 (Giving Tuesday, Giving Food Day)
Social Image, Rectangle (Giving Tuesday, Giving Food Day)
Social Image, Rectangle (Giving Tuesday, Giving Food Day)
Social Image, Rectangle, Version 2 (Giving Tuesday, Giving Food Day)
Social Image, Rectangle, Version 2 (Giving Tuesday, Giving Food Day)
Social Image, Rectangle, Version 3 (Giving Tuesday, Giving Food Day)
Social Image, Rectangle, Version 3 (Giving Tuesday, Giving Food Day)

Information Architecture (IA)

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
June, 2017 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, IA, QA, QC, 2017, 2018, Non-profit, Chicago, Illinois

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.

Information Architecture (IA) Updates (Breadcrumbs, Regrouping of Pages, Optimizing User Pathways, Secondary Navigation in Footer)
Information Architecture (IA) Updates (Breadcrumbs, Regrouping of Pages, Optimizing User Pathways, Secondary Navigation in Footer)

Additional Projects

Role
Lead Designer, Lead Developer, QA/QC Lead
Dates
March, 2016 – January, 2018
Tags
Web Design, Web Development, Responsive Web Design, RWD, Mobile-First Design, SEO, Logos, Images, Icons, UI, IxD, QA, QC, 2016, 2017, 2018, Non-profit, Chicago, Illinois

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

Reusables (Interactive Help Page for using Site Variables)
Reusables (Interactive Help Page for using Site Variables)
Jobvite (Original, aka “The Before”, Mobile)
Jobvite (Original, aka “The Before”, Mobile)
Jobvite (Redesign, aka “The After”, Mobile)
Jobvite (Redesign, aka “The After”, Mobile)
Jobvite, Jobs Expanded (Original, aka “The Before”, Mobile)
Jobvite, Jobs Expanded (Original, aka “The Before”, Mobile)
Jobvite, Jobs Expanded (Redesign, aka “The After”, Mobile)
Jobvite, Jobs Expanded (Redesign, aka “The After”, Mobile)
Style Guide, Inline Seed Promo, Template
Style Guide, Inline Seed Promo, Template

Camelback Volkswagen

Homepage

Role
Lead Designer, Lead Developer
Dates
January, 2013 – April, 2013
Tags
Web Design, Web Development, Logos, Images, Icons, UI, 2013, Automotive, Volkswagen, Phoenix, Arizona

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 Homepage (Original, aka “The Before”)
Camelback Volkswagen Homepage (Original, aka “The Before”)
Camelback Volkswagen Homepage (Redesign, aka “The After”)
Camelback Volkswagen Homepage (Redesign, aka “The After”)
Camelback Volkswagen, Hero
Camelback Volkswagen, Hero
Camelback Volkswagen, Jetta Ad
Camelback Volkswagen, Jetta Ad
Camelback Volkswagen, #1 Dealer
Camelback Volkswagen, #1 Dealer

Camelback Volkswagen: The Camelback Difference

Role
Lead Designer, Lead Developer
Dates
January, 2013 – April, 2013
Tags
Web Design, Web Development, Logos, Images, Icons, 2013, Automotive, Volkswagen, Phoenix, Arizona

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.

The Camelback Difference (Original, aka “The Before”)
The Camelback Difference (Original, aka “The Before”)
The Camelback Difference (Redesign, aka “The After”)
The Camelback Difference (Redesign, aka “The After”)
Camelback Volkswagen, Hero
Camelback Volkswagen, Hero
The Camelback Difference, Meaning
The Camelback Difference, Meaning
The Camelback Difference, Thanks
The Camelback Difference, Thanks

Camelback Difference Badges

Role
Lead Designer
Dates
January, 2013 – April, 2013
Tags
Icons, Images, Vector, 2013, Automotive, Volkswagen, Phoenix, Arizona

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.

The Camelback Difference Badges
The Camelback Difference Badges

Zeigler Chevrolet

Homepage Redesign

Role
Lead Designer, Lead Developer
Dates
2012
Tags
Web Design, Web Development, Images, UI, 2012, Automotive, Chevrolet, Illinois

Zeigler Chevrolet of Schaumburg, IL needed help organizing the content on their homepage. They had unused space, positioning issues, dated images, and no clear flow to the content. The page didn’t deliver a coherent message. There was no hierarchy to the content; just a lot of conflicting communication. The Zeigler Chevrolet Homepage Redesign Project was a complete redesign.

In order to establish a starting point, I designed a set of hero images to use in the rotator at the top of the page, which showcased vehicles that the dealer chose. We then eased the visitor in with some high-traffic CTAs.

After that, we introduced the visitor to the vehicles that Zeigler carries. I decided to do this in a space saving way to minimize the footprint of the widget. Next to all of the vehicles, I placed a specials rotator in order to attract those looking for a good deal. You may notice that this section is slightly larger than the rest of the main container. I did that intentionally, as it adds an interesting line to the shape of the page, while pulling the user toward the content.

The next three items were important to the dealer, as they wanted to increase traffic to their finance form, bring in more trade-ins, and inform visitors of the current GM-specific deals.

Their fuel-efficient vehicles were bringing many people to the dealership, so they insisted on leaving that specific banner in place. And finally, after the homepage text, I wanted to bring awareness to their social media accounts, so I added simple icons to the footer for Facebook, Twitter, and their blog.

This redesign required developing a new layout and designing new hero images, CTAs, and a few other assets. Once the design was approved by the client, I built the homepage with our proprietary CMS, HTML5, CSS, and JavaScript.

Zeigler Chevrolet (Original, aka “The Before”)
Zeigler Chevrolet (Original, aka “The Before”)
Zeigler Chevrolet (Redesign, aka “The After”)
Zeigler Chevrolet (Redesign, aka “The After”)

Lexus

Lexus Tires Campaign

Role
Lead Designer, Lead Developer
Dates
2013
Tags
Web Design, Web Development, Images, Landing Page, Advertising, Campaign, 2013, Automotive, Lexus, New Jersey

The Tire Marketing Campaign for Lexus of Cherry Hill consists of a landing page, banner/leaderboard, wide skyscraper, medium rectangle, and coupon. In this campaign, I designed a new look for the main headings, which I call “cut text.” You’ll also notice that I minimized the amount of text and maximized the size of that text and the imagery to create an engaging piece.

Lexus Tire Center (Landing Page)
Lexus Tire Center (Landing Page)
Lexus Tire Center (Landing Page, alt.)
Lexus Tire Center (Landing Page, alt.)
Lexus Tire Center (Landing Page, Screenshot)
Lexus Tire Center (Landing Page, Screenshot)
Lexus Tire Center (Ad, Medium Rectangle)
Lexus Tire Center (Ad, Medium Rectangle)
Lexus Tire Center (Ad, Wide Skyscraper)
Lexus Tire Center (Ad, Wide Skyscraper)
Lexus Tire Center (Ad, Leaderboard)
Lexus Tire Center (Ad, Leaderboard)
Lexus Tire Center (Coupon)
Lexus Tire Center (Coupon)

CDK Global, aka Cobalt

Car Customization Campaign

Role
Lead Designer
Dates
2014
Tags
Images, 2014, Automotive, Dodge, Advertising, Campaign, Seattle, Washington

This image is called “Dream to Reality.” The idea behind the hero image for the Car Customization Campaign is to convey to the customer that they can customize the car at the dealership. In other words: if they can dream it, they can make it a reality. This is illustrated by starting with a sketch of the car, on the left, which transitions to a photo of the car, on the right. Car shown is a Dodge Viper.

Car Customization Campaign, Dodge Viper
Car Customization Campaign, Dodge Viper

Cobalt: Content Division

Role
Lead Designer
Dates
2014
Tags
Logos, Images, 2014, Automotive, Seattle, Washington

The Content Division at Cobalt, referred to as the “Content Team”, was looking for a new logo for their brand. As a member of the team, I created the following.

Design Goal: To create a simple, yet memorable, logo that encapsulates the role of the content team. The logo should also be designed in a way that remains attractive in both vertical and horizontal configurations, as well as in full and abbreviated variations, i.e. text only, logo only and combined.

Design Concepts: The heart of the logo is the design at the top, which not only represents coding--by the use of the square brackets and plus sign, which are used in css to denote attribute selectors and adjacent selectors, respectively--but it also symbolizes assistance by the use of the cross, as used by the American Red Cross. In addition, as you can see from the stylized text below it, the brackets and plus sign also represent the “C,” “T” and “T” of the “CONTENT” name. The use of coding in the logo continues with a stylized css comment, which reads “a cobalt team.” This plays on the standard naming convention of “Cobalt, an ADP Company.” The use of cobalt blue is intentional as well, in homage to our company name.

Implementation Techniques: I wanted to keep the logo simple and classic by using flat design. The only exception is the subtle gradient.

Content Team Logo, Vertical
Content Team Logo, Vertical
Content Team Logo, Horizontal
Content Team Logo, Horizontal

Tom Kelley Chevrolet Buick

Impala and Silverado

Role
Lead Designer
Dates
2013
Tags
Images, Advertising, Campaign, 2013, Automotive, Chevrolet, Buick, Indiana

The Chevrolet Impala and Silverado 2500HD marketing campaign focuses on the specs of each vehicle. I designed this campaign exclusively for Tom Kelley Chevrolet Buick. The 3-piece campaign consists of a banner/leaderboard, wide skyscraper and medium rectangle for each vehicle. The idea is to understand the specifications of each vehicle through the driving process, hence the specs being written in 3-dimensional space.

Tom Kelley Chevrolet Buick, Impala (Ad, Medium Rectangle)
Tom Kelley Chevrolet Buick, Impala (Ad, Medium Rectangle)
Tom Kelley Chevrolet Buick, Impala (Ad, Wide Skyscraper)
Tom Kelley Chevrolet Buick, Impala (Ad, Wide Skyscraper)
Tom Kelley Chevrolet Buick, Impala (Ad, Leaderboard)
Tom Kelley Chevrolet Buick, Impala (Ad, Leaderboard)
Tom Kelley Chevrolet Buick, Silverado (Ad, Medium Rectangle)
Tom Kelley Chevrolet Buick, Silverado (Ad, Medium Rectangle)
Tom Kelley Chevrolet Buick, Silverado (Ad, Wide Skyscraper)
Tom Kelley Chevrolet Buick, Silverado (Ad, Wide Skyscraper)
Tom Kelley Chevrolet Buick, Silverado (Ad, Leaderboard)
Tom Kelley Chevrolet Buick, Silverado (Ad, Leaderboard)

Subaru

Subaru WRX STI

Role
Lead Designer
Dates
2014
Tags
Images, Advertising, Campaign, 2014, Automotive, Subaru

The Subaru WRX STI marketing campaign, consisting of the hero, banner, and medium rectangle, highlights the car’s aggressive stance and decorated racing history.

Subaru WRX STI (Ad, Hero)
Subaru WRX STI (Ad, Hero)
Subaru WRX STI (Ad, Medium Rectangle)
Subaru WRX STI (Ad, Medium Rectangle)
Subaru WRX STI (Ad, Banner)
Subaru WRX STI (Ad, Banner)

Shot in the Dark

Shot in the Dark

Role
Lead Designer, Lead Developer
Dates
August, 2012
Tags
Web Design, Web Development, Logos, Images, Advertising, Campaign, UI, 2012, Music, Seattle, Washington

This logo was designed for the a cappella group, Shot in the Dark, in Seattle, WA. As a group of stage performers, they are in the spotlight, and so the concept behind this logo was to match that look. There are a few alternate options depending upon use. The final image is a Facebook Cover photo for the group’s participation in Lady Antebellum’s nation-wide A Cappella Competition, where the group was a finalist. This image marries the logos of both groups and includes a QR code and a call-to-action in order to help the group progress in the competition. NOTE: the left arrow is pointing to the location of the profile photo, which also included a QR code.

Shot in the Dark Logo
Shot in the Dark Logo
Shot in the Dark Logo (Alt.)
Shot in the Dark Logo (Alt.)
Shot in the Dark Logo (Second Alt.)
Shot in the Dark Logo (Second Alt.)
Shot in the Dark Logo, Text Only
Shot in the Dark Logo, Text Only
Shot in the Dark, Facebook Cover Photo
Shot in the Dark, Facebook Cover Photo

Volkswagen of Huntington

Breast Cancer Awareness Campaign

Role
Lead Designer
Dates
October, 2011
Tags
Images, Advertising, Campaign, 2011, Automotive, Volkswagen, New York

Volkswagen of Huntington’s Breast Cancer Awareness Campaign included three different ad sizes: leaderboard, medium rectangle, and wide skyscraper. The inspiration behind the design for this advertising campaign comes from the pink ribbon worn in order to show support and spread awareness. The pink ribbon is dissected into two elements: the color pink and the ribbon. The color pink is used throughout—with variations in hue, saturation, and lightness—and the ribbon is unfurled and flows across the background.

Volkswagen of Huntington, Breast Cancer Awareness (Ad, Leaderboard)
Volkswagen of Huntington, Breast Cancer Awareness (Ad, Leaderboard)
Volkswagen of Huntington, Breast Cancer Awareness (Ad, Medium Rectangle)
Volkswagen of Huntington, Breast Cancer Awareness (Ad, Medium Rectangle)
Volkswagen of Huntington, Breast Cancer Awareness (Ad, Wide Skyscraper)
Volkswagen of Huntington, Breast Cancer Awareness (Ad, Wide Skyscraper)

Charles Maund Volkswagen

Maund Mega Deals Campaign

Role
Lead Designer
Dates
2013
Tags
Logos, Images, Advertising, Campaign, 2013, Automotive, Volkswagen, Austin, Texas

The Maund Mega Deals advertising campaign pays homage to the old style of comic books. The nod is accomplished by using the Ben Day process during the coloring stage, the decision to use the three most used colors in comics, and the choice of shapes which surround the majority of copy in the image. The idea to use a comic book aesthetic came to me when I first read the company’s campaign title, and specifically from the use of the word “mega.” It reminded me of the genre’s propensity for the overuse of adjectives. Surrounding the “MEGA DEAL” title in a “POW”-like action bubble seemed appropriate to pull it all together.

Charles Maund Volkswagen, Maund Mega Deals, Jetta
Charles Maund Volkswagen, Maund Mega Deals, Jetta
Charles Maund Volkswagen, Maund Mega Deals, Passat
Charles Maund Volkswagen, Maund Mega Deals, Passat
Charles Maund Volkswagen, Maund Mega Deals, Main Hero
Charles Maund Volkswagen, Maund Mega Deals, Main Hero

Hyundai of Everett

Starbucks Campaign

Role
Lead Designer
Dates
2012
Tags
Images, Advertising, Campaign, 2012, Automotive, Hyundai, Washington

Hyundai of Everett, located just 15 miles north of Seattle, offered a Starbucks gift card to anyone who took a vehicle for a test drive. The Starbucks logo is so recognizable that it wasn’t necessary to show the entire image. In fact, only a very small portion is even visible. A few wavy lines are all that can be seen of it. The Starbucks wordmark and company colors complete this hero image.

Hyundai of Everett, Starbucks Campaign
Hyundai of Everett, Starbucks Campaign

Volkswagen

Volkswagen Campaigns

Role
Lead Designer
Dates
2012
Tags
Images, Advertising, Campaign, 2012, Automotive, Volkswagen, Nationwide

Volkswagen has had many automaker-wide campaigns, including “Autobahn for All” and “Sign then drive.” For each campaign, it was necessary to build templates for each dealership to use, as needed. The challenge here was in creating a template that could work for all models regardless of their placement within the shot. Things to consider—beyond vehicle placement—were CTAs/links, form links, image rotator buttons, and the disclaimer. The goal was to create a high quality template that could be used on hundreds of sites and that could be updated very quickly with the dealership’s information.

Autobahn for All Campaign, GTI (template)
Autobahn for All Campaign, GTI (template)
Autobahn for All Campaign, GTI
Autobahn for All Campaign, GTI
Autobahn for All Campaign, Beetle
Autobahn for All Campaign, Beetle
VW Jetta
VW Jetta
Autobahn for All Campaign, Jetta
Autobahn for All Campaign, Jetta
Autobahn for All Campaign, Jetta (template)
Autobahn for All Campaign, Jetta (template)
Autobahn for All Campaign, Jetta
Autobahn for All Campaign, Jetta
Autobahn for All Campaign, Beetle
Autobahn for All Campaign, Beetle
Sign then drive Event Campaign, Jetta (template)
Sign then drive Event Campaign, Jetta (template)
Sign then drive Event Campaign, Jetta
Sign then drive Event Campaign, Jetta
Sign then drive Event Campaign, Jetta (with dealership information)
Sign then drive Event Campaign, Jetta (with dealership information)

Sonnen Volkswagen

August Hot Deals Campaign

Role
Lead Designer
Dates
August, 2013
Tags
Images, Advertising, Campaign, 2013, Automotive, Volkswagen, San Francisco, California

At the end of the summer, Sonnen Volkswagen ran a Summer Specials Campaign called August Hot Deals. They wanted to capture the feeling of hot deals during the hot days of summer. I wanted to create a design that invoked those feelings, but with only a few elements. The use of warm colors and a fire-like gradient on the heading and info container were enough to get the point across without being over-the-top.

August Hot Deals Campaign, Beetle
August Hot Deals Campaign, Beetle
August Hot Deals Campaign, Jetta
August Hot Deals Campaign, Jetta
August Hot Deals Campaign, Tiguan
August Hot Deals Campaign, Tiguan

Gateway Hyundai

Hyundai Summer Clearance Campaign

Role
Lead Designer, Lead Developer
Dates
July, 2013
Tags
Web Design, Web Development, UI, Logos, Images, Advertising, Campaign, Landing Page, 2013, Automotive, Hyundai, North Dakota

The Hyundai Summer Clearance Campaign is a brand-wide event. At Gateway Hyundai, they wanted to push the Sonata, Elantra, and Santa Fe. This required a landing page (to direct potential customers to), and three different sized ads for each of the three models (to be used for retargeting across the web). The landing page includes a form for a quote on the vehicles should the prospective customer wish to receive that information. All ads include a custom-designed logo for the campaign, a banner highlighting the model name and the word “clearance,” a hand-picked photo of the vehicle, and angled lines in order to keep the overall design interesting. Also included in each ad is the dealership’s logo, for brand recognition, along with all relevant information about the vehicle.

Gateway Hyundai, Hyundai Summer Clearance, Landing Page
Gateway Hyundai, Hyundai Summer Clearance, Landing Page
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Wide Skyscraper)
Gateway Hyundai, Hyundai Summer Clearance, Elantra (Ad, Wide Skyscraper)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Wide Skyscraper)
Gateway Hyundai, Hyundai Summer Clearance, Santa Fe (Ad, Wide Skyscraper)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Medium Rectangle)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Leaderboard)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Wide Skyscraper)
Gateway Hyundai, Hyundai Summer Clearance, Sonata (Ad, Wide Skyscraper)

Findlay Chevrolet

Camaro

Role
Lead Designer, Lead Developer
Dates
2013
Tags
Web Design, Web Development, UI, Images, Advertising, Campaign, Landing Page, 2013, Automotive, Chevrolet, Las Vegas, Nevada

In 2013, Findlay Chevrolet offered a special on the 2013 Camaro: $1,500 cash back or 0% APR for 36 months. All copy was provided by the dealership. The request was to showcase the Camaro’s strengths, and create an aggressive and appealing advertising campaign. The focal point of the campaign is the Camaro’s aggressive frontend styling. I chose a photo with the vehicle driving straight toward the camera and with the camera at the same height as the front grille and emblem. This image, which uses a one-point perspective, puts the car right in the viewers face and further enhances the aggressive styling of the vehicle. The horizontal lines in the buildings throughout the background of the photo nicely reiterate the grille of the Camaro, which is again repeated, stylistically, in the subheading of the ad. This advertising campaign included a landing page (to direct potential customers to), and three different sized ads (to be used for retargeting across the web). The landing page includes a form for a quote on the vehicle, should the prospective customer wish to receive that information, the top five selling points of the 2013 Camaro, and a dealership-specific value proposition, to entice viewers to choose this dealership.

Findlay Chevrolet, Camaro (Ad, Landing Page)
Findlay Chevrolet, Camaro (Ad, Landing Page)
Findlay Chevrolet, Camaro (Ad, Medium Rectangle)
Findlay Chevrolet, Camaro (Ad, Medium Rectangle)
Findlay Chevrolet, Camaro (Ad, Leaderboard)
Findlay Chevrolet, Camaro (Ad, Leaderboard)
Findlay Chevrolet, Camaro (Ad, Wide Skyscraper)
Findlay Chevrolet, Camaro (Ad, Wide Skyscraper)

Alexander Chevrolet

Sonic

Role
Lead Designer
Dates
2013
Tags
Images, Advertising, Campaign, 2013, Automotive, Chevrolet, Tennessee

This advertising campaign for Alexander Chevrolet features the Chevrolet Sonic LS. The retargeting advertising campaign includes a medium rectangle, leaderboard and wide skyscraper.

Alexander Chevrolet, Sonic (Ad, Medium Rectangle)
Alexander Chevrolet, Sonic (Ad, Medium Rectangle)
Alexander Chevrolet, Sonic (Ad, Leaderboard)
Alexander Chevrolet, Sonic (Ad, Leaderboard)
Alexander Chevrolet, Sonic (Ad, Wide Skyscraper)
Alexander Chevrolet, Sonic (Ad, Wide Skyscraper)

Bommarito Buick GMC West County

Homepage Redesign

Role
Lead Designer, Lead Developer
Dates
November, 2012
Tags
Web Design, Web Development, Logos, Images, UI, 2012, Automotive, Buick, GMC, Missouri

The Bommarito Buick GMC West County Homepage Redesign was a complete overhaul. The original homepage not only had layout issues, but used frames, had multiple images that were cut off (including the hero image), had widgets that were either poorly designed or had other issues, had random bullet points throughout, and had an overall dated look, in general. The request from the dealer was to simply “make it look better.” The first thing I needed to do in order to improve the design of the homepage was to gather information from the client. Specifically, what looked aesthetically pleasing to them. To understand that, I asked for what they liked/disliked about their current homepage, what sites they liked the look of, etc. I also asked them about which models they wanted to showcase and which campaigns they wanted to promote. Once I had that information, I sketched the new layout of the page. From there, I took the client’s responses from my survey, implemented a hierarchy for the content, and created the wireframe. During the mockup phase, I gathered all available assets and created a logo (specifically, a wordmark, based on an older logo of theirs), a few hero images, CTAs, and a holiday campaign asset. Once the mockup was approved by the client, I built the homepage out with our proprietary CMS, HTML5, CSS, and JavaScript.

Bommarito Buick GMC West County Homepage (Original, aka “The Before”)
Bommarito Buick GMC West County Homepage (Original, aka “The Before”)
Bommarito Buick GMC West County Homepage (Redesign, aka “The After”)
Bommarito Buick GMC West County Homepage (Redesign, aka “The After”)

Gendron’s Truck Center

Homepage Redesign

Role
Lead Designer, Lead Developer
Dates
December, 2012
Tags
Web Design, Web Development, Logos, Images, UI, 2012, Automotive, GMC, New York

The Gendron’s Truck Center Homepage Redesign Project was a complete redesign. The original homepage was rather antiquated, with the entire content being left aligned and not responsive. There were also numerous font families, conflicting color schemes, and different design aesthetics throughout. The dealer asked that I give the homepage a “more modern look,” so I updated the layout, centered the content, adopted the GMC color scheme, created a logo for the dealership, reduced the number of fonts, created a hero image and a few CTAs, and adopted a content hierarchy. (NOTE: I suggested using a different color--such as the GMC red--for the links in the text, but the client insisted on the silver color.) Once the design was approved by the client, I built the homepage with our proprietary CMS, HTML5, CSS, and JavaScript.

Gendron’s Truck Center Homepage (Original, aka “The Before”)
Gendron’s Truck Center Homepage (Original, aka “The Before”)
Gendron’s Truck Center Homepage (Redesign, aka “The After”)
Gendron’s Truck Center Homepage (Redesign, aka “The After”)

Orr Classic Chevrolet

Homepage Redesign

Role
Lead Designer, Lead Developer
Dates
2012
Tags
Web Design, Web Development, Images, UI, 2012, Automotive, Chevrolet, Arkansas

The Orr Classic Chevrolet Homepage Redesign Project was a relatively minor redesign. The original homepage didn’t have any major issues, except for the lack of padding on the text at the bottom of the page. That being said, there were a couple of other more minor issues with the page. There were three different sets of CTAs, each with their own design, plus a banner for “Service Specials.” These could be simplified and evaluated for their necessity on the homepage. There was also some inconsistency in the CTAs—two images contained “CLICK HERE” text, while the other two did not. For the new homepage, I increased the size of the hero image slideshow in order to more prominently display the featured vehicles. I also reduced the number of CTAs on the homepage and updated the images used. After updating the padding on the text at the bottom of the page, I received approval for the minor updates from the client and built the homepage with our proprietary CMS, HTML5, CSS, and JavaScript.

Orr Classic Chevrolet Homepage (Original, aka “The Before”)
Orr Classic Chevrolet Homepage (Original, aka “The Before”)
Orr Classic Chevrolet Homepage (Redesign, aka “The After”)
Orr Classic Chevrolet Homepage (Redesign, aka “The After”)

Sun Auto Group

Homepage Redesign

Role
Lead Designer, Lead Developer
Dates
2012
Tags
Web Design, Web Development, Logos, Images, UI, 2012, Automotive, Buick, GMC, Connecticut

The Sun Auto Group Homepage Redesign Project was a complete redesign. There were numerous issues with this page, including: spacing and positioning issues, an off-brand blue background interspersed with a gray background and a repeated gradient background, centered text throughout, a form that didn’t function properly, a random YouTube logo in the middle of the page that didn’t serve a purpose, and a lack of coherence, in general. The request was to give the homepage a “new look,” as the client didn’t like the current state it was in. This redesign required: developing a new layout; creating an updated logo; designing new hero images, CTAs, and a Verano campaign ad; and devising a new color scheme. Once the design was approved by the client, I built the homepage with our proprietary CMS, HTML5, CSS, and JavaScript.

Sun Auto Group Homepage (Original, aka “The Before”)
Sun Auto Group Homepage (Original, aka “The Before”)
Sun Auto Group Homepage (Redesign, aka “The After”)
Sun Auto Group Homepage (Redesign, aka “The After”)

The League: Camden NoMa

Logo

Role
Lead Designer
Dates
August, 2014
Tags
Logos, Images, 2014, Club, Football, Washington, DC

The League: Camden NoMa was a Fantasy Football League in the NoMa neighborhood of Washington, D.C. This logo was created for the league upon their request. The hummingbird was taken from the Camden NoMa (apartment building) logo. The main logo and an alternate were created and used for the league.

The League: Camden NoMa Logo
The League: Camden NoMa Logo
The League: Camden NoMa Logo (Alt.)
The League: Camden NoMa Logo (Alt.)

Work Together?

contact@nathanepierce.com