I find competitive analysis to be an essential tool for design. In my quest to design a more appropriate layout and theme for my blog, I did my due diligence and searched the web high and low for portfolio sites from which to get ideas from. This analysis not only grounds you with a firm baseline of what is expected of your design, but often yields a nice list of action items that can be used to outdo your competitors.
I’m a big fan of simple and direct. I believe that if you can take something away from a design and it still works, do it. Which is why I immediately envied Nick Finck’s website. The scribbles on my quad-ruled pad and my chosen color palette to that point were very similar to what he already had decided to place in front of me. What’s more is that he’s also in the same field as I am, so it would be bad taste to copy him. Instead I’ll use his website as a case study.
His home page is nearly flawless when it comes to the above the fold area:
- Professional quality photo immediately letting me know who Nick is.
- Large and simple navigation scheme: About, Blog, Speaking
- Clear calls to action: “Read My Blog”, “Get in Touch”, “Follow me on twitter”
- Immediate association with companies that look to be respected.
- Area has lots of whitespace so the page doesn’t feel cluttered.
Having said this, I find a few things that seem disruptive:
- Unestablished link color. If you were to ask me based on my gut reaction what color indicates what is interactive on the page, my immediate response is “light blue”. However, upon inspection the correct answer is: orange, blue, green, dark tan, black, and white. The lack of link consistency is probably the page’s biggest failing.
- In addition the underlining of links is inconsistent:
- The tagline “UX/IA Pro, Speaker & Community Cultivator” seems a bit too large. My eyes were actually drawn to the photo and the size of the tagline text resulted in a bit of banner blindness at first.
- When you hover over the two companies under his photo, a huge information bubble appears. This was unexpected and actually subconsciously prevented me from wanting to click on the company links. While it’s a cool use of jQuery, I think it detracts from the overall experience.
The About page is also very well done:
- Clear page title, which is set on a tan banner that ties into the Home page’s design.
- Very personable and professional photo. I want to meet and/or talk to this guy.
- Journalists are given due consideration with a ready press kit. Anyone who reads Jacob Nielsen’s insights should know the importance of Press Area Usability.
There are very few negatives:
- The “Read More…” link hides 2 extra paragraphs, that slid into view when clicked on. Presumably this is to help ensure the “Testimonials” header creeps in above the fold. I would have shaved another paragraph off since browser chrome may still hide it.
- The Facebook and Linked In buttons fall far below the fold. I missed seeing these items quite often.
- Same link issue as on the Home page. “Testimonials” is not a link, but “Download press kit” is. This is confusing.
The Blog page is probably the worst designed member of the website. This is a shame as it is definitely the one I’m most interested in, since I am an avid consumer of usability and user experience information.
- 50% of the page is wasted on non-blog content. This is a perfect example of not putting your best foot forward. Instead of making the hard decision as to what was more important, everything is included instead.
- Instead of having 2 columns of supplementary content, probably only one should have been chosen. If I were to make the decision, I would omit the Flickr and Delicious sections. Flickr albums can be linked to via a blog post when photos are uploaded, and my expectation is that less than 5% of the web community understands what is Delicious.
- I’d definitely keep the Twitter feed and the Ad. Twitter feeds are updated regularly, so there’s always fresh content waiting for a visitor. And let’s face it I’d want to tout and flaunt my own services on this key page as well (so the ad stays).
- I’d also omit or condense the speaking events section. My assumption is that it is present on the page because the Blog is a frequent destination, so extra exposure is good. But having said that, if it were up to me I’d omit it and pimp my speaking events in the Twitter feed. Less is more.
Overall I think this is a fantastic website, and excellent at presenting a professional face to the UX/IA community. The majority of the website practices what he likely preaches in his speaking engagements. There is very little clutter and each page seems to hit the goal that was laid out for it.
Having said that, there are only a few key areas that should still be addressed:
- The Blog page should eliminate one of the supplementary side columns and omit or condense much of affected content.
- A better separation should be made between links that are interactive and headers that are not. In addition, link behaviors in general should be made more consistent.
But yes, I will likely be using Nick Finck’s website as a model example of a professional portfolio site. As should you.
Disclaimer: These are my opinions and insights, and are intended to improve the example being studied. Like all things in life, there’s a good chance I’m just wrong. So take it all with a grain of salt.