Monday 11 June 2012

Design Critique: Paperclip Fox | Van SEO Design

Design Critique: Paperclip Fox | Van SEO Design


Design Critique: Paperclip Fox

Posted: 11 Jun 2012 05:30 AM PDT

How does a virtual assistant convey professionalism and personality through a website design? How can that design help convince potential clients to get touch and hire you? Let’s try to find out by critiquing Paperclip Fox, the site of virtual assistant Kat Csengo.

Aside: My apologies to anyone waiting for the next installment of my series on responsive design. The post I was working on for today took a late turn in direction and could use a little more time.

Kat contacted me shortly after I wrapped up the series of design critiques a few weeks back and I promised I would review her site. I wasn’t quite sure when I would get to it, but given I had a post needing more work, it seemed like a good time to sneak in the review. We’ll returned to our regularly scheduled programming next week.

Here are the previous reviews if you missed any and would like to take a look.

Holding up a notepad with the word 'Think' on the cover

Quick Thoughts

In case you’ve forgotten this critiquing exercise begins with some quick thoughts with little or no explanation to them. It’s an easy way to get into the critique.

  • Clean and simple
  • Space could be more asymmetrical
  • Why not responsive?
  • Are the social buttons necessary on main blog page before posts are read?
  • “Get Started” link on home page leads to 404 error page
  • Why do some links open a new window/tab?
  • Lots of code to create headings. Does every word in a heading need it’s own cufon element?
  • Where are the men? All testimonials are from women. Are men allowed to become clients?

Screenshot of Paperclip Fox home page

3 Things I Liked

Simplicity — The design isn’t trying to do more than it should. It conveys its message quickly and easily without trying to cram too much information on each page. It has a nice clean look that invites you to read deeper.

The design is well organized with a simple 3 column grid in place, 2 columns for main content on the left, and a single column sidebar on the right. Elements are aligned well with a strong left edge to all content and ample space around elements. The hierarchy is clear and your eye is directed to where it should be.

Color scheme — As with the organization, the color scheme is simple, consisting of light blue, white along with gray and black for text. The bright scheme conveys a friendly and welcoming feeling, while the use of blue conveys trust, calm, and security, all good things when trying to get someone to trust you enough to hire you.

While I don’t know Kat, I get the feeling she’s all these things too. She’s smiling in every image on the site and the testimonials included reinforce both professionalism and a warm and friendly personality.

Detail showing text selection gets highlighted with some color as header background

Small detailsSimplicity doesn’t mean a design has to lack in details. There are a number of subtle details to the design that add interest.

The colon before groups of links at the bottom of each page gives them a sense of order. The foxtail on the font used in the logo reforges the brand. Buttons offer a subtle transition of color and the image used to mark the end of the page offers a nice break before the footer.

One detail you may miss is that when selecting text the pseudo-selector for the selection has been set so it’s color matches the same blue used throughout the site.

Screenshot of Paperclip Fox contact page

3 Suggestions for Improvement

Reduce ads on blog — The one place where the site gives up some simplicity and introduces complexity is on the blog where ads take over much of the space. I’m not privy to how much revenue the ads bring in and I have nothing against ads in general, however unless traffic is particularly high I suspect these ads don’t bring in enough to justify what they take away.

They send people away from the site and they overwhelm the content. Without giving up advertising entirely as a revenue stream I think reducing the size of most of the ads would lead to a less overwhelming feeling and could even improve revenue by having more of the ads be visible at the top of the column.

Again, while I don’t know how much revenue they bring in, I suspect some testing could be done to see which perform better and then remove those that don’t perform or move them to a less visible place on the site.

Reduce measure on single column pages — On pages where 2 columns are present the measure of the text reads well. On pages where no sidebar is present it gets long and becomes harder to read.

The font-size could be increased or the width of the text blocks could be reduced to provide for a more readable measure. The later would create more negative space that could be used to create more interesting and asymmetric layouts. A pull quote or testimonial to the side, an image that breaks out of the content box or even multi-column text could all add interest.

Detail showing call-to-action buried at page bottom

Stronger call to action — I assume the main call to action for the site is to contact Kat. At the bottom of most pages is a link to “Get Started,” which could be more visible. In the current design it’s not very prominent and possibly gets missed.

Turning this link into a button with a color that contrasts with the blue would make it more visible and attract more attention to this main call to action. Locating it closer to the top of the page would also help.

Assuming the measure of single column pages is reduced all the links at the bottom of the page could be moved into a column resulting from the new space. These links would form a consistent sub-navigation across the site and lead to what I think would be more interesting use of space.

Above or below this sub-navigation could sit the contrasting and highly visible “Get Started” button.

Closeup of Roy Lichtenshtein's painting, Art Critic

Summary

Overall the design of Paperclip Fox is clean, simple, and inviting. Along with the color it does a good job conveying a sense of professionalism and personality. I get the feeling I know Kat a little and can trust her to work with my business. Subtle details add to the message and provide additional interest to the design.

The large space given to advertising on the blog sends something of a conflicting message and I think the design could be improved by reducing the space given to the ads. This along with a stronger and more visible call to action should lead to more contact from potential clients.

While the layout is organized and elements align well, it would be interesting to see a grid (with more than 3 columns) used as a structure for the design. I think it could lead to more interesting and asymmetrical use of space and reduce some of the longer lines of text on some pages.

As always if anyone else is interested in a critique let me know. I can’t promise when I’ll get to it, but I will get to it.