How We Re-Designed the Envato Community Badges

To coincide with Envato’s 9th birthday, we launched a brand new community hub and forums. But did you also notice the shiny new community badges? Of course you did!

Redesigning badges for our creative community came about for a couple of reasons:

With these concerns in mind, we approached this challenge by focusing on these key goals:

The Design Process

At the start of the project, I worked closely with Envato UI Designer Tom Bryan. The first thing that we did was research. Lots of research!

We found many great examples of other badges and lots of great icon and illustration styles. Here are a few:

We collated our findings and had some great brainstorming sessions with Scott Wills from the community team and our Head of Design and UX, Chris Thelwell. From these sessions we came away with a clear direction to guide us through our initial ideas.

Tom and I started sketching ideas, either with a pencil and paper or Adobe Illustrator. We experimented with various styles and presented them to the group until we all agreed on a style that we felt would address our goals.

This was definitely the most challenging stage, but also the most rewarding. Developing a visual language that would work well alongside our branding and also become somewhat repeatable as more and more badges were created was tricky.

From there, I started refining our solution and developing what I like to call the ‘Design System’. I knew from the very beginning that I wanted to approach this project in a way that would allow any designer in our team to independently design a badge, and be confident its style would remain consistent with the others. To do this, I needed a couple of things in place:

Once I had the design system in place I rolled up my sleeves in Adobe Illustrator. I set up two separate templates; one for the large badge, and one for the small. This forced me to always work on the small version first, ensuring that I would articulate the core message of each badge. One of the main issues with the previous badges was that they looked great at full size, but when scaled down in the browser they would become cluttered and hard to decipher.

To eliminate this, I took a small version first approach, similar to how I would take a mobile first approach to designing a website.

Once I was happy with the small version, I added a little more detail to the larger version.

After going live with the first collection of badges, I assembled the boilerplate file that includes a range of go-to spare parts like shapes, objects, characters and strokes. I’ll keep adding to this as more badges and elements are created.

At this point, it became important to settle into a good rhythm of creating the remaining badges in one large batch. We printed out each of the current badges and placed them on the wall, allowing us to rapidly sketch ideas on sticky notes and add them to the corresponding badge. This had a secondary benefit, as it generated interest from passers-by, allowing them to provide ideas as well.

With a good idea sketched out and up on the wall, I would move back into Adobe Illustrator to refine it. My focus here was all about getting to the core of the illustration and removing all superfluous detail, while maintaining the clarity of the meaning. Easier said than done sometimes!

During this process I would endlessly zoom in and out and activate pixel mode to make sure that it would look right in the browser. It’s pointless designing something that looks great while you’re working on it but not so good in the final context.

Around that time I also developed the final color palette. I knew that it would be based on our Envato corporate colors, however I needed to tweak them slightly to make the colors harmonise. I couldn’t just slap the colors together, as that would create some pretty jarring combinations, so I created a softer, more muted version of the palette that allowed the badges to sit alongside one another.

Results & Next Steps

Now that we’ve had some time to see the badges in context and gather feedback I think we can say they’ve been a success. We released approximately 50 badges that embody our brand, are clear and modern, and have generated much interest from Envato staff and the community.

Of course, we’re always improving our design process, and I’ll be revisiting a few of the badges that we have identified through review and feedback.

Our community of creative authors make Envato what it is, so we want these badges to be a fitting reward for your achievements!

Like badges, icons, and logos are a big part of branding and design. Check out these related blogs for inspiration:

_{This article was originally written by Roscoe Tsalacopoulos.}