Case Studies

Case Study: itmeJP Twitch branding guidelines

By 13 June, 2016 One Comment

Over the past years the itmeJP brand have gone through a few changes. As we move into 2016 it was time to take a look at it once more. This will partly be a case study on the craft and partly a case study on how to update your brand.

What’s Twitch branding guidelines?

We often hear about big streamers re-branding and going through big changes at once. While this is great way to shake things up and get something new going. It’s not always the best approach when it comes to something that’s so tight knit with your community. One of the cons is that you might, and probably, will alienate a few of your viewers. After all people tend to not like change and what things to stay the same forever. However both you and me know that to stay the same forever also means watered down content and no development.

What’s the best way to circumvent this type of situation? With itmeJP I decided to slowly roll out new ideas and plant the ideas months before the final gear was kicked in (and as of the writing of this article we’re still not done). It started with a dynamic breakscreen that we started using and shortly followed suit with another break screen, ads, twitter images, infographics, offline screen and Twitch panels. We didn’t slap it all into the viewers faces in one big reveal and called it a day. Instead the approach was simple: First we introduce new concepts, then we wait, we look at the response, we wait once more and ignore a lot of knee-jerk reactions, we look for feedback and finally we evaluate the results. From these results we can look at what needs to be addressed and what needs to be added to the guidelines.

Twitch branding guidelines helps you and those you work with

Speaking of the guidelines. What are they even for? Guidelines is a simple way to control your brand both in-house and when you go to another place. For instance if we with itmeJP at the moment with go and get a new intro made we would take the Twitch branding guidelines that I’ve laid out and bring them to their team. We could go over each of the details and they then could look at the guidelines and everything would say on brand.

When it’s in-house it has the same idea. I don’t need to overthink things and instead can look at the guidelines so something don’t stick out. It will give it all a cohesive look and feel meanwhile it allows me to still design things freely. Having Twitch branding guidelines aren’t rules but rather… well… guidelines. They’re supposed to do exactly that and guide you through your decisions and allow you to make better and faster decisions.

itmeJP Twitch branding journey

itmejp old avatar

Part of OLD itmeJP branding

Let’s take a look at how the itmeJP brand have evolved over the past years and take you into what it’s becoming this year. When I first started working with JP he already had a brand in place it was white and purple… and back then we could use HTML to style our panels. It wasn’t a good look you can trust me on that one. After about a year JP decided it was time to move the brand forward for the first time.

At the time I was only on to help out with overlays for the different shows and handle the different branding aspects for those. As far as I know JP took in another designer to do the re-brand. What we ended up with was very dark blue/green look and the typeface Knockout. That was about the extent of the brand at that point and the only big change (that’s still there today) was a new illustration avatar.

old itmejp branding

Old itmeJP branding

We had this for another year or so. During that time I was brought into handle the main brand as well and became the on call designer for everything JP related. At one point we needed a new breakscreen and I started to work on something brand new. I took colors from previous branding package and created something modern and fresh from it. For it I used a analogous color scheme combined with white for the typefaces. We kept the avatar and started to push out those changes all over the place. Both on the breakscreen, panels etc. this was never intended to be a re-brand of any sort but sort of became a minor update.

As we moved into 2016 I’ve gained complete control over the itmejp brand so I decided it was time to do a few changes. However, as mentioned above, I didn’t want to stray away from out original brand and I also wanted to slowly roll out every change.

A new year a new itmeJP Twitch branding

Dynamic Twitch Overlay

itmeJP break screen

The first thing we did was the new breakscreen that you can read more about here. As you can see I retained a lot of the colors from the older branding but gave it a never more organic approach as well. The new breacksreen went over well with both itmeJP and the audience so I kept working on the new branding to really get everything else going in the right direction.

PAX east itmeJP ad

PAX east itmeJP ad

At the same time we started to work on a new community page and on that page I started using some of the same elements but noticed that we needed an accent color. Now I can’t really show that yet since we’re still working on the website that would go with the community pages. What I can show is the ads I started to produce in time for PAX.

Here you can clearly see the new branding in full effect for the first time. Using the bright orange to balance out the dark blue-green and high contrast it with the black and white colors. With the typeface I’ve started to more actively utilizing the different fonts that are included in it (font: bold, heavy, black, thin etc.). However this isn’t the final branding guidelines either since one thing here is something I’m no longer using. The icon set that’s used here is FontAwesome but since then I’ve moved over to Dripicons.

Nailing down the itmeJP guidelines

Overwatch itmeJP infographic

Overwatch itmeJP infographic

These final changes and additional branding elements were included when we went into production for the inforgraphic after the itmeJP Overwatch marathon. As you can see the icon set has changed over to Dripicons, a to me, welcomed change. Sure it dosen’t have the same amount of icons as FontAwesome but the thing is that when used right icons can be used in many different ways. For instance the “Meter” icon next to Max Concurrent wasn’t intended to be used for that purpose but with the right context it’s conveyed anyway.

This is also the first time I introduced the dotted lines, 1 px line and image backgrounds. The dotted lines allows for a more open a free design and the same goes for the 1 px 30% opacity lines. Since we’re going to use the heavy and bolded headlines with big and bold numbers as well. Therefor I made the decision to make any additional elements, that’s not supposed to stand out, should be as minimal as possible.

Guidelines should be fluid

Combined with that I also created the offline card, video breakscreen and Twitch panels, as you can see below. All of the elements have been retained and even a few added to make more sense. The bar at the bottom of the offline card for instance was taken from the underline used under the main headlines. In the Twitch panels that same line became a divider. The only true addition is the usage of an indicator for something that should be clickable and that’s the rounded button. In the panels this is used to create a Call to Action (CTA) so whenever we’re going to make something in the panels that’s supposed to prompt you to take action it will be a larger Twitch panel but any thing else will be the smaller ones.

These type of small things are the reason why having guidelines or working out the guidelines over time is such an important thing. They allow it all to make it all easier to use elements, create news ones (that’s inline with the guidelines), modify existing things and reusing things.

Great start to the week! I’m going to go into hardcore mode the following days. I have a lot of planning ahead and I’m taking a Amsterdam trip at the end of the month. I need to write a few article ahead of time so I’m going to be busy with that as well. Read below to find out who I am and about the services that I provide!




Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future.