Case Studies

Case Study: Cira Corellia Dynamic Twitch Overlays

By 27 June, 2016 No Comments

I’ve over the last couple of months introduced you all to dynamic overlays. You might also noticed that I didn’t talk about it after that and that’s not because it’s not something that’s still valid. However we actually wanted to show what’s REALLY possible with it.

Got contacted by Cira Corellia to help her get going with a new look but also use her currently created avatar. This isn’t something that’s uncommon and I don’t have to create your avatar to help you out with the rest of the branding. The important part is that you feel comfortable with the process and the outcome.

I’m going to keep most of the branding part as short as possible and dig deeper into the dynamic features instead.

Cira Corellia Twitch branding


What I wanted to create was something that could really highlight Cira’s personality and let it all stand-out from many other female streamers branding. We wanted to keep a playful feel yet keeping it modern and sleek.

The colors

We went back and forth on the colors a bit. I do work in a non-destructive way so that meant that I could easily change the colors and shoot the new ones back and forth. It didn’t matter if it where similar to these, slight color changes or even massive changes. At one point we had red, beige and another color that I now have forgotten about.

However we landed on a two muted mint matched with the two tones of deep purple. This is exactly what would keep it all together when you look back the brief and see what we set out to create.

Twitch panel illustrations

I used Illustrator to create all the iconography by hand. As you can see they match up very well with highly contrasted colors. They would later end up being used as patterns as well. To further solidify that it’s a bit more crazy and allow us to fill in open spaces these patterns can be seen in many different places. They’re not supposed to take over the scene but rather give it that little extra touch of personality.

We also went back and forth on the first pattern. That particular pattern wen through at least 2-3 complete changes before it felt 100% right. Sometimes if even the smallest thing are off balance it’s going to echo through the rest of the branding.

Look and feel

As you look through the gallery you can see that the white is used to balance out when needed for backgrounds. The same way that the mint color can be used when we want to contrast against the purple. All of these changes are not randomly thrown at the page but rather thought out in the design process.

Each decision will have impact on the next and each thing you remove or add will change how you think about the next. I wanted the end user to never feel lost both as a new viewer or a seasoned audience member. Small things as knowing when/where to use bright, more eye-catching color combinations, and when you use the darker ones to guide the eye towards the brighter ones.

Nothing in this brand has a random element to it. That’s the hallmark of a properly created Twitch branding that allows you to be able to keep using it in any way shape or form that it might be required to fill. Take a look at the N3RDFUSION or itmeJP articles (both are clients of mine) to get a better understanding of what it means to have these branding guidelines in place.

Dynamic Twitch overlays

Right so this might be why you’re here. But I do advice you to read the “Look and feel” section right above this one. In that text you’ll be able to see that even before we got the development of the dynamic overlays I already keep the UI/UX in mind.

I’m not going to bury the lead and instead start by showing you the entire thing right here and right now:


We wanted everything to feel fluid and understandable for the end-user. That was the point from both the design aesthetics to the work done by Vidar (@SunspotsEU). Together we made it clear on where we wanted to land with the project and all of the notes that we wanted to hit.

Standalone program

Evolution is programmed and created by Vidar. It’s my brainchild but it’s his hard work that made it possible. He’s been able to put it all into a nifty little program that can take on our .evo files and output it all as a browser source. This means that you can still use whatever setup you want and even do a single monitor. These files can also be updated without having to update the main software.

This adds the benefit of easier and faster updates. If there are larger updates for the program there’s no need for the client (or us) to push out a branding new one for every client but instead send out only the updated software or update file.

Dynamic Twitch overlays: Starting/intro

If you look at the video you’re going to see that it says that it pulls in the title of the game and the box-art from the Twitch API. Vidar also added another feature that allows Cira to pull in the box-art as background image and blur it, the same thing I’ve previously done for itmeJP events. So far all of that is a feature we’ve done before both for itmeJP and CinnamonToastKen.

What we did here was to take it one step further. As you can see the timer is connected to a curtain that starts to comedown when there’s 30 seconds left on the countdown. This allows for a cool effect that also signals the chat to get ready for the broadcast.

The countdown itself is split into two different options. One is the straight up “set your minutes” type of thing. However the reason for the other one is because we know that streamers have a very strict schedule sometimes so we have one that looks at your clock and sets it’s time according to that. No need to estimate how long until your broadcast starts and now you can sit back and do you thing while the countdown does the rest.

News ticker

This is something that Cira specifically wanted for her stream. She used to use the ones that you can get from Twitch Alerts. However we all know how they look and how little you actually can do with them without creating a bunch of problems. Instead we wanted to create a complete system around it. This way you can add in a news item title, set description AND set a end date.

Having a end date means that you can set it and forget it without any problems. If you have a giveaway and you know the date it ends and you no longer want it in the ticker… well this takes care of that on it’s own. Once again allowing you to focus on streaming instead of keeping up with updating your ticker.

All of this is dynamic and what you can see in the video is actually real time. There’s no clicking on update on anything. If you type in a new title that change will be reflected directly or if you re-arrange the order the same thing will  happen.

On top of that you can archive, restore and duplicate the items.

Q&A module

This is something you might already have in you chat BUT this comes with the added bonus of actually showing an alert (controlled by you). If a user types !ask or !q in chat before a question that question will show up in the dashboard and allow Cira to push it out on screen or discard it.

The reason why we have the discard feature is since we don’t want any and all messages to end up on screen due to trolling. However what we do want is to award those that are active in chat or those that are subs. Good question gets through the best filter possible… and that’s you. You have complete control here since even the best filter system can’t catch every new way for a troll to get through. With that said we even added in a feature so only subscribers to the channel can ask questions that would show up as alerts.

This might not be something that you want to use while playing a game but rather a way to highlight things while you do you pre-stream session or end of the stream talk. However that doesn’t mean that we can’t add in filters instead or make it possible for your mods to approve questions.

Final thoughts

Dynamic Twitch overlays aren’t for everyone and these are created specifically for Cira. That’s the benefit of having things custom created and styled for you. It will allow you stream to standout even more and allow your user to interact in different ways  (without it feeling foreign).

These of course comes with a larger investment cost due to the amount of people involved and the time it takes. We’ve been able to cut down on time as much as possible but that dosen’t mean it’s without that investment.

Dynamic Twitch overlays are going to allow you to focus on your stream instead of trying to do everything at once. Having it all custom made to your branding allows you to no longer have to worry about setting certain plugins up or mixing and matching everything. This way you can also allow your viewers to engage better, share better and enjoy the stream more.

If you want us to do your custom dynamic overlay with the LiveSpace branding department (or not) we can aid you in your quest. Check the info below or click the contact button at the top!





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.