Brand Design at Twitch

During my time here at Twitch I've helped lead the Brand team as well as collaborate with a multitude of teams such as Creative Services, Product, and Product Marketing teams to redefine who we are, what we stand for, and how we want to be seen across every customer touchpoint. During this process we've worked to establish our brand pillars and design drivers which are at the forefront of 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 a 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.

Twitch_670@2xTwitch_670@2x
Brand_PillarsBrand_Pillars
Design_DriversDesign_Drivers

Goals and Objectives

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.

Existing_IconsExisting_Icons
Icon_IterationsIcon_Iterations

Designing for Broader Audiences

We just finished up developing a more unified iconography style that's scalable, unique, and aligned with our overall design strategy. We 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.

IconographyIconography

COLOR PALETTE

Product and Communications

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 used 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.

Color-Palette-EvaluationColor-Palette-Evaluation
Color-WheelColor-Wheel
FrameFrame

VISUAL DESIGN LANGUAGE

Designing for the Future

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.

[unex_ce_button id="content_7u5zfbhvf,column_content_xzha6kj1t" button_text_color="#6441a4" button_font="regular" button_font_size="12px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="transparent" button_padding="15px 20px 15px 20px" button_border_width="2px" button_border_color="#6441a4" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#6441a4" button_border_hover_color="#6441a4" button_link="http://www.twitchcon.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW TWITCHCON SITE[/ce_button]
Email_TemplatesEmail_Templates

ILLUSTRATION

Exploration Study

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.

MicrochipMicrochip
Soft_MicrochipSoft_Microchip
ComputerComputer
Illustration_In-ContextIllustration_In-Context
Product_Illustration_v3Product_Illustration_v3

MOTION GRAPHICS

Introducing AutoMod 2.0

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

AutoMod-IconAutoMod-Icon
[unex_ce_button id="content_a44l8vb5p" button_text_color="#ffffff" button_font="semibold" button_font_size="96px" button_width="full_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#000000" button_padding="100px 0px 100px 0px" button_border_width="" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="transparent" button_link="http://jonathanhowell.com/work/microsoft/" button_link_type="url" button_link_target="_self" has_container="" in_column=""]VIEW MORE[/ce_button]