FaZe Yelo Twitch Design Case Study

CLIENT

FaZe Yelo

SCOPE OF WORK

Mascot Logo, Stream Design, Emotes/Badges

DESIGNER(S)

Tray, Julian, Ruth

FAZE YELO: CUSTOM TWITCH DESIGN

Winter 2018. Discord went wild when the big secret was revealed. VBI would be teaming up with the wildly-popular Fortnite streamer and professional esports gamer, FaZe Yelo. Our mission? A complete Twitch design rebrand, from logo to stream overlays to Twitch emotes and more. The bar would be high; only bold, innovative, and epic would do. Graphic design befitting one of the biggest names in the biz, and worthy of the prestigious FaZe Clan name. With so much on the line, Yelo came to the right place.

This one was especially exciting; our team had been following Yelo’s meteoric rise in the Fortnite community throughout the year. From humble beginnings to one of the top Battle Royale streamers in the game, FaZe Yelo sent shockwaves through the 2018 esports scene. He exploded onto the Fortnite stage with a number of top tournament finishes, quickly earning a reputation for his insane playmaking ability. His skills caught the attention of one of the biggest names in esports – FaZe Clan; he would join the team in late 2018 and propel them to a number of top Fortnite finishes. Since joining FaZe, Yelo has amassed huge followings on Twitch (340K Followers) and YouTube, while landing sponsorship deals with GFUEL and SteelSeries.

There was a catch, though. While Yelo’s professional esports resume was stacked, his personal branding lagged behind. On air, his Twitch design was minimal and scattered. He lacked a true mascot logo for his brand, and his social media design needed an overhaul. All that would soon change.

FaZe Yelo Custom Twitch Design

When Yelo hit us up for custom branding, we arranged a round-table call with him to nail down priorities and hear more about his vision and expectations. Immediately afterwards, we assembled a top team of stream designers, illustrators, and animators from around the world… and started sketching. 2-3 weeks later, we had a beauty on our hands. The final product is electric and bold, an authoritative esports design that would jumpstart the FaZe Yelo brand. Yelo was thrilled with the final results; so thrilled, in fact, that we immediately began brainstorming new ways to add animation and additional elements to the design.

This Case Study will take you on a tour of the design process, from first sketch to final product. Logo design, Twitch overlays, subscriber badges… it’s all here. And we’ve got more in store for the FaZe Yelo showcase – in fact, we’re working on new elements as you’re reading this! We’ll continue to update this Case Study as new designs roll out, so stay tuned. Now let’s get started.

FaZe Yelo VBI Twitch Design Rebrand

PROJECT OVERVIEW: CUSTOM STREAM DESIGN

FaZe Yelo was looking for a complete design overhaul. Building a brand foundation was the main priority: 2019 was going be a big year, and Yelo wanted to kick it off with a fresh new look. Speed was important – with big Fortnite tournaments on the horizon and his Twitch community growing rapidly, Yelo needed his design ready-to-rock within a few weeks. For us, this meant focusing on the criticals first – building a static foundation of overlays and stream visuals. Animation could come later, after the first round of design was ready. This first stage of FaZe Yelo’s custom design would include:

  • Mascot Logo
  • Stream Overlays
  • Stream Alerts
  • Emotes and Sub Badges
  • Stream Screens (Offline, Intermission, etc)
  • Twitch Panels
  • Social Media Art

Yelo had a general vision for his design, but not specifics. Those he trusted to our team, giving us lots of creative freedom to design as we saw fit. And since he didn’t have preexisting brand imagery to work off, our designers could build from the ground-up.

First, we needed to boil down the overarching design theme. We wanted upbeat, intimidating visuals that would convey FaZe Yelo’s competitive nature. Something aggressive and energetic, that screamed esports. At the same time, we wanted to keep the overall scale minimalistic and gameplay-focused. Nothing too flashy to distract viewers from the battle royale action.

For this project in particular, we wanted the logo to take center stage – an epic design that would provide the foundation and inspiration for each subsequent design element. Originally, we drafted concepts using Yelo’s trademark in-game Fortnite skin. Those that follow Yelo know that his appearance remains a mystery – he has yet to do a face reveal and streams without a webcam. Instead, his iconic female Fortnite character has become synonymous with the Yelo brand. After pitching the idea to Yelo however, we decided to pursue other options. The team started brainstorming alternatives that would be more unique to his brand, and not tied to Fortnite in case he wanted to adventure into other games.

After much deliberation and a number of concepts, we hit gold. Literally. A sleek, bold wordmark logo, in golden hues. Naturally, yellow was the primary color choice, making the obvious ‘Yelo’ connection. To contrast and make the visuals ‘pop’, we featured secondary colors of clean-white and midnight-black. Meanwhile, the logo’s sharp, geometric angles would provide the central theme of Yelo’s brand design. Similar lines and outlines would be featured throughout his graphics, tying the whole design together and creating a strong theme for his brand. We couldn’t be more proud of the final look.

With the overall theme nailed down, we began applying it to each of FaZe Yelo’s stream elements, from overlays to screens to emotes. Now’s where the fun begins.

CUSTOM MASCOT LOGO

Now for a deep dive into FaZe Yelo’s new mascot logo. We didn’t know it yet, but this would prove to be the most pivotal stage in our design process. As the logo started to take shape, it would influence and inspire nearly all of Yelo’s other stream elements – from the strong lines to the sharp angles to the bold color scheme. At the start, however, we had considered a number of different options.

FaZe Yelo Logo Design Concepts

Once it became clear that Yelo didn’t want to pursue a design tied to his iconic Fortnite character, we started sketching out new concepts to pitch him. Originally, a number of logomarks (ie, symbols / icons) were in the mix, including several featuring a unique skull design. The outline of a menacing, glaring skull is shown in two variations; one featuring an electric bolt, the other with cross-hair sights. We felt the skull was an iconic choice, symbolic of the massive kill-counts FaZe Yelo racks up on the battle royale battlefield. We also explored a few concepts featuring the cross-hair design, an icon that also appears on the outfit of his Fortnite character. We felt it was a symbolic option, considering Yelo’s preferred genre (First-Person-Shooter) and pinpoint accuracy. After pitching these ideas to Yelo however, it became clear that – although he enjoyed both concepts – a logotype (ie, text) mascot would better fit his brand vision.

Luckily, our designers had been sketching out a number of killer wordmark logos in the meantime. Two feature sloping ‘YELO’ text with a digital, cartoony font choice. The skull and crosshair designs return here, replacing the ‘O’ letter for extra flair and personality. One design in particular however, stood out. FaZe Yelo’s name is featured in an aggressive, racing-inspired font, with subtle future-tech and digital themes. The logotype leans forward as if charging into battle. Sharp geometric angles, thick stripes, and strong linear patterns convey high energy and confidence. The perfect blend of electric esports action and Yelo’s intense, competitive spirit.

FaZe Yelo Mascot Logo Design

The design caught FaZe Yelo’s eye as well. It was his top choice, and there was little competition. From here we started making subtle tweaks to the design, such as connecting the letters for a more free-flowing, high-energy look. We added color, contrasting a golden-yellow scheme with clean white accents. The final product was finally taking shape, and we’d hit the jackpot. With the new FaZe Yelo mascot logo ready for action, we began applying similar design styles to his stream overlays.

TWITCH STREAM OVERLAYS

With logo in hand, our stream designers turned their sights to Yelo’s Twitch overlays. We needed to keep these as minimal as possible – for competitive esports streamers like FaZe Yelo, overlays are less about the ‘flash’ and more about the essentials. A large or complex overlay layout would just distract viewers from the gameplay. The final design needed to be clean and condensed, with a subtle, out-of-the-way feel. At the same time, the visuals needed to ‘feel’ part of the FaZe Yelo brand; we would need to incorporate many of the linear patterns, angles, and colors found in his new mascot logo.

FaZe Yelo Twitch Stream Overlays

We approached this project a bit differently than our standard custom design, considering Yelo doesn’t use a webcam on air. This made it easier for our team to keep the overlays tight and focused. To further cut down on size, we condensed all of Yelo’s stream information into one main graphic. A ‘central hub’ containing all of his essential stream information.

In the middle of this ‘hub’ is the FaZe Yelo logo, providing a center of gravity and adding weight to the design. A larger, golden outline of the Yelo logo is featured in the background to add aesthetic appeal and depth. Immediately to the right of his logo, we added stream indicators for Yelo’s new subscriber, donation, and bits information. Notice that each of these icons are displayed on a sloping gradient – using angles that match his logo design. Just above these visuals we featured Yelo’s three most-important sponsor information; the iconic FaZe Clan logo, plus GFUEL and SteelSeries. Further below, we featured social media handles for the FaZe Yelo Twitter, Instagram, and YouTube channels.

FaZe Yelo Twitch Webcam Overlay

Our team couldn’t resist – just for fun, they created a separate overlay variation. This second version contains a branded webcam box, for the day when FaZe Yelo decides to do the long-awaited face reveal. A bold, minimalist webcam frame design, featured in midnight black with golden-yellow highlights. We pray to the Fortnite gods that someday the world will see it in action.

TWITCH STREAM ALERTS

Next up, stream alerts, and we had something special planned here. Since this initial design round was un-animated, we wanted a design that would still convey the high-energy, high-impact effect of animated alerts. An explosive, intense design that would build excitement with each new subscriber or donation, while driving engagement in FaZe Yelo’s chat.

We started by creating three unique sketches, each featuring a symbol for the three main alert types: new subscribers, new donations, and new bit cheers. Subs are represented by a large star, ‘donos’ by a dollar sign, and cheers by the Twitch ‘bit’ symbol. All are outlined in the iconic golden-yellow color scheme, while leaning forward to match the sharp angles of FaZe Yelo’s mascot logo. Strong lines in yellow and white arc upwards, mimicking the high-velocity, ‘racing’ feel of Yelo’s branding. In the foreground, notification text and viewer name appear over a black background, with bold font in bright yellow and white.

FaZe Yelo Twitch Stream Alerts

The current design provides a fantastic foundation for FaZe Yelo’s brand, and they’re going to look even better animated. We specifically designed them with future motion design in mind, so stay tuned for our Round 2 design!

TWITCH EMOTES AND SUB BADGES

Now it was our illustrators’ turn to get their hands dirty. This was our chance to inject some of FaZe Yelo’s personality and humor into his design. Yelo shared a few ideas with the team, and our emote artists started sketching.

Yelo made it clear that he wanted a few of his emotes to feature his iconic Fortnite character, as a personal touch that his community would recognize. You’ll see her featured in 6 unique designs, including variations of the popular Twitch emotes ‘Omegalul’ and ‘MonkaS’. Other special additions include ‘200IQ’, ‘YeloKing’, ‘GGs’, and more – all highlighted in golden-yellow and black accents, to match the FaZe Yelo brand. We kept the designs simple and clean, so that even at bite-sized 24 x 24px size they are still recognizable and iconic.

FaZe Yelo Emotes and Sub Badges

Meanwhile, our illustrators were working on a bundle of branded FaZe Yelo subscriber loyalty badges. Again here we needed something simple yet powerful – something that would resonate with Yelo’s community while tying into his brand. The design would need to be recognizable at 18 x 18px, while offering multiple variations for each subscriber tier. After sketching out various concepts, we adopted the ‘Y’ from Yelo’s new logo and filled the interior with patterns inspired by FPS loot and weapon skins. Bright, neon colors in six variations indicate subscriber tier, from base sub all the way to 4-year veterans.

As our illustrators polished up their final emote and badge products, our stream designers were busy cooking up something special of their own…

STREAM SCREENS (OFFLINE / INTERMISSION)

Next up, our stream designers broke ground on FaZe Yelo’s stream screens. In total, we would cook up four different variations:

  • Offline Screen
  • Stream Starting Screen
  • Stream Ending Screen
  • Intermission Screen

Since this round of Yelo’s design did not contain animation, we wanted to pack in as much energy and movement as possible into his Twitch screens. To keep things from going stale, we made sure that each of his four screens featured a unique design, whether it was different color schemes or separate patterns.

FaZe Yelo Stream Offline Screens

Generally, each screen is inspired by the strong angles and movement of the FaZe Yelo mascot logo. Bold, linear patterns and racing-stripes drive energy towards the top right of the screen, while neon outlines in the background add depth to the view. Each screen features a unique composition of the iconic Yelo brand colors: golden-yellow, midnight-black, and crisp-white.

The FaZe Yelo mascot logo acts as the center of gravity for the screens, while social media handles for Yelo’s Twitter, Instagram, and YouTube are displayed just below. At the bottom of the view we placed logos for his three main stream sponsors: FaZe Clan, GFUEL, and SteelSeries.

TWITCH PROFILE PANELS

The finish line was in sight. First however, we had big plans for the official FaZe Yelo Twitch profile panels.

After chatting with Yelo, we knew he wanted his profile to have a clean, minimalist look. Like most big streamers, he wanted his profile to have a tight, condensed feel, with as little text possible. The panel layout should flow naturally, allowing viewers to quickly and easily get a ‘feel’ for the channel.

FaZe Yelo Twitch Profile Panels

We started with the background. A simple, clean look in midnight black, featuring a few of the iconic linear patterns found throughout his stream design. The dark, smooth background would help the white font ‘pop’ to the foreground. Next we added bright splashes of color to the left corner of each panel, using the sharp angles found in the FaZe Yelo logo branding. Each color is symbolic of its respective panel – purple for Discord, pink for Instagram, and the iconic FaZe Clan red, for example. Each panel also features a unique icon to further emphasize its purpose.

Yelo’s sponsor panels are displayed in a larger scale, to convey importance. We also experimented with some 3D effects, to give the panels depth and make them feel like ‘buttons’. This is always an important consideration when your goal is to make viewers click to learn more.

SOCIAL MEDIA ART

Last stop, social media banners. Profile art for FaZe Yelo’s Twitter and YouTube channels. And we’re talking big audiences here – Yelo’s Twitter community is 85K+, while his YouTube subscribers number just under 100K. It was crucial to get this bit of branding right; first impressions are everything on social media, and Yelo needed to hook potential viewers on their first visit to his channels.

FaZe Yelo Social Media Banner Design

For this design, our stream artists used a theme reminiscent of Yelo’s offline stream screens, while adding some important tweaks. A clean, geometric background of yellow and black, featuring the angles and line structure of his logo. This time, however, we traced an outline in the background featuring his social media handle – in this instance ‘Yelotree’. In the foreground we featured his logo, social media information, and sponsor logos.

View More Case Studies

CouRageJD Twitch Design Case Study

View

FaZe Yelo Twitch Design Case Study

View

Nadeshot Twitch Design Case Study

View

FaZe Attach Design Case Study

View

GoldGlove Twitch Design Case Study

View

Giveaway Promotional Design

View

Anavrin Case Study

View

LoboStylez Design Study

View

ORDER YOUR CUSTOM DESIGN

Looking to work with us? Click below and tell us more about your stream design project. Your design could be featured here next!