27. February 2012


The mascot was to illustrate the steps of the financial analysis offered on the website Therefore, the character would be shown in different poses that would better represent each one of those steps.

Additionally, we received some input about the mascot’s personality and its look, and we took it as our keywords and the base for the character design.

  • Keywords:
    nice, sympathetic, not to bourgeoisie like – no suit

Analysis of similarities

Beforehand the screen design process had already begun what gave us a hint on which illustration look we should go for. We then started a research with mascot integration in web design and collected a few examples that better fitted the screen concept.

Brainstorming – generating ideas

As a way to speed up the process we decided to use mainly digital tools, so all sketches were generated by digital painting making it easier to change and even combine different ideas.


After the brainstorming process the best ideas were selected and drawings were refined. We presented five different ideas explaining the concept behind it and how it fits to the briefing.

  • Ideas 1 and 2
    more realistic proportions;
    friendly but more serious;
    more officially dressed
  • Idea 3
    More cartoony;
    casual clothes;
    not a businessman stereotype
  • Ideas 4 and 5
    More cartoony (less details);
    casual style;
    big eyes = more friendly


The client has made his choice and also some suggestions we should work on. The new result was a mash-up from ideas 2 and 3. The next step was working the mascot up into vector. The vector style provides a more precise drawing and control of the shapes. Plus, the gradients make the drawing scalable to any size without loss of resolution. On this phase, the colors were implemented and the client could see the mascot final look.


After the client gave us the green light, once character design, colors and the poses for the storyboard got approved, the production of the next poses began. It all followed the parameters created for the first pose and added a sense of continuity to the site.


Last step was integrating the mascot on the website and making any adjustments needed.

If you have further questions about the mascot development, please comment on this article or contact us.