Case Studies

Case Study: Hybrid Panda Dynamic Twitch Overlays

featured-hybridpanda

HybridPanda needed a overhaul of his overall brand prior to taking a step away from the YogsCast. That also meant that it needed a upgrade in terms of style, maturity and having new features.

In this article I’m going to dig deep into the decisions behind the direction of the branding and after that take a look at how we made the dynamic Twitch overlays for HybridPanda.

Moodboard

HybridPanda Twitch Branding Moodboard

Moodboard

When going from a more cartoon aesthetic to a more mature cartoon you need to keep a lot of things in mind. First of all there’s going to be those that don’t really understand why. Those will eventually come around if the content remains the same. After all they’re still getting what they signed up for and only new packaging.

I also take into account the new viewers. As they need to get a grasp on the concept by glancing over and then have that reinforced by the content. If you take a look at the moodboard closely you’ll be able to see that there’s a lot of things going on but on a more minimalist level. Things like certain textures, layouts, expressions and color combinations.

These are the notes that I wanted to hit with the moodboard. Keeping things a bit more edgy and yet being able to utilize a more clear design. As you keep looking through this article you’ll start to see all of these things come together slowly.

Avatar/illustration

As always I start with the sketching of the avatar in Photoshop. I keep doing this until we have a sketch where the client can see themselves represented.

With HybridPanda this took a few attempts. Not because he’s a difficult client but because the style needed to be right for the project. The first sketch had too much of the younger aesthetic left in it. It wasn’t until the second revisit that I hit the right note and got it all to flow together.

The illustration has, while in Adobe Illustrator, a clean look but with a lot of details but not without having a cohesive look. That way it’s possible to take this to a printing service and have it wither digitally printed or screen printed onto something. That’s always the benefits of having a base vector image instead of something hand drawn only.

That dosen’t mean that we can’t make it look exactly the way we want in Photoshop or with added details to make it stand out even more. That’s also exactly what happened later on, so keep reading to see more of that style were used.

Twitch cards

These are the Twitch cards that later will be made into Twitch dynamic overlays. For that reason alone they need to have that perspective in mind before anything else. This comes with both positives and negatives. There’s certain things that are possible but there’s also those that would only add to the development time.

As you can see we’re pulling in a lot of information from the Twitch API, as explained before, but we’ve also started to use the YouTube API for the end card. With the YouTube API we’re now pulling in information about the latest uploaded videos by HybridPanda and display them at the end of the stream.

The overall style here have taken the distressed look and edgy feel that we want to push forward as the new HybridPanda.

The colors are bold but not overwhelming. They have a certain structure to them with a direct purpose in mind. Things like the white and red color (but not a overpowering color) that compliments the avatar instead of being something that has to standalone.

Twitch panels

HybridPanda Twitch Branding Twitch panels

Twitch panels

These panels keeps the same direction as the Twitch  cards. They have that touch och distress and yet walk that balance beam towards a cleaner design. Utilizing a more expressive way of displaying the icons and combining that with the cleaner font that makes it clearer yet still keeping the distressed theme throw that as well.

Alerts 

HybridPanda Twitch Branding Alerts

Alerts

I wanted to separate the regular alerts from the dynamic alerts. The regular ones have the distressed look combined with the panda (also with a more distressed look) while the ones from the Twitter re-tweeting and Q&A. Those two had to be a bit more to the point and using the cleaner version of the brand. That part of the brand will also always be the one used when doing anything that’s needed.

The regular alerts have the gold and the red depending on if it’s a subscriber or a donation. It makes sense to make the alerts slightly different depending on what situation they’re put into. It’s all about the context and how your audience are going to experience that in a way over and over again.

Final versions

You’ve seen a lot of the final version above but wanted to put it all into one little package for you so there’s a easy to get a good overview at once. Below you can read more about the dynamic features in this project.

Dynamic Twitch overlays

YouTube API

Let’s talk a little bit about the YouTube API and the Twitter API. For the end card (for the Twitch stream) we wanted to mimic the end card that a lot of YouTube channel use. I’m sure you seen where they display a subscribe now button and two previous YouTube videos they’ve made. However this takes time to produce and that makes sense when you’re doing 1-2 videos a week.

However when you start to do 4-7 streams a week and you have to in someway edit in that into a Twitch end card… that’s bad. What we did instead was to create a system that pulls it in from the YouTube API. It looks at the title and when it was posted (there’s more information that’s available but this is what we wanted to show). It will do this during intervalls meaning that if you upload a video during your Twitch broadcast it will show up without you having to run a update. It will also show the amount of days ago without you having to change anything yourself.

Twitter API

Now this is something Vidar (@SunspotsEU) worked on for awhile to get it working properly. Still it’s not perfect but that’s because the Twitter API isn’t made for this purpose. You can’t actually use their API in a reglar browser but since we’re in xsplit it works, and as a side-note it works in regular OBS as well but not in the OBS MP/Studio.

What this basically does is look at HybridPandas latest tweet and when/if someone re-tweet it. When that happens it sends a notification that shows up on stream. Now this might sound a bit boring BUT it does give your viewers a way to openly share your stream when you’re live. It also gives them a reason to do it. While it’s not a monetary incentive it does show another way to support the stream. Something like this is amazing when you’re a up and coming stream that want to grow his/her reach.

Twitch API

You’ve seen this plenty of times from us now. This covers the game of the stream (that you set in the Twitch dashboard) and the box-art as well. We combine that with a countdown that can both be set by your computer clock or by the amount of minutes. The allows the streamer to use it in different ways instead of trying to force it into their workflow. Combine this with a bot that announces when you’ve tweeted something out and a prompt to support the stream by re-tweeting.


Sometimes you just know when someone is about to get partnered. I talked with Tashnarr (@tashnarr) a few months back for a brainstorming session. A few days ago she became a partnered streamer. Now I’m not saying that I was behind that but something I did tell her during that brainstorming session was that she was close to being partnered with only a few minor changes. There was no need for a big re-brand but just smaller adjustments. Read more below to find out more about what I do!

 

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close