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
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.