Designing for Experience

Twitch’s recent design refresh was a year-long feat that combined the efforts of nearly the entire organization to produce a unified, cohesive experience across every platform. The key element that allowed us to move fast and effectively was our design system, Core UI, that serves as a foundation for all Twitch UI elements.

We recognized we had become limited by past decisions, making it difficult to scale products and serve our community in a cohesive way. The rebrand allowed us to focus on the Twitch experience as a whole—letting us refresh our products’ visual design from the ground up.

To bring the new Twitch brand into our products, we created Core UI Ultraviolet, the newest version of our design system. With Ultraviolet, we crafted a new visual design language that is more accessible, modern, and unified throughout all of our products. We also established a set of design guardrails that would help guide product decisions as our organization and products continue to evolve and grow.

Foundation First

Guardrails for Decision Making

As we geared up to make the biggest visual update to our products ever, we defined the guiding principles behind our choices with a Product Experience Framework. We determined what we should and shouldn’t do to support the communities we are building for. When it comes to product design and development, the what behind designs is easy to address, but the why tends to be subjective.

These guiding principles helped our designers to make seemingly arbitrary design decisions in a much more reasoned and rational way. All rebrand design choices were measured against this new framework, and the team was able to rally around it for judgment and guidance.

Our Product Experience Framework

Research greatly contributed to the formation of our framework. We interviewed everyone from executives to creators, which gave us valuable insight into what our products actually mean to our users, as well as clarifying how we aim for them to feel when they use them.

Our Process

Design System as a Foundation

We built Ultraviolet on the existing foundation we laid three years ago when our design systems team, Core UI, was formed. We worked with our Product Design and Engineering teams to design and code every component of our product. This enabled us to assert our new design language quickly—empowering our product team to focus on feature work while the Core UI team orchestrated a new look and feel. Core UI powers all of Twitch product UI, including non-public tools and documentation, allowing us to collect feedback from internal users as well.

From simple components to complex patterns, our design system offers UI kits both in Figma and frontend code in typescript. By adjusting Core UI’s existing color values, design tokens, and font scale and with the introduction of a redesigned icon set, we were able to achieve 90% of our desired Ultraviolet look and feel.

Core UI Documentation

Daily Builds, Staging, and Evolution

While our component library updates were underway, the Core UI team manually released daily alpha builds to mark our progress and publish the changes to a shared internal staging site. This allowed everyone to watch the system evolve over time without having to wait for significant incremental updates. By observing these changes on a constant basis, we could see what was working and where things broke down and needed extra polish.

In the earliest updates, we engaged every product team at Twitch and received constant feedback. Through the breakage, we were able to see which parts of our existing system were being used differently than intended, where gaps existed, and where patterns needed to be changed.

Finally, weeks before the complete brand relaunch, we deployed an internal beta of the refreshed experience so that every employee had a chance to experience Ultraviolet before launch. This allowed us to have tremendous testing surface area and receive comprehensive feedback.

Updating Our Design Tokens

The Twitch color palette was adjusted to account for our updated brand purple, as well as the opportunity to include a new creator color token. Both dark and light themes are important to our community, so we ensured our new color palette represented our brand in both. Because we already had rudimentary color hierarchy and theming in place prior to Ultraviolet, updating our product’s user interface to reflect Ultraviolet’s new color system was relatively simple.

Our Themes and Design Tokens

We adjusted our existing color ramps of 15 grays and 15 purples by using our brand purple as a new starting point. These colors are derived from a desired lightness curve while maintaining the same visual hue across the range. We then tweaked the lightness curve so that the color ramps look correct in the context of our theme hierarchy. These color ramps were then applied to our Design Tokens.

Example of our Token Mapping

Our color-background tokens allowed us to easily understand the behavior of elements on screen when we update their color assignments. 

Every layout starts with the Body token as the lowest UI level—this is usually the background of the page or view. We then move up the Z axis to the Base token which functions as a visually distinct container for grouping content. At the highest level we have the option of Alt or Alt 2, that can be applied based on the needs of visual separation in the interface being designed.

Our Theme Hierarchy

Light and Dark Themes* *
 

All of our UI layers are designed with the intent of our token system, which allows us to easily predict how changes to our colors will affect the overall look of our components, patterns and pages. The token system also has an added benefit that allows us to predictably design multiple themes at once, which means that we know what to expect from both themes in every design we make. Use of Design Tokens also means that we can expand to more theme options in the future based on user need or contrast preference.

Our Design Tokens are stored in JSON and transformed by Amazon’s StyleDictionary. Core UI’s token-based UI opinions are transformed into CSS custom properties that can be dynamically altered within the browser. This opens up the Twitch experience to platform-specific, context-dependent, and user-generated theming and layout.

Font, Icons, Animations

Originally designed by Displaay, our new font, Roobert, is a mono-linear geometric sans-serif font family. It blends the squareness of Eurostyle and the curvature of Avant Garde in a modern way. We worked with Displaay to tweak some of the characteristics of the typeface to work better in some unique use cases in our products.

We liked the styling of our font so much that it inspired our set of over 200 icons—also unified them between mobile and web—created with the same mix of sharp edges and soft lines as Roobert. The set is whimsical and cheerful, drawing inspiration from the bold, rounded characteristics of the font.

Roobert and our Icons

For areas that require a stronger visual emphasis, we created a new Spot Illustration component following the same style as our new icons.

Spot Illustrations

Spot Illustration Extrusion Animation

Animation is a huge part of this rebrand. More than just adding delight, the goal was to make it a part of our design language that blends product and brand together. Animation goes deeper than just applying it to the design’s surface: it brings energy and excitement into products in a functional way. Animation elements are built into certain components to carry these feelings throughout our current and future products.

As part of Ultraviolet, we also introduced 2 functional text components—Title and Header—to help our designers create a better layout hierarchy through typography. The Title component also supports a fun animated treatment.

Our Animated Title Component

Inclusive Design

As we were giving our components a new coat of paint, we were able to address visual accessibility issues, as well as structural. The future of Twitch is for everyone; we believe that our differences strengthen us as a global community. Accessibility and inclusion by design is paramount, and to miss this chance to do right is to turn our backs on our vision for a truly inclusive experience.

We focused on making sure that we achieved AA contrast ratio in both light and dark themes across every permutation of our background and text tokens. Font size, element spacing, and many other variables were updated across the board for improved clarity and wayfinding. Information architecture was better enforced to assist with site readers and to provide a better browsing and viewing experience to those with a variety of accessibility needs and concerns.

Contrast Ratios in our Themes

Users should be able to understand content at a glance. Scannability is dramatically improved with easily identifiable shapes: media is 16:9 landscape, categories are 3:4 portrait, and people are 1:1 circles.

Content Type by Shape

Twitch Plays Support

Our new brand was rooted in supporting creator brands as part of the overall experience. As part of this, we wanted to help creators bring their brands to more places across Twitch. One of the most exciting pieces of Ultraviolet is the introduction of the creator color token.

The creator color token allows our designers to specify regions of their feature’s UI to surface the user’s Profile Accent Color. 

The first place you’ll notice the creator color token surface is on our new extruded hover effects on our thumbnails. The creator color can be surfaced across Twitch, even places outside the user’s own channel, like the homepage. The extruded hover effect is just one place where we plan to allow every creator’s unique brand to shine through in our products. 

Going Beyond Purple

Ultraviolet is more than a refresh of our product design language for Twitch—it is a first step forward in creating a powerful shared understanding of what Twitch’s product experience should be, as well as a giant leap as an organization that has product and brand working harmoniously as one.

While the design system served as the backbone for the rebrand, it took our entire company coming together to get Ultraviolet across the finish line. The collaboration between our creative team, product design team, product managers, and engineers allowed us to make meaningful changes across all Twitch platforms. Ultimately, Ultraviolet became a shared experience for Twitch as a whole, and the impact became more meaningful through cross-team collaboration. 

Look forward to a series of more in-depth posts about design at Twitch.