Website Feedback

[iRepairParts]

So I've been running this website for a few months now. My initial goal was to have a very straight forward, simple, functional, and efficient ecommerce site. I'm a perfectionist when it comes to certain things, and although I was happy with the site at one point, I think it needs something to liven it up a bit..

This is the first time I have seen the website design portion of the forum, and I am glad I found it. I'd like to get some feedback from others. Let me know what you think about the design, functionality, etc. Anything you think I could do to make the site better for the user. Also, let me know what you like about the site.

The site is iRepairParts.com (same one as in my sig).

Thanks!

 

[SrWebDeveloper]

Couple of comments:

First, I commend you on a nice layout and e-commerce functionality, plus I really like the blue semi-transparent shopping cart watermark top right and the slideshow carousel used for presentation and selection of items. I'm also hoping people here appreciate as I do the Footer > Testimonials which show in rotation with a subtle transition fade effect. I have the same thing on my site for my testimonials, it's a touch of class worth noting in my opinion and I get compliments all the time, too. Well done on the details like that.

Here is where I think you can certainly improve (via my Chrome on Mac):

1) Home > Featured products - make sure height is same for each widget
2) Footer > Blog feed - double line horizontal rule disjointed
3) Menu > increase font size a little, add more contrast in background/foreground color
4) Maybe add a subtle gradient background color to the content area
5) Or, maybe add a rich blue gradient to the gutters on the left and right only to provide some color and contrast, and still the eye will focus on content area since it's a white/bright background.
6) When an item is selected, move "in stock" to the top and do anything to make it stand out more - this should assist in sales a bit. Maybe also add tabs top right for reviews, comments (if you allow), warranty, ratings.

I don't see reviews/comments or ratings or social media links of any kind associated with items. Features well worth considering for increased sales, SEO and cross-marketing.

The next advice is global, and I concede you might be limited by licensing but here goes anyway:

Most of the phone images seem to me can be slightly sharper or better designed, they seem lacking a bit in terms of the subtle shading and contour of smoothness.

Yes, I understand what's involved here is the hover effect showing either the desktop/icons for the iphone/ipad/ipod or the overlay of white highlights for the featured products just below. Maybe a little more pizazz would be to show the icons slightly faded or transparent, then on hover show the it bright and colorful, full resolution. Or show them in full resolution but on hover change the background of the block in which it resides to a gradient blue or something. My point is -- at first glance the devices pictured simply do no stand out until hover. So it's a more bland experience if someone is browsing your site the first time compared to its potential. This is honest feedback, my opinion only, nothing personal as I know you put a lot of work so this advice is targeted to your specific request for feedback on design.

 

[olup]

Overall nice design.

I would swap out the lightgrey that you use for the shopping cart icon and the text in the shopping cart button for a nice white color.

The headings on the home page where you got the three devices(iphone,ipad, ipod touch) could use a bit more top margin/padding to be further apart from the pictures.

Also the sorting and product widgets would be better positioned next to the breadcrumb navigation. Maybe you can put the shopping cart in place of the product sorter, so customers will always know what they have in their shopping cart instead of having to hover the shopping cart bar in the right top corner.

Also you do this quite often, when setting margin/padding to zero:

margin: 0px 0px 0px 0px;

When you declare a margin/padding as 0, just do this:

margin:0;

Leave off the px declaration and the unnecessary margin declarations.

 

[iRepairParts]

Couple of comments:

First, I commend you on a nice layout and e-commerce functionality, plus I really like the blue semi-transparent shopping cart watermark top right and the slideshow carousel used for presentation and selection of items. I'm also hoping people here appreciate as I do the Footer > Testimonials which show in rotation with a subtle transition fade effect. I have the same thing on my site for my testimonials, it's a touch of class worth noting in my opinion and I get compliments all the time, too. Well done on the details like that.

Here is where I think you can certainly improve (via my Chrome on Mac):

1) Home > Featured products - make sure height is same for each widget
2) Footer > Blog feed - double line horizontal rule disjointed
3) Menu > increase font size a little, add more contrast in background/foreground color
4) Maybe add a subtle gradient background color to the content area
5) Or, maybe add a rich blue gradient to the gutters on the left and right only to provide some color and contrast, and still the eye will focus on content area since it's a white/bright background.
6) When an item is selected, move "in stock" to the top and do anything to make it stand out more - this should assist in sales a bit. Maybe also add tabs top right for reviews, comments (if you allow), warranty, ratings.

I don't see reviews/comments or ratings or social media links of any kind associated with items. Features well worth considering for increased sales, SEO and cross-marketing.

The next advice is global, and I concede you might be limited by licensing but here goes anyway:

Most of the phone images seem to me can be slightly sharper or better designed, they seem lacking a bit in terms of the subtle shading and contour of smoothness.

Yes, I understand what's involved here is the hover effect showing either the desktop/icons for the iphone/ipad/ipod or the overlay of white highlights for the featured products just below. Maybe a little more pizazz would be to show the icons slightly faded or transparent, then on hover show the it bright and colorful, full resolution. Or show them in full resolution but on hover change the background of the block in which it resides to a gradient blue or something. My point is -- at first glance the devices pictured simply do no stand out until hover. So it's a more bland experience if someone is browsing your site the first time compared to its potential. This is honest feedback, my opinion only, nothing personal as I know you put a lot of work so this advice is targeted to your specific request for feedback on design.

Thank you for the advice! My ultimate goal was for the site to be super simple and easy to navigate.

One very important point is including reviews/ social media links/ buttons on the products pages. I also definitely agree with you regarding the blandness of the homepage. I'm in the process of looking for a new graphic designer/ programmer who can whip up something really eye catching and engaging.

Some of your points I never really thought of until I looked at my site again lol.. I really appreciate your suggestions!

----------

Overall nice design.

I would swap out the lightgrey that you use for the shopping cart icon and the text in the shopping cart button for a nice white color.

The headings on the home page where you got the three devices(iphone,ipad, ipod touch) could use a bit more top margin/padding to be further apart from the pictures.

Also the sorting and product widgets would be better positioned next to the breadcrumb navigation. Maybe you can put the shopping cart in place of the product sorter, so customers will always know what they have in their shopping cart instead of having to hover the shopping cart bar in the right top corner.

Also you do this quite often, when setting margin/padding to zero:

margin: 0px 0px 0px 0px;

When you declare a margin/padding as 0, just do this:

margin:0;

Leave off the px declaration and the unnecessary margin declarations.

Thank you for the suggestions and feedback!