Hello.
I'm Nate. I'm a Front-End Developer.

Web Development

Camelback Volkswagen: HomePage

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 brand-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, that 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.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons
  • January, 2013 - April, 2013

Camelback Volkswagen: The Camelback Difference

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 from the original page, it was extremely text heavy, uninspired and the use of the tired old stock photos in a grid were simply boring. I liked the idea of the "happy customers" in the "14," which is for 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 since 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.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons
  • January, 2013 - April, 2013

Camelback Volkswagen: College Grad Program

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.

The Volkswagen Credit College Graduate Program is a great offering. The original version of this program's page was not. It was entirely text based, with awkward gaps and spaces throughout and virtually no message hierarchy. My vision for the new page was simple: add a relevant image of college grads so that visitors know immediately what the page is about. Then create a hierarchy for the text so that it is easy to understand the message being conveyed. And finally, organize the text in an easy to read format.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images
  • January, 2013 - April, 2013

Camelback Volkswagen: Vehicle Search Results

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.

For the most part, this page was fine--less the links that got lost at the top of the page. However, the design didn't reflect the dealer. The dealer's main color is a shade of blue, Camelback Blue. The design aesthetic is that of rounded corners. And the font is a new alternate VW Font. So for this page, I applied those elements in order to create a unique Vehicle Search Results page for Camelback. To top it off, I created 100% CSS-based CTAs that are much easier to see than the text-based links that were there prior. And when they're easier to see, they're used more and therefore add more value to your site.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons
  • January, 2013 - April, 2013

Bommarito Buick GMC West County

When I was approached about redesigning this site, there were a few items that hit me right away: (1) the dead/misused space, (2) the multiple scroll bars within sections of the page, (3) the cut off images (including the hero image!), (4) the awkward bulleted list for images on the right side, and (5) it just looked... old.

So I cleaned all of that up. I found out what vehicles they wanted to target in their marketing, and where they wanted to direct their visitors. Using that information, I created custom hero image slides and custom CTA buttons. I requested a copy of their logo to use in the masthead and matched the font for their tagline and accolade. I made sure the social links were easy to find, but unobtrusive. I found out what visitors weren't clicking on on their old homepage--using heat map analytics--and suggested removing those items and reorganizing the structure for a better flow and cleaner experience.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Gendron's Truck Center

Gendron's Truck Center had a very old style homepage. It was left aligned. It used a flash-based masthead, that was not mobile friendly. There was no flow for the images at the top of the page. The CTAs weren't the same style throughout, and there were even two of the "Search Used" CTA. There was no identity for this dealer or their site. It simply looked like a site that kept gaining content without asking why or how. I tried to fix that.

I centered the main container, added a grid structure and defined a color palette. The color palette was based off of the GMC brand, as that is what this dealer sells. I created a basic logo for the dealer, using the GMC-approved font, a subtle gradient and a few, grill-inspired, horizontal lines. The dealer loved it! I created two styles of CTAs for the dealer to use going forward--one text based for next to the hero image rotator, and the other larger CTAs underneath the hero. I also learned that the dealer had a lot of used trucks that they were having trouble selling, so I created a custom image to help bring them more used truck business. To finish it off, I created new hero image slides in the same style as the "Used Trucks" image to tie the images together.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images

Orr Classic Chevrolet

For this dealership, they were happy with the general look of the site, they just wanted it updated. After finding out what they liked/disliked about their current homepage, I realized that they just wanted it streamlined. I thought a larger hero image rotator would be nice, to really capture the visitor's attention. And the other images needed some updating, so I created some new images for them. I removed the Camaro and Tahoe images, since the dealer's goal was to push the 2013 Silverado inventory they had. Leaving these images up was splitting the traffic and clouding the dealer's message. The dealer also wanted to bring in more service business, so I created a companion image for that. I also removed some unnecessary/duplicate content to clean the page up further. The result was a cleaner message and window into the dealership.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Sun Auto Group

Sun Auto Group's homepage was a mess. It was dated. It was poorly constructed. It had so much unnecessary scrolling, I'm not sure visitors made it to the bottom.

I quickly brought it into the 21st century with a centered main container, a grid system and a color palette that made sense. I gave the page some structure, removed unnecessary CTAs, added a navigation bar, removed all of that unused "dead" space, removed the repeating gradient background, fixed the masthead and updated the font to a nice sans-serif one. I created some icons for the second tier CTAs to help visitors quickly identify their purpose. I updated the dealer's logo to help it stand out more in the masthead, and I created an alternate logo for the CTAs at the top of the page. I also created new hero image slides to showcase the dealership's new vehicles.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons

Ron Seidle's Redbank Chevrolet

This dealership wanted help organizing their homepage. They also wanted to use a blue to white halftone gradient as the background image and incorporate red into their site.

I added the requested background image and obtained their logo to use in the masthead. I also added some Chevy vehicles to their masthead to help fill it out. I decided to use red in some CTAs and within the hero images that I created for this dealer. I also decided to reuse the blue from the background in the main CTAs. While talking with the dealer, I found out that they are no longer promoting their Towing Department--so I removed that large image--and that they want to inform their customers of their specials--so I added some specials rotators. I also asked them about their online presence, and they said that they'd like to bring more people to their Facebook page, so I added a FB widget in a prominent location.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Zeigler Chevrolet Schaumburg

Zeigler Chevrolet of Schaumburg, IL needed help organizing their content. They had unused space, dated images and no clear message. It felt like there was no greeting when you arrived at their site. You were simply thrown right into it. I worked with the dealer to make things right.

I designed a set of hero images to use in the rotator at the top of the screen, which showcased vehicles they wanted to highlight, for one reason or another. 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 towards it.

The next three items were important to the dealer. 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 banner up. 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.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Web Development is critical in building a website. It takes the design from a static image to a fully functioning product. I develop my sites with semantic HTML5, CSS3, Javascript and jQuery.

Web
Development

Let's Work Together.

contact@nathanepierce.com