BRAND / PRODUCT / ART DIRECTION

AutoMod 2.0 & Twitch Characters

In early April 2017, I had the opportunity to work on the launch of AutoMod 2.0 with Brian Petrocelli and Matt Gravish. I was responsible for developing a series of chat badge icons for the three different moderator types: AutoMod, Global Moderators, and Chat Moderators. Upon completion of the chat badge icons, we then had an opportunity to experiment with how we would communicate this highly request feature.

Although we already had an established illustration style that worked well for our brand, we didn't have a way in which to talk about the community. I helped with art direction and fostering the usage/development of these bits-inspired characters that Matt Gravish had created. I then worked with Product Design team to provide them with default avatars and cover photos for new Twitch accounts. I helped to bridge the gap between how Twitch talks about themselves and how they talk about the community.

ModeratorIconsModeratorIcons
IconDevelopmentIconDevelopment
AutoMod-InProductAutoMod-InProduct

ART DIRECTION

Bits-Inspired Characters

With such a short timeline in which to experiment, we needed to figure out a way to connect with our users in the context of Twitch. We knew that emotes were a staple within chat, but we'd introduced Bits earlier in the year and quickly identified this as an opportunity to further promote Bits by creating Bits-inspired characters.

Additionally, the idea of introducing these Bits characters allowed us to connect with our users on a global scale that was both gender-neutral and racially un-biased. We then began to draw inspiration from things that we felt were friendly, fun, and a bit quirky. This allowed us to iterate quickly and develop a character set that could extend beyond just AutoMod 2.0 – soon thereafter I became a steward for these characters and introduced them into other places like the Twitch Desktop App.

ToyStoryInspirationToyStoryInspiration
BitsCircleBitsCircle
CharactersCharacters

MOTION GRAPHICS

Introducing AutoMod 2.0

We then worked on a script for the video with Product Marketing and then Matt Gravish created an awesome promotional video for AutoMod 2.0 that talked about the features of AutoMod 2.0 and featured these Bits characters that talked, walked, and interacted with AutoMod shield. This was an incredible cross-functional effort from Product Marketing, Creative Services, and the Brand team.

BRINGING BRAND INTO THE PRODUCT

Extending the Visual Language

After launching AutoMod 2.0 and listening to what our users had to say about these quirky little characters, I knew they had to stay. I then began working with the Product Design team on two different product areas where we could leverage characters in start to bring more of the brand into the product. When we walked around and spoke to people at TwitchCon we asked them "Why do you love Twitch so much?" and 9 times out of 10 it was because of the community. Twitch didn't really have a voice or any sort of visual attributes other than the color purple.

Alt-CharactersAlt-Characters
DesktopAppDesktopApp

Our goal of creating these characters was not only to introduce new features, but to connect with users on an emotional level that they could relate to. Twitch is simply the vehicle and/or platform for people and their passions.

To further extend our adoption of these characters, I managed to get the Product Design to swap out our old pixelated lighting bolt default avatar with these fun new characters. In addition to updating the avatar, I was also able to change the default cover photo that was a step and repeat of our logomark into a 3D scene that Tim Reynolds and I collaborated on a few months prior.

Bits-AvatarsBits-Avatars
Avatar-MockupsAvatar-Mockups
PhonesPhones
[unex_ce_button id="content_28h5rc12z" 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="#000000" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="transparent" button_link="http://jonathanhowell.com/work/twitch/" button_link_type="url" button_link_target="_self" has_container="" in_column=""]View More →[/ce_button]