Design Shack — Web Design Gallery, Articles & Community

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is We Can Service Your Car.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About “We Can Service Your Car”

“Our customers are at the heart of what we do. We are here to remove all the smoke and mirrors that give the motor trade a bad name. Car servicing has changed and our business is completely aligned with the new approach to car servicing. We thrive on saving our customers money, delivering the best possible service and giving them confidence in what we say.”

Here is the site’s homepage:

This is an interesting site and should give us plenty of points to discuss. Let’s jump right in and analyze the site piece by piece.

Background

The website’s background is this blueprint cog illustration. It’s mostly covered up by the content but it peeks through enough that you can tell what’s going on.

Cars aren’t the first thing that pop into my head when I think of blueprints, but the reference to machinery makes it work. I love the graphic as a standalone piece but I think it could be toned down a bit on the website to prevent visual confusion. I recommend reducing the opacity a bit more so that it’s just barely visible. You might consider scaling it down a bit as well.

Header

When we look at the header we can immediately see the theme that’s going to carry throughout the site. Rounded corners with drop shadows, alternating shades of blue with some white thrown in and bold typography.

My first impression was that the navigation seemed huge. This combined with car logo suddenly makes this feel like a children’s site. However, maybe your target market includes older individuals that can’t work on a car themselves anymore or other non-techy types. If this is the case, the big buttons will probably be appreciated by your users. Sometimes usability trumps aesthetics. Just be sure to consider who it is you’re primarily designing for and try to appeal to their needs.

Back to the car logo. I like the concept, it has a lot of personality. However, the execution isn’t the best. I’m not sure how to fix it without redesigning it completely, but you might have the person who created the logo come up with a few alternate sketches. If you decide to stick with the current logo, just be sure to clean up the edges. They’re currently a bit jagged and pixelated, especially around the windshield area.

Welcome

The next area on the page effectively communicates a lot of information in a small space. The bullet points are both effective and efficient here and the continually scrolling car manufacturer names at the bottom reinforces the “any car” aspect.

The designer has chosen to bring in some red here for emphasis. It violates the color scheme and therefore catches your attention right away. I like the pull quote and how it’s perfectly aligned on the top and bottom with the bullet copy.

The problem with this area, and indeed much of the site, is visual hierarchy. As I said, the red helps emphasize the proper points but everything else here is still competing for attention rather than setup to have a clear delineation of importance.

For instance, all of the text on the site is bold… all of it. Bold text is great for adding emphasis where it’s needed but a problem arises when you take it too far: If everything is special, then nothing is special. I recommend rethinking your typography choices and reducing the weight on most of the text, leaving only the most important parts bold.

Further, the concept of hierarchy also applies to size. Notice how the “Welcome” headline is the same size (or close) as the bullet copy. Again we see a case of competing for attention. Since the headline defines and introduces the section, increase its size while decreasing that of the bullet points.

Here’s a quick and dirty mockup of this section re-imagined with better use of visual hierarchy. You don’t have to do it exactly like this, merely focus on how the information is divided in a much cleaner way.

Content

The content area is attractive and brings in some friendly photography, but suffers from the same problem with all of the bolded text.

Another key suggestion here is to make the photos and the text immediately below them one visual unit. Right now you have two distinct visual elements stacked on top of each other when they could easily be tied together in a more cohesive manner. Again, this is quick and dirty but you get the idea.

Footer

Finally, let’s take a look at the footer. The content here is fairly simple but it has been made to look a lot more complex and confusing than it really is.

First of all, the red worked on the white above but the red definitely doesn’t work on the blue. The two bright colors on top of each other conflict instead of contrast. Further, the text really needs some work. Again, change up the boldness a bit, reduce the prominence of the copyright line, and fix the awkward search button that’s far longer than the word contained inside (reduce the width, center the text in the button).

The sticky footer that keeps the phone number with you as you scroll is a nice touch. Often when someone visits the website of a physical business they only want one thing: the phone number. The phone number here stays with you as you scroll through the site making it almost impossible to miss.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice devoid of any harsh insults.

Interested in having your own site critiqued? You can find out more here.