Our client Mouse challenged us to design a badge system that didn't look like badges! Here is how we tackled that — our process and solution.
Mouse asked to create a badge system where the art didn't look like traditional badges. Some other requirements were the designs needed to be both whimsical and professional, and of course consistent with their overall brand. We also needed to offer a template to our client, Mouse, so they could use it themselves to create badges quickly and easily as their achievement library grows.
We considered the purpose of a badge:
A badge must be fun to get.
It needs to feel like an accomplishment.
Badges have to work alone or together as a set.
A set must work with 2, 4 or 50 badges.
They have to be flexible in design to allow for new badges in the future.
They must work at large and small sizes to view well on various applications.
We considered what a more traditional "badge" looked like:
Actually uses a badge shape, or is housed within some sort of background container or shape.
Each badge has some similarities to work together as a series.
The art/icons are usually simple.
The following are a few design concepts that we created.
A series of achievement icons that are not contained within a shape, but rather allow the art to break out into the white space. This gave the art a more dynamic feel.
A background shape that is inspired by their logo, and not a traditional badge, burst, or trophy like shape.
We provided guidelines for style of art but freedom to allow that art to be unique for each icon. A palette of 12 colors (4 colors and 12 shades) to work with.
With these guidelines and a set of examples, both our team and the team at Mouse has been having fun creating badges. The following is the chosen design approach showing application to one area of Mouse's Create platform.
And here are some badges that the internal team at Mouse have created.
Founder, Design Lead