site redesign

Last weekend, after much sweat and beers, we launched the new design for Steve Curtain’s eucalyptproductions.com website. What stemmed from my NED12 assignment was 10 problems and solutions to the original construction – I don’t think we can call the original a “design” since it wasn’t really thought about, it was merely put together and published. Care to read The Secret to a Great Blog Redesign?

Problems with the original site

1. lacking any search facility
2. all (too many) sponsors presented in sidebar on every page
3. large header graphic serves no real purpose, takes up a lot of space on every page
4. navigation links are tiny and difficult to distinguish, several have too many words, and also the order of navigation items is illogical
5. width of main content area is too narrow (405px), resulting in
   • very tall pages to scroll through (too much)
   • layout challenges for main content including graphics
6. link to sponsor (Hard Shell Backpacks) is broken and lacking a logo
7. shop is handled by external CMS (Zen Cart) – complete overkill
   • at least double the maintenance of presentational CSS
   • inconsistent look and feel
   • too many steps to complete purchase
8. lack of future upcoming events feature
9. excess content (overload) displayed on home page (2 full posts, trailing graphic and a eucalypt definition)
10. little thumbnail graphics linking to larger versions in ugly manner

Let’s take a look at the new design, the solutions it provides and the novel features that were added.

Goals of the re-make

1. add a search function: an input mechanism; a results page with excerpts.
2. show only 1 sponsor at a time, rotate through on a random cycle, and hide them from home page
3. make unobscured glossy hero images on front page only, and add a logo to the banner
   • use client specified fonts
   • check logo development guidelines
4. re-organise content into logical hierarchy and make a nav bar:
   • each primary button 1 or 2 words
   • aim for 5 – 7 buttons maximum
   • arrange items in order of client’s desire
   • secondary pages on fly-outs from primary items
5. remove sidebar, make main container 800px wide
6. remove dysfunctional link
7. internalise the shop:
   • minimise additional CSS hooks
   • use the same domain and general CSS and layout structures
   • reduce the number of steps to purchase
8. create an upcoming events feature so fans need to return to the site
9. strip home page content down to fit 1 screen height:
   • a single excerpt of the latest post
   • list a few upcoming events on the front page
10. use a Lightbox effect to enhance the visual experience all round

The process involved wireframe and prototype development, a lot of fresh ideas, stacks of consultation and meetings. We made some executive decisions on implementation. The prime one being to eliminate the character from the logo thereby reducing it to simply text. Having successfully addressed ten major problems in a single project, I am more than happy with the resulting website design.

Given that the content is largely a visual medium itself, removing distracting elements and careful arrangement of content pieces is crucial. I hope this clean design leaves no room for distraction and does well to focus visitors’ attention directly on the content. It is a flexible design and channels for new content have been established. Thinking ahead, I believe this design not only meets the needs of the client and visitors now, but will also meet their growing needs for at least a few years ahead.

Finally, the drawbacks at this stage include:

• a slightly ugly invoice is produced by the lack of a logo – there must be a way to insert that automatically.
• sub-domains such as shop.eucalyptproductions.com haven’t been implemented yet. Redirecting to permalinks is not easy.
• Update 25/10/2010 – shop.eucalyptproductions.com is now working, taking visitors to the shop!

So what do you think? Has a good job been done? What could have been done better?

Bibliography

Bowman, D. (2003, June 2). A design process revealed. stopdesign.

Retrieved August 25, 2009, from http://stopdesign.com/archive/2003/06/02/design-process.html.

Instinct Entertainment. (n.d.). WordPress e-Commerce Plugin a WordPress Shopping Cart Plugin by Instinct.

Retrieved August 27, 2009, from http://www.instinct.co.nz/e-commerce/.

Tyson, M. (2008, September 26). Smart 404 for WordPress.

Retrieved August 25, 2009, from http://michael.tyson.id.au/plugins/smart-404/.