/

Twitch

ABOUT

Twitch

Twitch is a platform where people livestream themselves playing video games or other activities. It's a popular community for gamers and content creators.

Senior UI Designer

Jan 2021 - Dec 2022

US

What I use

Project overview

Develop a user-friendly and intuitive creator dashboard for a Twitch streamer studio platform that seamlessly integrates essential tools for efficient stream management.

Target Audience: Both new and seasoned Twitch streamers.

Overall, this project aims to create a powerful yet user-friendly Twitch streamer studio platform creator dashboard that empowers streamers of all levels to manage their streams efficiently and engage their audience effectively.

What I use

Design Challenge

Create a user-friendly studio application for Twitch streamers, focusing on an intuitive design that seamlessly integrates essential tools for efficient stream management. The challenge is to find the sweet spot between simplicity and functionality, ensuring an outstanding user experience for both new and seasoned streamers.

How we did it...

Design Process

This is what the design process looks like, but this is just a small part

Who is a customer?

User Persona

We found out about different Twitch users, from newbies to pros, using various research methods. We carefully understood each type to design a dashboard that helps them easily do creative stuff and succeed on Twitch.

Our research methodology relied on a multi-pronged approach:

User Interviews: We had talks with different people on Twitch, from those just starting to experts. These discussions helped us understand why they use Twitch, what issues they face, and what they want the platform to do for them.

Surveys and Online Polls: We asked lots of people in online surveys and polls about Twitch.
This helped us see big trends and find out what people generally like.

Competitive Analysis: We carefully looked at current Twitch studio platforms to find out what's good, what's not, and what features different streamers like.

Data and Analytics: By looking at data from the platform and what's happening in the industry, we learned more about how people stream now and what might happen in the future.


We talked to lots of Twitch users, from beginners to pros, to understand what they need. This helped us create different user personas that show their challenges and goals. With this info, we made a creator dashboard that fits the needs of Twitch streamers, so they can do their creative stuff easily and succeed.

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Profile

Age: 25-35

Experience: Several years of streaming experience, primarily focused on tech reviews, tutorials, and gameplay.

Tech-savvy, knowledgeable about streaming platforms and hardware.

Motivated by growing their audience, monetizing their stream, and staying ahead of the curve in the tech world.

Challenges: Managing complex stream setups, maintaining high production quality, and staying competitive in a saturated market.

Goals

I started finding user personas for Twitch by doing research and analysis. I used different methods to learn about the target audience's traits, needs, and actions.

Frustrations

I started finding user personas for Twitch by doing research and analysis. I used different methods to learn about the target audience's traits, needs, and actions.

Personality

I started finding user personas for Twitch by doing research and analysis. I used different methods to learn about the target audience's traits, needs, and actions.

Frustrations

I started finding user personas for Twitch by doing research and analysis. I used different methods to learn about the target audience's traits, needs, and actions.

Frustrations

Juliano Rubio

How users move?

User Flow

Creating a user flow for the Twitch Creator Dashboard involves mapping out the steps a user takes to achieve specific goals within the dashboard.

This is a simple user flow that I created for a case study.👇🏻

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Log in

Tutorial

Twitch

Menu

Creator Studio

Creator Studio

Menu

Logout

Stream manager

Alerts

Community

Content

Settings

Viewing rewards

Stream Together

Sign Up

Ability to skip

What I use

Design System

Implemented comprehensive design system at Twitter, establishing clear guidelines and reusable UI components. Streamlined design workflow, promoting consistency and enhancing the user experience.


Collaborated cross-functionally and provided thorough documentation for seamless adoption. Resulted in improved efficiency and a cohesive design ecosystem.

In developing the design system for the streamer dashboard, our team worked closely together to address UX and UI challenges.

We held regular meetings and discussions to identify pain points and ensure that each team member's input was considered. Through iterative design and continuous feedback, we refined the components and layout, resulting in a streamlined and user-friendly streamer dashboard that effectively addressed and resolved UX and UI concerns.

What I use

Wireframes

When creating wireframes for our projects, we took a collaborative approach within our team. We initiated brainstorming sessions to gather ideas and preferences, allowing each team member to contribute their insights. By using wireframing tools, we facilitated an efficient and iterative design process that ensured everyone's input was incorporated. This collaborative effort not only accelerated the creation of wireframes, but also enriched the end result with diverse perspectives, resulting in more effective and user-centered designs.

When creating wireframes for our projects, we took a collaborative approach within our team. We initiated brainstorming sessions to gather ideas and preferences, allowing each team member to contribute their insights. By using wireframing tools, we facilitated an efficient and iterative design process that ensured everyone's input was incorporated. This collaborative effort not only accelerated the creation of wireframes, but also enriched the end result with diverse perspectives, resulting in more effective and user-centered designs.

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

home

content

Go live

Analytics

Go live in five!

Stream Games

Stream IRL

Stream

home

content

Go live

Analytics

Insight

No Stream Summaries

of Your channel

Account

Subscriptions

Drops & Rewards

Settings

Appearance

My channel

User

Done

home

content

Go live

Analytics

Content

No clips of your channel

What I use

High Fidelity wireframes

For our hi-fidelity wireframes, we elevated our design process by fostering a collaborative environment within the team.

Through interactive workshops and in-depth discussions, we fine-tuned each element to achieve the desired level of detail and functionality. Using advanced design tools, we translated concepts into visually polished, high-fidelity wireframes. Regular feedback loops and refinement sessions ensured a seamless and cohesive design, resulting in a visually stunning and user-friendly end product that met the high-fidelity requirements of the project.

For our hi-fidelity wireframes, we elevated our design process by fostering a collaborative environment within the team.

Through interactive workshops and in-depth discussions, we fine-tuned each element to achieve the desired level of detail and functionality. Using advanced design tools, we translated concepts into visually polished, high-fidelity wireframes. Regular feedback loops and refinement sessions ensured a seamless and cohesive design, resulting in a visually stunning and user-friendly end product that met the high-fidelity requirements of the project.

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Dashboard

Menu

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

Creator Mode Creator Mode

What I use

User Testing

In our user testing process, we prioritized a user-centric approach to refining and improving our products. We began by identifying key user scenarios and tasks, and creating realistic test scenarios that mirrored the user's journey. Using a variety of user testing tools, we gathered feedback and insights to iterate on our designs. Regular testing cycles allowed us to pinpoint pain points, improve usability, and ultimately deliver a product that effectively resonated with our users. This iterative and user-centric methodology was instrumental in the overall success of our products.

In our user testing process, we prioritized a user-centric approach to refining and improving our products. We began by identifying key user scenarios and tasks, and creating realistic test scenarios that mirrored the user's journey. Using a variety of user testing tools, we gathered feedback and insights to iterate on our designs. Regular testing cycles allowed us to pinpoint pain points, improve usability, and ultimately deliver a product that effectively resonated with our users. This iterative and user-centric methodology was instrumental in the overall success of our products.

How to navigate people to streamer dashboard?

How to navigate people to streamer dashboard?

How to help streamers?

GameFi

Results:

Coming soon

Coming soon

What I use

Frequently Asked Questions

Community

Manage the roles of your community members under Roles Manager, check out the updates you’ve made to Ad Breaks, Category, and Stream Title under Activity, and see all of your current followers under Followers List.

For more info on the different roles that can be assigned to your community members, visit the Managing Roles For Your Channel help article.

Content

Organize and curate your streaming content, such as your Videos on Demand (VODs) and clips. If you have any copyright claims on your channel, you can keep track of them with the Copyright Claims Manager.

For more tips on how to manage your content, check out the Video on DemandHow to Use Collections, and How to Create, Edit, and Share Clips help articles.

Organize and curate your streaming content, such as your Videos on Demand (VODs) and clips. If you have any copyright claims on your channel, you can keep track of them with the Copyright Claims Manager.

For more tips on how to manage your content, check out the Video on DemandHow to Use Collections, and How to Create, Edit, and Share Clips help articles.

Settings

Access your stream key, manage your VODs and clips settings, and edit your permissions in the Stream section. Manage your profile settings and customize your channel (such as through adding a profile photo or setting a custom background) in the Channel section.

You can also add your social links or set a streaming schedule here. For a comprehensive guide to setting up your channel page, visit the Channel Page Setup help article.

In the Moderation section you can set controls for your channel via AutoMod and manage what is allowed in your Chat, such as by blocking hyperlinks or setting up personalized Chat Rules. For more details on how to moderate your channel, visit the Setting Up Moderation for Your Twitch Channel help article.

If you are a Twitch Partner or Affiliate, you’ll find options pertaining to your revenue/monetization settings and onboarding information in the Partner or Affiliate section. For more information about this section of the dashboard, please see the Partner and Affiliate settings guides.

Partners and Affiliates can also access the Streamer Community Survey in the Streamer Survey section. Check out this help article to learn more about the Streamer Community Survey.

Viewer Rewards

Manage your Drops preferences in this section of the dashboard. Keep an eye out for the latest Drops and connect your Twitch account to your game accounts to grant rewards to your community. Please note that your viewers will not be eligible for Drops if Drops are disabled on your channel. For an overview on Drops and how they work, check out the How to Discover and Claim Drops on Twitch help article.

If you are a Twitch Affiliate or Partner, you can also manage your Channel Points and Emotes preferences in this section. Visit the Channel Points Guide for more info on setting up and managing Channel Points. The Emotes section is your one stop location to manage subscription emotes, Bits tier emotes, and Cheermotes (Partners only). Watch this Creator Camp to learn more.

Streaming Tools

View the most common streaming tools to set up your stream and go live in this section, or in the Recommended Software for Broadcasting help article. We recommend Twitch Studio (available for both Windows and Mac) for desktop streamers who are getting started, it takes the guesswork out of setting up and managing your stream so you can start streaming faster and focus on what really matters, creating great content for your community.

Extensions

Extensions provide interactive experiences that are built by third-party developers. Extensions can help streamers drive engagement, create integrations with top games, share important information, and even earn additional revenue. Manage your installed extensions or discover new extensions in this section of your dashboard.

Creator Camp

Creator Camp is a site where streamers can access the information and resources they need to grow and improve their streams, all in one place. From the basics to advanced tips and tricks, learn how to level up your channel, build your personal brand, and more, directly from other successful creators on Twitch. Creator Camp also offers live broadcasted sessions with Twitch Partners and other experts to go deeper into topics that matter most to you.

What I use

Result

Many streamers find it difficult to navigate the dashboard and access important features


Streamers would like more customization options for the layout and appearance of their dashboard


Many streamers are unaware of certain features and tools available on the dashboard, and would benefit from better in-app tutorials or documentation


Streamers would like more visibility and control over their chat and moderation settings


Some streamers find the current notification system confusing and would like more options for customization


Many streamers would like more integration with other tools and platforms, such as the ability to schedule streams and share content on social media


Streamers would like more data and analytics about their streams, including viewer demographics and engagement metrics


Some streamers experience technical issues with the dashboard, and would like better support and troubleshooting options

Some streamers experience technical issues with the dashboard, and would like better support and troubleshooting options

What I use

Frequently Asked Questions

Community

Manage the roles of your community members under Roles Manager, check out the updates you’ve made to Ad Breaks, Category, and Stream Title under Activity, and see all of your current followers under Followers List.

For more info on the different roles that can be assigned to your community members, visit the Managing Roles For Your Channel help article.

What I use

Tools

Figma

Sketch

InVision

Adobe Creative Suite

CSS

HTML

Twitch API

JavaScript

Swift

Flutter

Kotlin / Java

React Native

Jira

Slack

Asana

Confluence

Skills

Skills

Wireframes

Prototyping

Information Architecture

Visual Design

Interaction Design

Communication Skills

Product design

Design Systems

User Flows & Task Flows

Lo-Fi & Hi-Fi Wireframes

Native mobile app

Usability testing

A/B Testing

User Interview

User persona creation

User Research

Scope

Duration: 1 year
Components: 320+
Key Screens: 220+
Web app + Mobile app

Impact

$3.4 billion
Increased company value over the next 15 years