Web Design Critique #42: Peter and James
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 Peter and James, an online jewelry retailer.
2 Million+ Digital Assets, With Unlimited Downloads
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.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $34 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 Peter and James
“When it comes to fine jewelry, Peter & James only sells the best. From beautiful gemstones set in stunning sterling silver and white gold to our renowned dazzling Italian mesh diamond bracelet collection, every single piece you’ll find on our website is truly exceptional. We are committed to providing our customers the very best value, quality, service and selection of designer jewelry available. We follow the hottest styles and fashion trends, to ensure that we’re always offering the latest and most in demand jewelry online.”
Here is a screenshot of the homepage:
Initial Impression
My initial impression here is definitely positive. Peter and James is a great looking website. The homepage is extremely simple, which is great for drawing your attention to the high-impact photo of the woman with the bracelets.
The changes that I’ll suggest today are quite small in light of the overall design. Even great designers could always use an extra set of eyes to comb through and suggest ways to refine the design and usability of a project.
Let’s start by poking around in the header to see what we can improve.
Header Alignments
The first problem I notice when I look at the top of the page is that the horizontal alignment for the objects on both the left and right sides feels a little haphazard.
In truth, I see what the designer is doing and it’s actually quite intentional. The lower items are meant to be indented slightly, which is a common practice in layout. The problem with that here though is that the page is so simple that there are only a few objects on the page. If there were more to align with below this might work better but as it stands nearly every item seems to have its own unique horizontal position, which leads to a slightly cluttered feel.
The simple solution is to use the primary image as a strong edge that can be followed on both sides. The buttons at the very top right can probably stay where they are but I recommend moving the navigation left and the search field right so that the header elements look roughly like the image below.
Navigation Hover
Another tiny possible change is to add in a noticeable hover effect on the navigation links. This isn’t so much an aesthetic change as a little boost in usability. Seeing a significant change take place on a hover provides positive feedback to the user and ensures them that they’re doing the right thing. You want them to hover on the navigation and click further into the site, so add a little effect that reinforces this action.
Currently the cursor changes but I’m not sure this is enough. Color is always another option, but I’m not sure it’s appropriate here. A simple underline can be implemented with minimal CSS and will maintain the classy integrity of the design while adding clear visual feedback.
Primary Image
The real aesthetic appeal on this page can be attributed to the large image seen above. This perfectly sets the tone for the site and gives the page a clear focal point. My only problem with this image is that I want more!
This website sells earrings, necklaces, bracelets and rings. This image only shows off the bracelets. I think there’s a lot of potential here for both making the site feel more dynamic and snagging some clicks to other sections.
I recommend mimicking this style and branching it out to four different images, one for each section. From here you have two choices. The first is a simple slideshow. Nothing fancy or distracting, just a slow dissolve into the next image after after several seconds. If you’re not a fan of slideshows, a possible alternative is to randomly have one of the four images appear when the page is loaded. I prefer the former option but the latter might make for some interesting A/B testing to see which scenario leads to better purchase results.
Featured Products
The featured products section appears directly below the primary image. There is plenty to like about this section but it’s also a little rough in some areas. First of all, the hover effect with the bracelets is great. When you hover over a bracelet, the photo flips around to show you the other side. This is a fantastic and fun solution for displaying a three-dimensional product in a two-dimensional space.
As you can see in the image above, hovering also pops up this little price/information box. I love this idea, but the execution feels a little off. Overall, the space available space is being used in an awkward manner. The price and the description are pushed too far to the edges and don’t have much room to breathe. Also, the two buttons at the bottom are pushed oddly to the right, not all the way, just far enough to not exactly be either right or center-aligned.
My recommendation here is to just spend some time playing with these elements to see how you can better utilize this space. Rearrange each item, adjust the size of a few elements and see if you can’t come up with something a little more attractive and readable.
The image below is my quick two-minute attempt. It’s not the best but it at least shows a good general idea of how to use the space a little more efficiently.
Product Photos
My last comment in this area carries over to the product pages as well. I’m not a big fan of the way the products are currently being displayed. There are several reasons for this. First of all, the Photoshop drop shadows are a little rough. I’m not sure if they’re too dark, not soft enough or both, but they could look much more realistic with a little time investment. Right now they just look a little cheesy and bring down the quality of the page a bit.
The gradients are also a little awkward. They seem to violate the overall visual scheme of the page. It’s hard to pinpoint exactly why this is but I think it may be that they are simply too dark on the bottom side of the gradient. Try easing this up and making the gradient more subtle.
Also, the photography across the site really isn’t as appealing as it should be. These are high-end products costing hundreds and even thousands of dollars, yet the photos are sort of dark and ugly. Fortunately, I don’t think the photo shoot needs to be redone. I’m fairly certain that the images simply need some post-processing love.
The site design here begs for high key photography, and these images are simply falling short of that. Though there’s a ton that you could and should do to dress each photo up, but even a simple levels adjustment goes a long way by brightening up those midtones and adding some contrast. Here’s another quick and dirty preview with lighter gradients and brightened images.
Now contrast this to what we started with and you can clearly see the effect of the changes that we’ve made.
See how much of a difference a few little adjustments made? Imagine how much better every product would seem with a serious effort to improve the aesthetic quality. Many of the images are so similar that you could record a Photoshop workflow on one of them and quickly apply it to all of them in seconds instead of fiddling around for hours on each individual shot.
Conclusion
As I mentioned above, most of the suggested changes are quite minimal. Nudging alignments, adding hover effects, these are simply possible improvements that aren’t necessarily emergencies.
If you only have the time and resources to address one of the issues above, I recommend going after the presentation of the products. I firmly believe that the images in their current state are needlessly dragging down the quality of the site far below what it has potential to be. In an online store, the product photos are one of the most important things to get right and yet here I think they’re the area that is the most lacking.
You don’t necessarily have to follow my changes exactly, just attempt to grasp what the core problems are with how the products look and find your own solutions for increasing the perceived quality in these areas.
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.