Brand Design at Twitch
During my time here at Twitch I've helped lead the Brand team as well as collaborate with our Creative Services team to redefine who we are, what we stand for, and how we want to be seen across every touchpoint with our users. During this process we've worked at establishing brand pillars in which we stand by within everything that we do.
In addition to this, we reached out to other teams inside of Twitch as well as partnered streamers to get a better understanding of what people think about the existing Twitch brand. From there we curated a list of design drivers which we distilled down to small list of five: Confident, Clever, Human, Spontaneous, and Vibrant. We then began to build out a moodboard that would help the larger design organization to get a better understanding of where we planned to go as we began to build a visual design language.
After many years of constant growth and new product features the iconography within the product had evolved into a messy and non-uniform style due to many teams creating icons without proper guidelines. The brand team has been working closely with the product teams to create a unified icon style over the past few weeks. Our approach has been to create a style that looks and feels fun, friendly, and approachable.
Some of the challenges we've faced included designing an icon style that was flexible enough to work on top of our video player where visibility was key and also enough visual weight within our UI that's been constantly changing. We've currently landed on the style shown below and our team is now developing guidelines around how to create new icons as we move forward.
Refine & Define
As of right now, our brand team is working closely with the product team to develop a unified iconography style that's scalable, unique, and aligned with our overall design strategy. We're focused on a creating an iconography style that's not specifically tied to gaming culture. Twitch is very gaming focused, yet we want to appeal to a larger audience beyond just gamers.
With many of the things we've done in the past from our illustration and iconography to our motion graphics pieces they all have leveraged some type of video game intellectual property, which is something we're planning on avoiding as move forward.
Over the years, Twitch has coined the term "Bleed Purple" which is actually from the Follow icon on streamer's profile page. That said, our product and majority of our communications have use this same motto. Although our team's were aware that we needed a more robust palette, it wasn't clear on where and how to introduce new colors into our design system.
Another thing that we considered was the equity in Twitch Purple (#6441a4), would introducing new colors confuse users? Certainly not, assuming they were introduced and implemented in an appropriate fashion. Below you'll find an evaluation of our existing color palette within the product, marketing communications, as well as what others in our space were doing in regards to color. Where can we carve out our slice of the pie without biting a piece of someone else's.
Visual Design Language
We started to iterate on potential UI solutions and built out email template components that would allow us to introduce a variety of things into our marketing efforts such as 3D illustration, new typography styles, patterns, and our new brand colors. We've also started to introduce these colors with our TwitchCon communications. As we move forward, we'll continue to build out a more unified design system for all of these assets.
Illustration is a strong addition to any visual system or touchpoint in how to tell a story or evoke emotion. That said, we're going back to our company values of "Creators First" – as a platform, we're simply the vehicle for delivering content to our users. We're not here to talk about the Twitch brand or tell people how weird and quirky we are, our users themselves are irreverant.
All 3D illustrations show below have been drawn and rendered by Tim Reynolds and John Ducusin. My role has been to work closely with the 2D and 3D illustrators and the Creative Services team to develop our baseline illustration style as well as our audience specific style. More specifically, when and where to leverage 2D and 3D illustrations and how they work together.
Luckily at Twitch, we have some incredibly talented motion graphics designers and are able to collaborate with them on a variety of projects. Thus far, I was able to work with Product Marketing and the Chat team, and one of our motion graphics designers to create the video below to introduce our new AutoMod feature. During this process, I was responsible for developing and designing the chat badge icon for AutoMod – we needed to design something that was inline with our other moderator chat badge icons.
All 3D renders and motion graphics work for AutoMod was done by Matt Gravish