Web Design Critique #85: Sonic Electronix
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!
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Shopify, Tumblr & More
Logos, Print & Mockups
Sans Serif, Script & More
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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:
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.
One last comment before we wrap this critique up: I think the footer is a little bit of an eyesore:
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:
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.
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. 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.
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.