Web Design Critique #85: Sonic Electronix

by on 10th August 2012 with 5 Comments

web design critique

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 in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Sonic Electronix, a consumer electronics company. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 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 Sonic Electronix

“Sonic Electronix is a leading worldwide retailer of car audio and other consumer electronics. Our warehouse carries more than 15,000 high-quality electronics. We provide unmatched service at unbeatable prices. Start building the car audio system of your dreams today and enjoy premium service and fast shipping. We also carry a wide selection of professional audio, DJ equipment and karaoke products for applications ranging from entry level to the most serious audio specialist.”

Here is a screenshot of the homepage:

web design critique

Rate It!

First Impressions

Sonic Electronix looks like a fairly typical online retailer. At a glance, there are several aspects of the design that I think are done well. I can tell that there has definitely been some effort here to give the site some aesthetic appeal, which is great. I’ve seen countless other sites in this genre with a real mess of a home page.

Right off the bat, what appeals to me are the clean, consistent product shots. Every product is shown on a white background and looks professionally presented. This dedication to consistency is attempted throughout the site in various forms through repetition of colors, button styles, etc.

“There are points where the page seems to be really struggling with clutter…”

All of this being said, there are points where the page seems to be really struggling with clutter, as the vast majority of online shops tend to do. Further, there are various tweaks and changes that could be executed to improve the usability and flow of the page. Ultimately, I think some big improvements could be made. Let’s break it down and see how.

E-commerce is Different

Most web design can be approached from a similar standpoint. I can take a few core, basic design principles and overhaul the ugliest of websites. The interesting thing about e-commerce though is that it’s a quirky field where occasionally the sites with the worst design seem to be the most successful.

“We must keep in mind when critiquing a site like this that this genre operates by its own rules.”

Does that mean we should intentionally make e-commerce sites ugly? Absolutely not. However, we must keep in mind when critiquing a site like this that this genre operates by its own rules and that some things that might seem really important on a portfolio design are nearly irrelevant in this situation.

It’s definitely a good idea to constantly look around the industry and decide who’s doing well and why. When a company has hundreds of thousands of dollars to invest in researching the most effective layouts and shopping flows, what do they come up with? As I give advice below I’ll try to grab from outside references to help keep us on point.

Page Title

One of the very first things that I do when I visit a site is look at the title bar. This is entirely instinctive, the web has trained me to think that this is going to tell me what a site is all about. Here’s what I see on the Sonic Electronix page.

web design critique

As you can see, the title bar is focusing purely on car audio. Now, I’m willing to bet that this is for SEO purposes and is really more for keyword cramming than conveying information to the user. I’m all for optimizing your page for search engines, but not if it reduces the usefulness for the user, and that’s exactly what is happening here.

“I’m all for optimizing your page for search engines, but not if it reduces the usefulness for the user.”

The problem here is that, as soon as I read this, if I’m not looking for car audio equipment, I’m gone. I likely won’t even look at the rest of the page, especially if I have five tabs open from a Google search and I’m quickly cycling through them to see which has the products that I need.

Even if car audio is your biggest seller, and it looks like it is, I think this could be reworked to something more indicative of the products that you actually sell. For example: “Car audio, GPS, Security, Cell Phones and More.” Something like this hits those keywords that you like while still conveying an accurate description of the site.

Header

One of the primary places on the page that I see struggling with clutter is the header. This is an extremely common problem on all types of websites because you want to cram so much into that all-important first impression.

web design critique

As we think about how to improve this header to make it a little more user friendly, let’s get some outside perspective. As soon as I began looking around at various popular e-commerce sites, I noticed something very interesting about how they treat the space in their headers. Here are two examples, the first from Amazon and the second from Overstock.

web design critique
web design critique

Look at the size of those search bars! Obviously, they see the search feature as likely the primary destination for users visiting their site and they want to make sure that it’s featured as prominently as possible.

“I definitely suggest testing out a page with the header reworked to feature search above all else.”

On Sonic Electronix, there’s significant room available for a large search field, but its sacrificed in pursuit of other ideas. I definitely suggest testing out a page with the header reworked to feature search above all else.

Navigation

I’ve gone back and forth on how I feel about mega menus that cram in a million links, but one place it does seem to work well is on e-commerce sites that have a ton of content to sift through. The Sonic Electronix navigation menus are nicely organized and make it fairly easy to quickly spot whatever it is that I’m looking to purchase.

web design critique

Again though, I think the header clutter is working against us in this area. If we draw our eyes to where we would expect the navigation menu to be, we do indeed find it, but it’s a little lost in a sea of links, gradients, checkmarks, drop downs, etc.

web design critique

Good design is about making decisions. You have to decide what’s important and how you’re going to highlight it. If you wuss out and try to make everything important, then all you’re doing is making nothing important.

Featured Items

Next, let’s jump down to the featured items part of the page. Here is where you get your first real visual dose of the variety and quality of products being offered on the site. The elements are neatly arranged in a grid, and as I pointed out above, utilize a nice studio background look with plenty of whitespace.

web design critique

I really like this area, but there are a few problems that I have with it. First of all, from a usability perspective, it’s quite annoying that each entire box isn’t a clickable area. The image can be clicked as well as the product name and “Shop Now” button, but if you look around on various other sites, the tendency here is to make it so that I can click anywhere within the bounds of the box to go to the dedicated product page. With the current setup, it could conceivably take a person a few clicks to get it right.

“You’ll find that users are quite cautious about pressing buttons on e-commerce sites out of fear of unintentionally purchasing something.”

Further, I feel like the “Shop Now” buttons are vague. I’m not entirely sure what that means and how it relates to what happens when I press the button. Am I not shopping from the second the page loads? Will this button buy the item? Is it simply something that I click for more information?

You’ll find that users are quite cautious about pressing buttons on e-commerce sites out of fear of unintentionally purchasing something. When you create a button, make sure it adequately prepares me for what’s going to happen when I press it.

Why Shop Sonic?

My least favorite portion of the page is the “Why Shop Sonic” section near the bottom. This section is simply a box with four big paragraphs. It’s not really “designed” so much as thrown in. It feels like it was a big chunk of content that the designer just had no idea what to do with:

web design critique

This is a large block of boring information that I’m simply never going to read through as a user unless you make it more interesting. So how can we fix it? It turns out that the content here is really a feature list: fast shipping, secure payments, etc. With this information in mind, it’s not difficult to find some solid inspiration. Check out how the online Apple Store tackles this problem:

web design critique

See how much better that is? In the Sonic Electronix section, everything is thrown into one awkwardly long column that’s void of images or any attractive visuals. Apple approached this very differently by splitting the content into four columns, keeping the text down to a brief paragraph and grabbing your attention with beautiful icons and photos.

Footer

One last comment before we wrap this critique up: I think the footer is a little bit of an eyesore:

web design critique

I’m not sure that you need either the bullets or the link underlines, but I’m certain that both together just makes this area difficult to read. If I had to ditch one, I’d toss the underlines so that the footer looks more like that of Newegg.com:

web design critique

The differences between these two footers are subtle to the untrained eye, but the Newegg one just looks so much cleaner and easier to browse.

Conclusion

Overall, I think the Sonic Electronix site is off to a strong start with their design, but they do need to rethink the hierarchy of information. This is the problem that we ran into again and again as we travelled down the page.

“Presenting content in a logical, browse-able and attractive fashion is a primary goal of web design.”

Presenting content in a logical, browse-able and attractive fashion is a primary goal of web design. Information cramming and a little laziness on the part of the designer in cases like the “Why Shop Sonic?” section are holding the site back from what it could be.

Ultimately, I suggest some click-tracking studies to see what users like/need. Use this information to cut down on what isn’t effective and highlight what is. I strongly suspect that items such as the search bar could be much more effective if they were more prominent.

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 void of any harsh insults.

Comments & Discussion

5 Comments

Comments & Discussion

5 Comments

  1. nomi says:

    Come on Design Shack, have we really come to this?
    You should be little more picky about the reviews.

  2. Bryan says:

    Thank you Joshua

    I’m from the UK and have never heard of Sonic Electronix. Therefore the first things I look for are the trust factors. Can I trust this company?

    I think the design looks a little dated – The logo in particular looks old. On the other hand I looked at the 71,000 + likes on Facebook and the testimonials were all reassuring.

    I share your opinion about the header looking cluttered and making the search more prominent. I would remove the horizontal banner ‘why shop with us’ It just adds to the cluttered look. And remove ‘shop by brand’ – and have the search across the full width.

    The website obviously recognized I was from the UK and returned an extra element in the header. ‘We ship to the UK’ with UK flag gif image. In addition a link to the shipping policy was also very important and reassuring to me.

    I checked out the ‘about us’ page
    I liked the video explaining a little bit about Sonic. And the testimonials were re-assuring. However the video, and some testimonials should have perhaps been on the home page in the section ‘why shop with us’. Your existing customers are better and more convincing at explaining ‘why shop with us’

    The mega menu is not the best designed menu I’ve seen but was fairly easy to use and find stuff.

    Overall
    The site looks a little dated but trustworthy.

    :)

  3. Tara says:

    Great review, with some great ideas for this site.

    I’d just like to add a couple comments:

    First off, I agree with Bryan’s comment above, in that the site looks dated to me. It has an older feel, as if the design hasn’t been updated in a couple years, and I definitely agree that the logo could use an update. In addition, the colors aren’t consistent in all areas. Try picking a color scheme, and stick to it. I know e-commerce sites generally use bright coloring, but it doesn’t mean you have to use all primary colors. Take a look at amazon.com – they use the yellow and teal to highlight and draw attention – but it’s not overwhelming.

    I’d also like to stress Joshua’s comments about the navigation. I think that there’s just too much in there. The three layers of navigation, added to the fact that there are 3 BRIGHT colors being used to draw attention to the different parts, make it HARDER to find what you’re looking for, instead of easier. I feel that these menus should be consolidated or removed. Use one color, and use the others only to highlight one or maybe two pieces of EXTRA important information – but that should be it. As Josh said, added attention to the search bar will help users find what they’re looking for much better than an overcrowded navigation.

    I really think that with a bit of updating, this site could be great! Good luck!

  4. Mike says:

    This review is fantastic! It’s great to see people analyze website designs. Real world examples of do’s and don’t are always more helpful, in my opinion.

    With that said, this actually looks a lot like my company’s e-commerce site. The similarities are actually uncanny. Which is probably why I liked this review so much! For some reason, I feel it’s necessary to inform everyone I am not the e-commerce designer at my company – although I’m sure no one cares!

    I had lunch about a year ago with our e-commerce designer and he actually hated the design as much as I did. But he didn’t really seem to care to change anything or make suggestions to the e-commerce VP. Which I found very confusing. If Sonic Electronix’s design process works anything like ours, it goes something like this:

    1. E-commerce VP vaguely specifies a feature, change, or addition and references some other site for inspiration – VP has no design experience
    2. A business analyst mocks up something that meets the business requirement and does their best to mimic the reference sites style in MS Paint- BA has no design experience
    3. Developer “improves” the idea during coding phase – Developer has no design experience
    4. Change deployed to production site
    5. Web designer sees change for the first time after deployment, then comments about how he has been working on a style guide that fix everything – it’s been 3 years since he started the style guide

Leave a Comment

Subscribe
Membership
About the Author