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.