WWF
It took eight weeks, 1,600 cups of coffee, 1,920 cigarettes, 16 pork sausages and one instant BBQ. And now I can officially talk about it.
NB: This article refers to a prior version of the WWF UK online store that I designed in 2004.
No tables were mistreated in the making of this web site
After eight weeks, 1,600 cups of coffee, 1,920 cigarettes, 16 pork sausages and one instant BBQ, I am pleased to announce the launch of our latest site, a new online store for WWF UK.
Design evolution
Original creative concept
Original design concepts were provided to us as a style guide, along with some newly created icons. The concepts brought in elements which match the latest WWF UK printed mail order catalogue.
Key elements included a coloured band on the left of the page which related to the different sections of the printed catalogue, the tree image which features on the catalogue's cover and the placement of key products and promotions.
Grey box content layout
Our first task was to create prototype layouts using a technique similar to Jason Santa Maria's Grey Box Methodology. At this stage of the home page design, it was important to create space for functional elements including navigation, an expanded search area (which offers keyword searches and a drop-down menu of commonly used search phrases), palettes for recently viewed items, basket contents and incentive offers.
We also wanted to expand the space available for product information, (providing product summaries, prices and buy now links) without losing the visual impact of the branding image, which we moved from the left into the center of the screen.
Mark-up guides
We marked up the grey box layouts with the tags that we were likely to use, and the names of layout <div>s (marked in red). In this example of a category 'range' page, it was decided to use definition lists to mark up product information.
Using CSS made it possible to begin technical development and mark-up after grey box comps had been approved but before final designs were complete.
Adding branding
Our next stage involved bringing colour into the grey box layouts and included experiments using colours from the original design comps, as well as those from WWF's official colour palette. To expand the range of colours and tones available, we made darker and lighter swatches by using my favourite method and chose to replace the original coloured side panel with complete sections in different colour-ways.
At this stage a curved bottom edge was added to the top of the page (later removed) to hint at the curvature of the Earth and to soften the 'boxiness' of the layout. The branding area was also reduced in height to allow for more product information 'above-the-fold' and a tag-line was introduced.
Turning comps into web pages
With precise comps and mark-up identical to the original plans, the next stage was to work on the CSS files. The final layouts remain reasonably faithful to the design comps and although design revisions were requested right up until launch (removing the curved top edge and changing the colours to match the WWF UK corporate site more closely), these changes required only tweaks to the CSS files and not to the underlying mark-up.
Most interesting to see was how the layouts reacted to the inclusion of live product data from the MOM application driving the content. Here, minor changes to the layout CSS were needed to increase the space available for the longer product descriptions.
Throughout the site, the layouts held up pretty well under the deluge of content and a two day 'final pass' ironed out issues only seen once the site contained live data.
Summing it up
Although web-standards based sites are no longer particulary newsworthy in certain sectors, working with WWF, who are embracing standards and accessibility (because they want to, not because they have to), has been a joy.
Thanks also to those kind souls who gave their time in Mac browser and screen-reader testing. Carole, Dan, David, James, Julian and Sue, go home and get some sleep... ;)
NB: This article refers to a prior version of the WWF UK online store that I designed in 2004.
Replies
-
#1 On August 5, 2004 01:48 PM Jonathan Snook said:
It's posts like this that keep bringing me back to this site. :) The site is clean and fast. Well Done!
Now I've got one question and one comment.
Q: Why is there a blue hover effect on the large image? (Firefox .9.2/Win)
C: With the slightly redesigned products area, if you scroll down so all you see are products, it becomes more difficult to discern which product the price and "order now" buttons pertain to. I feel that some sort of seperator between stacked products would help.
-
#2 On August 5, 2004 01:53 PM David Horn said:
The site is great - congratulations. Very slick. And, like many of your posts, I can see myself coming back to this one again and again.
My only concern is that your cigarette:coffee ratio is a shockingly low 1.2. You're clearly either not smoking enough or drinking too much coffee to disguise it.
You should be aiming for 1.8 - 2.1, something like that.
Better luck next time.
At least the site was worth it. Well done!
DH
-
#3 On August 5, 2004 03:24 PM Derek Featherstone said:
Nothing I haven't said before, but here it is anyway.
Brilliant work, Andy. In addition to the site being a really nice piece of work with great design and functionality - you have gone above and beyond by exposing your methods, techniques, technology, decision making process and more to us.
These real world posts, with the kind of detail you are providing on some of your projects help *everyone*.
Congrats mate...
Derek. -
#4 On August 5, 2004 03:57 PM Carlos Porto said:
Absolutely amazing!
Talk about synergy. Its great to see 3 different groups come together and produce such a nice site.
Also, I noticed somebody has been reading defensive driving!
The fact that your mentioning the use of XSLT, really makes me think I should start to read and learn more about it.
Thanks for the great share! Great work!
-Carlos
-
#5 On August 6, 2004 10:14 AM Phunky said:
XSLT is great! Really powerfull and a great tool when used in the right place...
Just gonna go have a browser around the store and see how it runs :)
-
#6 On August 6, 2004 10:37 AM Jim Amos said:
Curious. I'm not seeing the history pallette anywhere on the site (PC Firefox 0.9)
-
#7 On August 6, 2004 10:44 AM Malarkey said:
@ Jim: The history palette kicks into action when you visit an item's detail page. eg: http://shop.wwf.org.uk/store/Detail.aspx?pid=380932
-
#8 On August 6, 2004 12:02 PM [Luc] said:
Excellent work, although I do agree that the products could do with some kind of separation - shop.wwf.org.uk/store/Range.aspx?t=cid1013 - it kinda all flows into one in the middle...
-
#9 On August 6, 2004 12:43 PM Jeremy Freeman said:
You've done an amazing job with this Andy. It's aethestically pleasing, clean, crisp and so user friendly.
From an accessibility point of view, I'm interested to see what kind of feedback you get from the interesting accessibility statement that you came up with. Is it really "impossible" to design for all?
Didn't you give up the fags?!
J
-
#10 On August 6, 2004 04:25 PM Tim said:
I think you've done a great job, but in the end looks like every other CSS/XHTML site out there...which I suspect might be symptomatic of the technology riding roughshod over the appearance.
How else do you explain such a massive disparity between the original concept and what you ended up with?
-
#11 On August 7, 2004 07:46 AM Dave S. said:
"How else do you explain such a massive disparity between the original concept and what you ended up with?"
Pretty easily, I'd imagine. There are obviously very few visual elements from the original that were retained to the end; only Andy can say for sure, but I suspect that's indicative of a flexible design process. Very rarely will a final site ever look like the original mockups.
In fact, it's so often NOT the case that anything is retained from the original drafts that I find the question a little naive. Sure, some elements may have been influenced by coding concerns -- but then, some print jobs are influenced by the number of inks available within the budget. It's just the nature of the job that aesthetics are influenced by technical concerns.
-
#12 On August 9, 2004 02:29 AM Andrew Krespanis said:
Another beautiful Karova Store site, Comrade Andy.
Although I must ask, what does a panda have to do with the World Wrestling Federation? :p -
#13 On August 9, 2004 09:39 AM Phunky said:
its WWE now anyway :P due to them wanting WWF.com
-
#14 On August 10, 2004 05:12 PM Andy Budd said:
Good work Andy, and thanks for sharing your process with us.
The grey box idea is an interesting one. It's sort of halfway between a wireframe and a final design. I find one benefit of wireframes is that they remove the design aspect from the mix so the client can focus on content and interactivity. My concern with the grey box idea is that it could muddy the waters slightly.
Did your clients 'get' the concept? It doesn't look as though the design changed much between this phase and the final roll out, so I'm assuming they did.
I'm quite interested in how different the grey box design was from the initial concept you were given. Often web design companies are handed concepts from creative agencies with little or no experience of the web and told to just build it. These will often have been approved by the end client before the web design team are even bought into the project.
In the case of the WWF were the concepts literally just guidelines, or did you have to convince the creative agency or end client that you guys should produce the final design?
-
#15 On August 10, 2004 05:52 PM Malarkey said:
@ Mr. Budd: Interestingly, the client was very keen on the grey box concept, and if we could have had more time, we would have performed user testing at that point :(
The grey boxes and the final result DO differ from the supplied (a point made by Tim above). The point (not made well enough by me in the original post) is that the supplied concepts were little more than a variation of the catalogue designs. They contained very little of the navigation needed on an e-commerce site,
We 'did' make a CSS mock-up of this comp, but the decision was made to take only the 'spirit' of the comps and allow the content/navigation to dictate the layout.
The other big change was in the colouring. We began by using the 'mustardy' colours from the comp (and shades of), but later in the process it was decided to opt for the stronger colours of the WWF palette, as seen on the WWF UK home page at http://wwf.org.uk
Overall, the 'visuals' (minimal I agree) grew organically throughout the project and were governed by functionality and content, rather than an 'imposed design'.
-
#16 On August 10, 2004 11:54 PM johnny said:
I likes big booties
-
#17 On August 11, 2004 02:27 PM Rob Reed said:
Great work Andy et al.
One thing I couldn't find is a link back to the WWF info site. (I know its a well known URL, but someone may want to just read about Pandas without actually buying one).
Thx for the write-up.
-
#18 On August 11, 2004 10:52 PM Phunky said:
You've been listed on cssbeauty.com for this now too...
This article was originally published by Andy Clarke on his personal web site And All That Malarkey and is reproduced here for archive purposes. This article is published under a Creative Commons By Attribution License 2.0.