Archived entry | Matt Wilcox .net

New WWF online store launched

The last few weeks at Karova have been extremely busy, as everyone pulled out all the stops to ensure the new WWF Earthly Goods online store hit the web singing and dancing by this week. Due to a challenging schedule there have been numerous late night sessions, work-through lunches, constant communication with the client, and even the odd 7am start. But after a couple of weeks of hard graft from everyone, the site is now live, and I think the whole team has done a great job. I invite you to check out the new WWF shop and see what you think.

Goals for the new design

WWF felt that the Earthly Goods store needed a visual freshen up in addition to new back-end functionality. The old WWF website ran on top of a modified version of our Karova Store 1.0 platform. The new site runs on a modified Karova Store 2.0 platform, and the new software allowed me to be pretty ambitious with the new design as well as bringing a raft of improvements to the table from the outset. There were a number of goals WWF and Karova wanted to achieve with the new site:

• Better accessibility
• Better use of available space
• A focus on content and products
• A clear and intuitive interface
• Minimal areas for potential confusion and clutter
• Fast page loads
• Better recognition by search engines
• A better integrated search engine

Additionally there were a number of considerations that I had to take into account with the design. I needed to work within the brand guidelines, using only approved colours, logos, placements, and navigation. There had also been some re-branding completed for the print side of the store, meaning the ‘Earthly Gifts’ sub-brand had already been designed for print, and needed fitting in with the new web design.

Realising the design goals

I was able to work closely with our client in order to find solutions that were best for everyone. For example, one way in which I wanted to make better use of available space was to have a resolution dependant layout, a default one for 800px wide displays, and a 1024px layout for those with screens large enough to accommodate it. WWF guidelines call for a fixed width 800px layout, but after discussing the issue and presenting research on common display resolutions now compared with when the guidelines were drawn up, we were given the green light to go ahead with dynamic resolution switching. You can try it out yourself, just resize the browser window to less than 1000px wide and you will see the site pop into a narrower design. Drag it wider than 1000px to see the wider design. In this way I was able to get the best use of available screen real-estate possible. The implementation uses the principle of ‘progressive enhancement‘, assuming a small screen and no JavaScript capabiliy until proven otherwise.

Improved accessibility comes as part of the KS2.0 implementation, using well thought out source code ordering and authoring throughout, the site also has a print stylesheet for better output on a printed page. Additionally, the site uses skip links which are hidden by default, but accessible by screen readers, and to other users visually ‘on-demand’; either by hovering the mouse near the top of the page, or by tabbing through the links on the page.

Page load times are as low as possible. The design uses only four CSS images, which total 29Kb for the low res version or 27Kb for the high res version. The CSS itself totals 27Kb for the entire site, though not everyone will load all of that, as that figure includes IE specific ‘helper’ files, a print stylesheet that won’t be loaded unless you print the page, and the high resolution stylesheet that wont be loaded unless your system can cope with it.

The new search engine works slightly differently to the old one, and we hope will prove itself as a better solution than before. It now has a two-stage process, initially grouping results by categories as a pure text list, and then by clicking on the category link a second step formats the search results contained in the clicked category as a thumbnail gallery. This offers a solution that can handle large result sets well, and still enable the user to shop in a visual way, rather than needing to read a lot of text results. Here’s the first stage after searching for organic products.

If you have any thoughts about the new site please let me know, I’d be interested to hear your feedback.

For the sake of archiving and comparison, I’ve added screen-captures of certain pages from the old and new design. More thoughts and notes about the designs, old and new, are contained as annotations on the images to which they relate.

Entry Information

Posted:

Fri, 18th Aug 2006 at 18:08 UTC

Filed under:

• Portfolio

Tags:

• design
• karova
• work