/

aFePower Redesign

aFePower.com redesign was somewhat of an unprecedented opportunity for me...I actually remembered to capture the OLD website and how it looks before the new one is implemented.

When I started this project, there were plenty of things to fix on aFePower.com. First, the site has remained unchanged for literally 6 or 7 years. The way-back machine showed the last major revision happened in 2007. Anyway, the site has plenty of visitors but the rate of visitors converting into sales were lagging behind competitors. Take a look for yourself:

Old aFePower.com Home Page

The over-abundance of images and buttons makes for a very difficult read and really, nothing to concentrate on.

Old aFePower.com Product Listing Page

This is the product listing page. The first row of products barely show up on the bottom, and this is on a typical, 24" 1080p resolution (1920 x 1080).

The actual product page isn't any better:

Old aFePower.com Product Page

Again, on a typical 1080 pixel tall screen, the product image and the "buy" button does not sit above the fold. No wonder over 60% of traffic leave the site from this page.

I proposed a series of mock-ups and concepts, some of which are attached here:

Concept 1

Concept 2

Concept 3

The last concept was what I wanted to push for, a responsive grid that will resize the largest images and shuffle around to accommodate various browser sizes. Unfortunately, too progressive and too big of a jump for their liking. We ended up with a hodgepodge of features from various concepts and also taking some cues from popular websites:

New aFePower.com Home Page Design 1

New aFePower.com Home Page 2

New Home Page design with scrolling home page graphic that is responsive (resize with browser) and grab/drag-able.

New aFePower.com Product Listing page

I tried to squeeze in 3 rows of products, but it wasn't meant to be. Well, at least some basic information shows up above the fold as well as full images.

New aFePower.com Product Page

Hopefully this will address most of the woes in terms of conversion performance. Large product images with description, benefits, and pricing above the fold. In fact, most of what was on the prior design are now above the fold with simple tab navigation for additional info like related products, reviews, and product videos.