Web Design Critique #77: Capital Teas
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 Capital Teas. Let’s jump in and see what we think!
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Icons, Vectors & More
PowerPoint & Keynote
Logos, Print & Mockups
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 Capital Teas
Capital Teas is a fifth generation, family-owned specialty tea merchant. They offer more than 175 varieties of the highest quality loose-leaf teas and herbal infusions from the world’s finest growing countries and regions, including Sri Lanka, India, China, Japan, Malawi, and Kenya. Their tea-ware products include traditional and modern teapots, brewers and infusers, and many other specialty items. They also offer artisanal honey, jams, tea-infused chocolate, and other gourmet packaged foods that accompany their teas.
Here is a screenshot of the homepage:
My first impression of a site is built heavily on the idea of whether or not I can tell exactly what it is all about within the first three seconds of seeing the home page. That’s right, three seconds. You’ve got to grab my attention, tell me who you are and what you’re about in less time than it takes the average person to tie a shoe.
In the case of Capital Teas, they pass this test with flying colors. This site screams online tea shop (in a good way). I see photos of tea everywhere, the word “tea” appears several times, the colors suggest tea; I’m instantly well oriented and know that if I’m looking to buy some tea, I’m in the right place.
As far as the visual aesthetic and layout of the site, I would say that it has good bones. There’s a solid structure and attractive visual aesthetic started. It needs a little work, but nothing too major. Let’s jump in and look at a few of the specific areas to see if we can find some suggestions for improvement.
One of the areas where I see the most problems is the header. It looks like it was designed to be simple, but the marketing department got ahold of it and trashed it. There’s so much stuff crammed into it that it feels cluttered and stands as a stark contradiction to the fairly clean aesthetic established by the rest of the page.
The social icons in particular could use some major cleanup. The design for each is inconsistent, multiple Facebook items seem redundant, there are overlap issues, and everything in this place is crammed together with very little breathing room.
The “Deal of the Day” and newsletter signup on the other side are furthering the cluttered look as well. These elements aren’t aligned particularly well with anything else on the page and seem tossed in as an afterthought.
How to Fix It
Some tough decisions are going to need to be made here because something has to go. In fact, several things have to go. It feels like someone tried to cram a bunch of footer elements into a header just to get them a better place on the page, but remember, if everything is special, nothing is special. You’ve got to choose what has the most importance and give your items a clear visual hierarchy.
I recommend moving most of the content in the header to elsewhere. Try to identify the absolutely critical elements. Start with the logo. It’s a nice looking piece that sets a great old world feel for the site, give it more attention by taking away the surrounding elements. The other necessary item is the shopping cart. If you can reduce the header to these two items, you’re doing great. If not, I’ll allow for the inclusion of the deal of the day. Everything moves either to the footer or better integrated into the rest of the page.
While you’re at it, find a simple social icon set that has matching icons for every social network that you need.
Moving down the page, next we come to the navigation. Pulling off an effective and non-cluttered double navigation is tricky business, but I actually really like the way it’s been handled here. A pure text menu has been paired with a search box and stacked on a colorful icon-based menu and the result is a great offering of ways for me to find what I’m looking for.
One thing that I find a bit awkward is the design of the dropdown menus in the primary navigation. They have a disconnected, floating feel that makes it almost seem like something isn’t working quite right.
I recommend rethinking this and experimenting with different visual ideas that make the dropdowns look more integrated and connected to the main menu.
The main content area consists of three boxes. These are a good mix of formats and consist of a large slider, a static image and a little movie (which thankfully doesn’t auto play). This area is great. I love that it’s been paired down to three boxes, the layout looks nice and clean and it really brings focus to the products and information being shown.
As a photographer, I’m a sucker for good photos and this site successfully delivers in this area. It looks like the owners have really invested in quality photography and it pays off by making their products seem very high end and attractive.
After the header, the second major area that needs immediate attention is the typography. Most designers recommend that you choose one or two solid typefaces for a whole project, maybe three if you’re feeling adventurous and have enough skill to pull it off. I lost count of how many typefaces I saw on the homepage alone on this site.
Your type is one of the strongest indicators of the style of your site. It sets a mood, a time period, a tone of professionally and a lot more. If it’s inconsistent and scattered, so are the messages that it’s conveying.
I definitely recommend scrapping all of the various typefaces, then choosing one or two with a high degree of readability and a tone that matches the intentions of the design. The result will be a much more consistent, professional feel for the site as a whole.
There’s a strip of boxes along the bottom of the site that I’ll call the “secondary content” for our purposes. This layout combined with the three boxes above is simple and solid. It reminds me of a few of the layouts in our article 10 Rock Solid Website Layout Examples.
My only real problem with this area is the typography, which I’ve already gone over. Specifically, the problem here though is that the typeface on “view this product” is so thin that it’s almost unreadable.
To sum up, Capital Teas has a great start to a a super attractive site. The basic layout structure is solid, the photos are beautiful and the dual navigation works well even though I typically discourage that route. Some areas to focus on improving include the header, which needs to be de-cluttered, and the typography, which needs to be paired down to a few select typefaces.
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.