Many companies use a virtual mascot or avatar to represent their product or service on the Web. At first glance it seems so simple, just follow the well-known guidelines and voilà, you have a cool mascot that keeps people engaged with your site. But is it really that easy? After doing some research I ended up noting that most of the popular mascots and avatars are of rather the same type – there is some personality but not much movement. That raised questions: How much room is there for development and why are mascots so popular?

The answer is simple: People prefer talking face to face. A mascot/avatar helps companies to connect with people and develop a relationship with them. Generally, people prefer common types of avatars such as humans and animals. It’s hard to connect with something abstract, although it is possible. There is also an emotional aspect – the more emotional the design is, the more likely it creates a feeling for visitors. The three following steps should make it easy to create an attractive mascot:

• Consider your target audience
• Make the mascot match the website
• Give the mascot a personality

And yet, most of the mascots and avatars don’t serve their purpose as effectively as we’d expect. Concerning these less effective avatars – for some reason most companies stick with a mascot who has personality but who doesn’t ‘live’ on the site. Therefore, I would like to point out five different examples.

One of the most popular examples of a typical mascot is MailChimp.

Whenever you check reviews about the best online mascots, the MailChimp monkey is always among them. It took 7 years of work and revision until the creator of the logo was finally happy with the result. It happened only when they hired an expert, creator of Firefox logo Jon Hicks, who redesigned the mascot and gave the logo its current appearance. You can read more about the design process of MailChimp mascot here.

Another highly rated example from Jon Hicks is Silverback @ silverbackapp.com

The creation process took a lot less time than for MailChimp, but it’s a good example of the steps a designer goes through to get a good mascot that relates well with users. An idea was turned into basic sketches, which, after adding some details, were scanned in. The next step involved the first layer of colors in Photoshop that resulted in a realistic gorilla wearing a shirt and a drawing pad. But it is difficult to relate to a simple animal. Therefore, as a last phase, Hicks added some more human-like details and facial expressions. You can see the steps of this process here.

One mascot, which takes a step further motion-wise, is Crayons.

The Belgian mascot Crayons is rather rare in the mascot world because it is based on an inanimate object. And yet they have still managed to create a friendly mascot which creates positive feelings and is easy to bond with emotionally. The only negative side to Crayons is its relative similarity to the Microsoft paperclip Clippy. The designer has given the mascot more emotions and movement than usual, and I must say that without a doubt he has done it successfully. Some emotions displayed by the Crayons mascot can be found here.

Now, I’m not quite sure whether Roger MozBot by SEOmoz should be grouped with Crayons or following Sportlyzer.

SEOmoz has done even more amazing work with an inanimate object. Roger MozBot looks like he is alive and emotional. In addition, most female users probably find him cute. SEOmoz has used Roger MozBot in several situations on their homepage and he ‘lives’ a separate life on Twitter and Facebook. And yet, he is still somewhere in between. It’s difficult to say whether it’s because of the company’s brand building or because of the fact that,despite his cuteness, he is still just an inanimate robot.

Sportlyzer has tried to go even further with its avatar, Mike Lyzer.

The virtual coach avatar, Mike Lyzer, is a key element of Sportlyzer’s UI therefore an attempt to make the avatar as ‘live’ as possible has been made. Mike, like Roger MozBot,communicates on Twitter and Facebook but, in addition, he also has a primary role on Sportlyzer. He acts as a coach on the website and gives practical advice to users. Mike’s avatar was chosen via a competition on 99 Designs. Applicants were given three emotions and they had to create a virtual coach from whom people would like to receive advice. You can see the development of Coach Mike Lyzer and some examples of the winning designs in action here.

The last two examples seem to be taking it one step further, and yet we still haven’t seen many examples like this – most of the mascots are rather like MailChimp’s monkey or Silverback’s gorilla. Is there a good reason as to why sites are choosing this path? Is it simply because different mascots and avatars serve different purposes or have SEOmoz and Sportlyzer really gone a few steps further in mascot development? If so, then what’s next?