Red Ant

Refactoring a design

Sat, 26 Apr 2008 21:07:29 GMT

We’ve recently spent some time adding some new features to a site that we built a while back. Part of this was moving it to a new CMS, and since we had the chance, we took a look at each of the templates to see where they could be improved.

I won’t bore you with all the various tweaks and changes, but one page in particular was interesting in terms of refactoring a design. The page was a product menu. It lists several product groups and the products within each. Each product menu has between two and seven groups of products.

Need to cut to the chase? Here is our original version, which we redesigned it to be faster and more useful. You can play with the new version here.

The original version

Our original version was this:

This was (in my opinion) a good example of something that “photoshops well”, but is not particularly usable in when filled with real data. This wasn’t evident until the site was live and filled with real content, and you needed to find something specific (rather than “a product”) or browse around a product area.

Each product area has a drop down list, which shows a set of product names that you select from:

This design worked well if:

you knew the exact name of what you were looking for (so you could find it in the list)
you could find the item easiest via an alphabetical ordering
once you’d selected a product, you didn’t want to jump to another
the product area blurbs were helpful for you in your search

Refactoring

It’s not that there was anything that wrong with the original layout. The design neatly fits all the required information in, plus a blurb about each of the product areas. We designed this area so someone could get to any product with a minimum number of mouse clicks- and measuring against this metric the design is successful.

However, we all thought there were a few ways that we could improve the page, and make it more useful:

we dropped the text summary to get back some space
arranged each area in a vertical list rather than a grid. Each item expands to show all the products within. Clicking on another product area collapses the first.
used thumbnails of each product as a visual aid.
increased the size of the mouse click hit area to make it easier to click on a specific product (the previous select list made it easy to choose one product too high/low if you weren’t careful with your mouse)

Here is the revised design, and you can play with it here

We thought that using thumbnails of each product might be a nice idea, but it was only when we prototyped real data such as the tools menu that we could see how useful a thumbnail would be in this instance. The tools menu lists all different types of secateurs, saws, and tree cutting devices. There is no way you could know whether the ARS Fruit Pruner 300L is the same or different to the ARS Fruit Pruner SE30 (they are different) by looking at the product names. But it is quite clear from the thumbnail that the SE45 is closer to the 300L.

Another thing that we didn’t realise during the intial design phase was how products are named. Yates often include the brand or product area as part of a name, which makes for a lot of repetitive data in each. This repetition makes it hard to scan a list and pick the difference when displayed in the way that we had it. Having thumbnails greatly help with this problem.

Avoiding the waterfall

The design process for a web site works well when iterations or design cycles are allowed/encouraged to occur. For us, this means avoiding waterfalls- where one person or team does a bit, then passes it on to the next. Tasks progress from one stage to the next in one direction- rarely going back upstream. For web sites, they often look like this:

one person makes a wireframe UI
who passes it on to another to get it signed off by the client
and then on a designer to photoshop
then on to an HTML person to cut
and then somehow squeeze it into a CMS or web app

Since someone has diligently been getting signoffs at critical points, there is little opportunity or motivation for someone towards the end to redress issues- in fact it often becomes progressively harder (“that’s already been signed off…”). You’ll end up with exactly what you asked for, but it might not be the most satisfying process or final result.

The way we try to tackle this issue is to involve everyone as early as possible, and get them operating as an autonomous team. If someone sees something that is not ideal or presenting problems with their own stage, we try and fix it (aka “repairing broken windows”) by taking it back upstream.

In this instance, the design had gone pretty much all the way through our process. But by looping back and spending some additional UI and design time, we were able to resolve other issues eg: the grid layout was difficult and taking time to maintain across different browsers, and adding in additional areas was a manual HTML/CSS task. We were also able to make significant improvements to the usefulness of the screen.

Earth Hour goes 3D!

Wed, 19 Mar 2008 15:42:46 GMT

As part of our ongoing work on Earth Hour, and to help contextualise the global nature of the 2008 event (144,000 signups and counting...), we made this 3D globe using Papervision3D. We've plotted all the sign-ups based on IP (using the Red Ant spy satellite) and a total count of sign-ups by country.

You will need Flash player 9 installed to view this demo.

We output zipped data files on a regular basis, and after the event we plan on showing how the message spread over time, so check back soon!

Earth Hour 2008

Mon, 17 Dec 2007 13:17:59 GMT

Last March, Sydney had an event called Earth Hour. This involved getting everyone to turn their lights off for an hour, to see how far we could reduce energy consumption. Street lights were kept on for safety, but it was quite surreal to look out and see everyone start turning lights off. It certainly made you think about how many lights and appliances you leave on, just because it is inconvenient to turn them off.

Well, it was a great success and Sydney ended up saving about 25 tonnes of CO2 emissions. This year, it’s become a global event. At 8pm on the 29 March 2008, hopefully millions of people in different cities around the world are going to turn their lights off.

On Friday morning we helped launch a small part of Earth Hour 2008: www.earthhour.org

Working with Leo Burnett, we created the site in Rails, with Radiant for content management. There is quite a lot of flash video, so we used Lighttpd for better performance for streaming FLV video, with the rest of the site on several Mongrel webservers.

sign up forms are tricky to do well

Tue, 30 Oct 2007 15:39:54 GMT

le grand content

Fri, 12 Oct 2007 09:18:01 GMT

Oooh we've been busy little ants...

Thu, 16 Aug 2007 21:21:14 GMT

We’ve been super busy over the last month or so, counting down the days to our APEC lockdown. We’re going to stock up on coffee big time just in case George decides he likes it here and chooses to stay a bit longer.

Here are a few of the projects that have been keeping us busy lately:

Books Alive

The Books Alive site is an Australian Government initiative to encourage people to read. Rather than listing thousands of titles you could read, the Books Alive site is all about 50 really great books that you should read!

“Your personal guide to 50 books so good, everyone will want to read them.”

Visit the site

Broadcast Australia

We created a new visual design and site layout to highlight the companyâ€™s most important marketing messages and make it easier for potential customers to find information relevant to them. We also set up a new Content Management System so that content owners inside the business can update pages almost as easily as updating a document on their desktop.

Visit the site

Huggies Jeans for Genes

We added some denim bling to the header area as part of Huggies support of Jeans for Genes day. We also developed a new photo upload tool that allows members to upload photos of their children wearing jeans. This is a reusable tool that will be used in other photo based competitions, and includes an extensive image moderation application.

Visit the site

Kleenex Wipes

A brand new site for Kleenex Wipes. Watch for the closing doors!

Visit the site

Snugglers

A brand new site for Snugglers

Visit the site

KCP4u extranet

A new extranet application for KC Professional, which contains sales material and product information for internal staff and distributors.

Oxfam Trailwalker

The Melbourne walk has come and gone, and just a few more sleeps until the Sydney event. This is a .net project that we’ve been working on with the Oxfam team.

Visit the site

Building a meaningful forum

Mon, 23 Jul 2007 15:40:57 GMT

One of the things that we’re constantly on about here at Red Ant is meaningful interaction. A website is all well and good if it gets a gajillion hits, but, if those hits are from bots or the human equivalent, then the only meaningful thing that you’ll have at the end is a large bill from your hosting provider.

One of the ways people have interacted with one another since the Internet was in Internappies is, of course, through forums. And, while many forums can lay claim to fostering community and interaction between users, just as many forums lay waste to that same idea, and leave behind only wasted time, wasted words and wasted bandwidth.

When Huggies (did we mention it was one of the most popular parenting sites in Australia?) asked us to rebuild their forum earlier this year, we had all of this in mind. But how’s it gone so far?

Well here are some stats: Over 12,000 posts have been made by over 1,200 individual members in one week. The longest post has over 2,800 replies and counting. It’s had ‘more than 600,000 posts since it was launched, and the company’s experts are now receiving more than 100 questions a month.’

This is all summarised neatly in an article in the Sydney Morning Herald:

‘Through the forum, Huggies is able to build a strong relationship with parents that hopefully builds loyalty to Huggies products. ‘The options for communication and interaction that web 2.0 technologies present are widening rapidly.’

There are a few things that mark out the Huggies forum. The presence of experts helps to guide user-generated discussions along helpful paths – users can submit questions and get them answered on a one-to-one basis, as well as discuss related answers together. It also helps that the forum is focused around a singular topic, parenting and pregnancy, and while it might seem to be an obvious thing to say, that topic is one that the core audience is keen to discuss.

Lesson for the day, when you’re building interactivity for users: spare a thought (and hopefully a bit more) for what that interactivity will mean, both for the user, and for the client.

Text Cloud in Flash

Mon, 09 Jul 2007 16:20:30 GMT

This post outlines an idea that we’ve come up with for visualising a list of information in interesting ways. We’ve included some code examples, a live example, and you can download the source code to roll your own.

First, some background. We’re working on a project that had some kind tag cloud as part of the layout, serving both as navigation and a quick way of visualising what the content (in this case books) was about. Initially, the idea was to have a regular tag cloud. Content within the site would be tagged by users, and then we’d display these as links next to the book as a way of showing what other people thought of/categorised the book as. Clicking on “green” would get you all of the other green books. The more often a book is tagged green, the bigger the green link becomes in the list.

But as the project progressed out of wireframe and into design, we came to the realisation that many of the pages probably wouldn’t get tagged – at least not by “real” users (read: not Red Ant people). One of the things we try to do in our design process is to have lots of reviews to really test out ideas with all of our team. What might seem a cool idea early on might end up being a production nightmare in the harsh light of day, or alternately someone might have a much better idea on how to do it. Someone brought up this Library Thing post which discusses tag clouds on Amazon and Library Thing – well worth a read if you’re considering using tag clouds as part of your site structure.

Tagging works well when people tag “their” stuff, but it fails when they’re asked to do it to “someone else’s” stuff. You can’t get your customers to organize your products, unless you give them a very good incentive. We all make our beds, but nobody volunteers to fluff pillows at the local Sheraton.

So, we had a problem in that the tag cloud idea wasn’t necessarily going to work getting tags from users. But it did work as a visual device- a really simple way of getting the overall flavour of content on any given page. Joe Lamatia has an interesting post about moving away from basic tag clouds, and their value as a way of visualising information. Using his title as inspiration, we worked up this re-usable snippet that can be used in a Radiant page (or any page/CMS with some tweaks), and it looks like this:

Miles Franklin Award
versatile and provoking
powerful narrative
mystifying power
Queensland
most impressive novel
Essential reading
love and betrayal
inter-racial relationships
Indigenous spirituality
colonial violence

Example of Text Cloud in Flash. Refresh the page and you’ll see the keywords written out as text, and then get replaced with the Flash.

Integrating a text cloud into Radiant

To make it easy to generate a text cloud in our CMS (we’re using Radiant), we thought that a simple ordered list was the most logical/semantic choice for content. We didn’t want our content authors having to remember lots of markup to generate what was in essence a list of keywords describing the content. To add a text cloud, they add a “cloud” part to the page, and then use Textile to write a list of words, starting with the most important:

We grab the “cloud” bit with this code, which could be either in the layout or as a snippet

But this is only half the story. Next, we could have gone 2 ways. The first would have been to simply style the content via CSS and Javascript, and the second was to use Flash. The advantage of Flash here is that it gave us a bit more freedom with regard to font, effects, and speed of production. The Javascript feeds this list of words into a Flash movie and we let Flash handle the weighting. We used Prototype to parse the list, and added it as a variable into the embed code.

var so = new SWFObject("root.swf", "text-cloud-flash",
  "525px", "100%", "8", "#ffffff");

so.addVariable("tags",$$('div.text-cloud li').collect(
  function(li){return li.firstChild.nodeValue;}).join() );

so.write("text-cloud");

From there it is pretty straight forward. Flash randomises the array, calculates relative sizes of fonts, and generates our text cloud. The only tricky thing left to do is to resize the Flash content on the page to fit the height of it’s content. We didn’t want to limit the content author at all- if they want 5 words or 50 words, the Flash needs to deal with it gracefully. Again, this is handled with Javascript and Prototype. This means that the content editor doesn’t need to worry about passing additional arguments to make it bigger for more text, and we can be sure the text cloud will look the way it’s meant to look.

Try it out

Download and roll your own

flash-resize.js – resizes the flash
text-cloud.js – talks to the flash
root.swf – Flash that contains the bling. Get the flash source here

Get the desktop

Tue, 26 Jun 2007 21:25:06 GMT

It’s been a few months now since we redesigned our website, and we’re thrilled with the responses we’ve had. We’ve created a set of desktop wallpapers based on the design. It comes in a range of sizes, and we think it looks pretty neat. Download yours today!

and also in wide format

Red Ant creative award at UTS

Tue, 19 Jun 2007 21:43:23 GMT

This year, we’ve started sponsoring a design prize at the University of Technology, Sydney for excellence in web design. The Design school already has quite a strong web design component, and we thought that sponsoring an award would be an effective way of encouraging this.

The award is made available to the student(s) who are judged through their portfolio and interview to have the most creative and practical approach to design for web media.

This years winner is Kittikorn Thongsophon- congratulations from everyone at Red Ant

See more photos on Flickr – and check Darral from UTS catching up on some sleep.

More information on the awards are here on the UTS Design faculty site. If you’re a UTS student, you can find out more about this and other awards available in the UTS Handbook