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 Prezzybox, an online retailer. 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.
“Prezzybox.com is the complete online gift solution. If you’re looking for a unique or exciting gift for your Mom, Dad, brother sister, buddy, half cousin or yourself (lets face it – we all deserve something nice) then Prezzybox is the place. From Electronic Cigarette to the Chocolate Pizza, Retro Slush Maker to our funky Silly Bandz. Prezzybox has a veritable cornucopia of weird and wonderful goodies waiting for your perusal.”
Here is a screenshot of the homepage:
Understandably, Prezzybox has a lot going on in this design. They don’t have the benefit of being a focused retailer that can showcase a single product. They’re trying to sell all kinds of different products and are in the process of searching for the best way to showcase them.
They’ve obviously thought this through quite a bit, and there’s a lot that they get right. However, there’s also plenty of room for improvement. The page is an odd mix of good ideas and executions that are a little on the sloppy side. Let’s see if we can help refine the structure and point out areas that should be addressed to help give a hand to the success of this design.
One of the first things that I notice about this site is that there appears to be a very poor understanding of typography driving this design. Everywhere I look I see some really rough implementations of custom type.
For starters, the mixture of font weights in the logo is quite awkward:
At times, the fonts in the same word don’t even seem to match. For instance, the “0″ on the “50%” in the image below has a completely different weight and look than the “5″.
There are also some major kerning issues on the site. The text in the example below is an image, so arguments regarding the hurdles of kerning online don’t apply. This was simply the result of skipping a step in the Photoshop design process.
Also, tag clouds are almost never the best way to direct traffic to popular destinations. This one suffers from the lack of clear separation between tags. For instance, “Air Swimmers” and “Childrens Gifts” are two separate tags but the font weights are so similar that you can’t even really tell.
How to Fix It
My recommendation for the type on this page is to start over. Scrap all the various text styles and fonts on this page and take another run at it, this time being very intentional about every single character.
The place to start is to invest in some quality fonts. Premium fonts can be pretty expensive but using something cheap and ugly can’t have any other effect than making your site look cheap and ugly. If you simply don’t have the budget, there are plenty of choices online that are free and/or cheap while still being attractive and classy. FontSquirrel and Lost Type Co-op are good places to start.
Take your time and choose fonts painstakingly. Don’t be tempted to just grab display typefaces because they look fun. Instead give some hard consideration to what concept you’re trying to communicate and which typeface best conveys that idea. During this process, restrict yourself to a few good fonts that work really well together and implement these across the site.
You can and probably should use standard fonts for any live web type, but make sure everything is balanced well between your font size, line height and text box width to ensure maximum readability. Pearsonified just posted an excellent write-up on using the golden ratio to achieve well balanced type. Read it and use the Golden Ratio Typography Calculator as a decent rule of thumb for figuring out type treatments.
One place where this advice would improve your type is in the section shown below. Here the content width and font size merit an increased line-height.
Let’s move on to the navigation area. The impression that I get here is that everything is just so heavy. Each object and element has a lot of visual weight and there’s some competition for attention:
Also, in some parts, it feels like the vertical spacing is too tight, leading to a crammed and cluttered look.
One thing I do like is the product categorization that’s being used. Each section is clearly segmented and it’s really easy to find gifts for the person you’re looking to shop for. This is duplicated in a nice and simplified way further down the page:
How to Fix It
I think the navigation area is decent, it just needs some tweaking. One good source of inspiration to check out is Threadless, which uses a very similar navigation menu that’s a little more refined.
Notice how similar segmentation is being used here, but the whole thing feels lighter and much better spaced. The initial dropdown menus are simply colored text on a white background, with the heavy button look being selectively applied only to important elements.
Another issue that I see with this site is that the organizational tactics could use some work. For starters, there are lots of random bits of information that sort of seem like they were stuck into random places at the last minute.
The site uses horizontal bars to separate the various sections, but the areas aren’t clearly defined from a visual or conceptual standpoint. The section shown below is labelled “Prezzybox in the Press” and seems to encompass two large “About Us” style paragraphs, popular gift searches, customer reviews, etc., none of which really belong in this section.
These problems extend to the footer, which could use some major visual reorganization. I’m also not a fan of the awkward cut that separates it from the main area. If his were repeated elsewhere on the page it wouldn’t look so out of place but as a standalone design feature it feels wrong.
How to Fix It
Each section needs to be more clearly defined with both graphics and content. One source of good inspiration for this type of design is Themes Kingdom. In the screencapture below, this area of the site has a ton of stuff going on. However, the designers have used some really clear and modern content separation methods.
Really nailing the content organization will help make this entire page earn more effective. It may mean reorganizing and restyling lot of the items on the site and even cutting a lot of fat from the homepage, but in the end it’ll be worth it.
E-commerce is an interesting beast for designers. The reason for this is that aesthetics don’t correlate as tightly to success as guys like me would like them to. For instance, Amazon is a cluttered mess that makes my head spin, yet it’s the most successful online retailer around. However, that doesn’t mean that we can discount attractive visuals as something important for web stores. Not everyone can be Amazon and a clear way to stand out from the competition is with solid design.
Aside from visual identity is the even more critical area of usability, which comes into play heavily in online stores. Many of the changes I’ve suggested above are aimed at helping the page flow better so that users can more easily glance at this page and find what they’re looking for. Attractive visuals merely support this activity and help keep viewers interested.
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.