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


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.


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.



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.



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="" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW TWITCHCON SITE[/ce_button]


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.

[unex_ce_button id="content_a44l8vb5p" button_text_color="#ffffff" button_font="regular" button_font_size="36px" 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="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#0008ff" button_border_hover_color="transparent" button_link="" button_link_type="url" button_link_target="_self" has_container="" in_column=""]View More →[/ce_button]