Meet your new Twitch

Elephant
Community
Nominee

This project was really supposed to showcase the new brand identity, but it went so much further and really blew up the notion of what a brand site could be.

- Elephant Team

Can you briefly describe your project and the concept behind it?

The Twitch rebrand was about celebrating every member of the community; our role was to create an experience that really lived up to that. We wanted to tell a story about the inspiration and ideas that drove the evolution of the brand. All the Easter eggs, inside jokes, and winking references are there to recognize the community and the beautiful mess they’ve created. From a creative perspective, our aim was to make a living, breathing example of how far you could take the rebrand. We were intentional about every detail–from animations, to colors, to interactions and typographic arrangement–in order to illustrate just how much flexibility the brand has today.

Talk about your initial prototypes. How did those ideas change throughout design and execution?

Our original concept was to make the entire experience a side-scrolling game full of surprises for the Twitch community. We had hoped to use the Konami code as an Easter egg, but it overcomplicated the sense of surprise we were trying to create. Some aspects of the original ideas came back later in the process. For example, we wanted the entire thing to feel like playing a game, but it wasn't feasible within the timeframe and didn’t quite work as the main experience. The idea came back into play when thinking about creating a social aspect to the project. We decided to add in some Flappy Bird-style gameplay at the end with brand elements and allowed users to share their scores.

What influenced your chosen technical approach, and how did it go beyond past methods?

Our role was to conceive and create the front-end experience alongside the Twitch creative team, while the technical implementation was handled by the Twitch team and a company called CloudCannon. The ideas and execution of the experience really drove the technology that was used to bring it to life. We never felt limited by having to fit the work to a particular pattern or template.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

Among the Easter Eggs we wanted to include somewhere on the website, was a fun fact about the new font that Twitch used for the rebrand, which is named after Robert Moog, the inventor of the first commercial synthesizer. We really wanted to make a feature about it, but we did loads of versions and nothing was really working. The night before our last creative review, we came up with a concept that mashed up Nyan and Bob Ross–two popular memes on the Twitch platform–along with an interactive mini synthesizer and everyone loved it. It ended up being one of the last bits to be approved, but one of our favorites features.

What web technologies, tools, or resources did you use to develop this?

We designed the project using Sketch with a shared library between our team to stay aligned with all the design patterns we have created during the project. To explore interactions, motion, and create a prototype of the full experience, we used Principle. Because of the heavy use of motion, we chose to also present our work straight from the Principle prototype, helping everyone better understand how the project would turn out. Our partners at CloudCannon did a splendid job on translating our prototype into real code, achieving a result ever so similar to our proposal.

How did you balance your creative and technical capabilities with the client’s brand?

As always, our biggest challenge was time. This meant we had to constantly balance timeline-related decisions with our ambition to push the boundaries. We were vigilant about evaluating feasibility, and always having smart alternatives.

How did the final product defy your expectations?

The reaction from both the Twitch and design communities was really positive. This project was really supposed to showcase the new brand identity, but it went so much further and really blew up the notion of what a brand site could be. There is a section on the site called ‘Bringing it all together’–the idea was to create something that showed all the brand elements working together in a way that felt uniquely Twitch. This aspect in particular, really drove the conversation about the rebrand.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

A lot of companies like Twitch now have very established in-house creative teams, and we see this a lot with other clients too. So it's now less about the typical agency-client relationship and more about a unified team working together openly, honestly, and collaboratively. There are fewer big reveals and more collective working sessions and discussions. We had a lot of healthy debates about which ideas were worth the extra work, and which ones we had to let go. The success of this project ultimately depended on a unified team composed of Twitch’s creative team, their engineers, and our team at Elephant all working in sync with a passion to launch the new rebrand in style.