Sunday, December 13, 2009

Designing Dwayne Brown Studio: Focus your website on key customer tasks

Summary: Focusing your website on key customer tasks maximizes your budget and lead generation.

I position myself as a Ruby on Rails developer in Montreal for database web applications. However, I often have to put on other hats for a project, depending on the budget and the team members involved. In the case of Dwayne Brown Studio, I was responsible for not only the programming of web pages and custom content management system, but I was also responsible for the visual design, interaction, and architecture of the site.

When defining the architecture of a website, I use a customer-centered design approach. A customer persona, a fictional representation of the target audience for your website, is defined. In this case, it was Helen Brightman, a communications manager for a private school in Ottawa. The key task for Helen is to navigate the portfolio to identify photos related to education.

Online photography portfolios are often poorly designed. They suffer from overly “creative” navigation tools, small or abstract thumbnails, and no captions, making it difficult for people like Helen to identify relevant imagery. Even Dwayne’s previous website suffered from some of these issues.

Using an agile development technique know as Do The Simplest Thing That Could Possibly Work, I focused my efforts on creating a simple portfolio that was easy to navigate.

Three guiding objectives were used in designing the portfolio:

  1. Help Helen identify relevant imagery
  2. Allow Helen to scan photos quickly
  3. Reduce pogosticking—jumping back from thumbnails to detail pages

This resulted in the following designs:

Dividing the portfolio into sections where related photos are grouped together, allows Helen to easily identify relevant imagery:

Large thumbnails on a scrolling page allows Helen to scan photos quickly:

A navigation control allows Helen to navigate through photos without having to return to the thumbnails page:

By identifying the key tasks of your customer, you can focus the web design process on what really matters and avoid “creative” solutions that just don’t work for your target audience.

Please note this blog is no longer maintained. Please visit CivilCode Inc - Custom Software Development.