Case StudiesGrafisk Formgivare

Case Study: Overlay for Twitch roleplaying show Shenanigans

By 29 April, 2015 No Comments

Brief and interview

Shenanigans is Neal Erickson’s new roleplaying show. It has a rotating cast of 12 different members and each time there will be six cast members and a dungeon master. Each session is self-contained and keeping in fun and relaxed. The description gives me a good insight into what the show will be about and is great start. Still it’s always a good idea to ask followup question so there’s no confusion, it will also to keep the communication and gives the client a look into my process.

A few things we talked about was theme, style, if it’s a separate brand from Neal’s personal brand, and color scheme. The style is the same as the RollPlay series and Neal is a member of Team RollPlay so that’s absolutely something that makes sense, but I also want it to be said that it’s more than possible to make something that isn’t in the skeuomorphic style. I’ve actually made overlays for roleplaying show that are more inline with flat design, one part because it solved a problem but it also looked and worked great.

When we had the style locked down the next was to figure out the theme. Since Neal will be playing mostly Dungeons & Dragons it’s given that it should have that type of theme. The problem is that it’s not themed show, but as mentioned each session is self-contained, therefor there had to be a story being told in the brand. I’ll write in more detail about the approach under Overlay Concept.

Shenanigans will be a brand in itself and have no real connection to Neal’s personal brand. There is a link since Neal does a lot of roleplaying shows already and plays games that are related to it. Therefor it’s not a stretch that even if it’s a separate brand it will still have a relation to Neal’s personal brand but just not in a visual brand sense.

Color scheme is the last thing that has to be mentioned. Neal wanted more earth tones and the difficulty, and my job, was to translate that into the easy going and fun atmosphere since it’s not really a color scheme that is associated with earth tones.


The main research here was more in design psychology than actually going out to find the best inspiration. My reasoning is that since there are going to be seven camera windows on the screen at the same time, they will all struggle for space and that will mean that there will be a very limited amount of space to convey all the things mentioned in the brief. The solution was to use visual cues that are understood at a glance yet tell a story.

Overlay Layout

Preview 1

Preview 1

As mentioned above, the space was constantly a challenge, but a designer should always thrive on design challenges and not hide from them. Preview 1 shows how I was able to solve one of the screens. As you can see there’s very little space to tell the story in the overlay. Every layout screen came with the same challenge and therefor needed attention in different way, again this so it all tells the same story and follows the same theme.

Overlay Concept

I embraced the challenged that were presented to me and when I thought about it there is one thing that goes hand in hand with both Neal and earth tones… a bar. Adventures in Dungeons & Dragons often has it start in a bar where the adventurers meet and plan. Earth tone also has it’s advantage that it’s a color that makes us want to stay, this is not really conveyed through a screen but has to be all around the viewers, but if you sit in a room with earth tones or even in a bar (trust me they all then dot have a lot of earth tones) you will stay and watch Shenanigans.

I did Google image searched the word Shenanigans and that’s actually what lead me down the path of a bar. You can try it yourself and one of the first results is a bar named Shenanigans. Using this idea as a start I used my drawing tablet and created a calligraphy brush to hand draw the text for the logo. I didn’t want to use a typeface since that would be too perfect. You want the tiny human errors and variation that comes with drawing by hand.

Preview 2

Preview 2

If you take a look at Preview 2 you can start to see that I’ve taken steps towards the goal I set. You can also see the logo have taken the shape of a wood sign, added a bit of “bling” to have it less serious. I’m also not afraid to obscure the camera windows and the reason is that if I would constantly do that it would stop looking natural and start looking very structured and rigid. It will also add another dimension to the overlay and it will feel more alive.

Preview 3

Preview 3

If you look at Preview 3 you can see that it wasn’t possible to have the logo anymore. If I added it in the camera windows would be so small that we would lose our cast members, and that’s not something that I want to sacrifice since they’re one of the reasons the viewer turns on the live-stream to watch. You can also see a big wide window in the middle, this isn’t for  camera but so the host can pull in a screen capture from a online map. The reason why this is in 16:9 is since most browsers are that size and the map will size itself according to the browser. Next to that you can also see a dice window and the same reasoning goes here, as it’s vertically shown on the website the same or something similar needs to be used in the overlay.


Final Version

Final Version

There are in total five screens that Neal can use for different things. The main one is used for whenever there’s only a discussion and when there’s no need for any interaction with the map or dice window. The version with only map is for whenever Neal want to show as much of the map as possible. The one that contains both map and dice is probably the one that will be used the most, it can also always be used no matter what and will give the host screen that the host always can cut to no matter what is happening. Finally you have the title and break screen, they’re both very similar and really the only difference is that there’s a possibility to add whatever text Neal wants on top of the paper. Another noticeable thing is that I’ve added a slight color grade and desaturated it a little, it’s a way to bring everything together and proof it for TV screens a little and adds a bit of realism.

Everything in the PSD (Photoshop Document) files are organized into different folder, the “Text” one being the most important for the host since that’s where all the name edits and Twitter handle edits are. If the file is deleted, lost or something is moved around accidentally I have a backup hard-drive with the files but I also back them all up on a cloud service. All important steps so that the host/client don’t feel as secure as possible.

However when Neal went into testing it, I noticed that it didn’t look the way I had made it. I always try to follow up so I can catch these things before they go live. Even if it’s something that, as in this case, went noticed by Neal. The reason why it differed was that I use Photoshop CC and Neal uses Photoshop CS4 Extended. Now they can both handle PSD files but CS aren’t able to handle certain features that CC have. The solution was for me go in and flatten everything but the text layers, that way Neal can easily change names and don’t have to worry about having a absurd  number of layers in OBS.

The next case study will be on May 8th. It will be for the re-launched RollPlay R&D series. If you have any questions regarding this project, future project or if you have questions in general you can find me on Twitter @visiblespeech. If you have business inquires you can e-mail me at



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.