TWITCH
END-TO-END WEB APPLICATION REDESIGN
Twitch is a live streaming platform where millions of people come together to watch, chat, and share entertainment. Whether it's gaming, music, talk shows, sports, food, or special events, users can find their thing and connect with communities that share the same passion.
BACKGROUND
This is a project for my Foundations of UX class, where my team and I were tasked with working with Twitch as our assigned simulated client.
ROLE
UX Designer | Brand Development, UX Research, Wireframing, Prototyping
DURATION
6 weeks Aug - Sep 2021
TEAM
Hoang Vy (Team Lead Designer) Me, Lin Yan, Tuan, Diep: UX Researcher, UI Designer
The process
The goal
The Problem
User Survey Questions
User Scenarios
Problems and Potential Solutions
User personas
Ideation
Design
Reflection
Comparison
The goal
How might we create the website's navigation and language to meet the expectations of users from diverse backgrounds?
Research + Analysis
The Problem
Twitch has become the largest video game streaming platform in the world with 159 million monthly unique users, 31 million daily active users, and about 8 unique streamers go live every month.
Twitch.tv's core audience
With the rapid growth in usage, Twitch users are looking for more.
In order to…
impress their favorite streamers by donating personalized gifts, but there’s no option for this in the group chat,
discover their favorite songs that come up during streams, but there’s no section to save them,
explore new streamers to diversify their viewing habits, but there are no indicators to show who's new,
… and so on.
This disjointed experience not only wastes time but also interrupts their creative flow and makes stream exploration less seamless.
My team conducted research using Google Forms and in-person interviews with Twitch users who have at least one year of experience.
User Survey Questions
1. What gaming platform do you often use?
a. Online games
b. iOS
c. PS4
d. Xbox
2. What sites do you use to play games?
a. Twitch
b. Reddit
c. YouTube
d. Azubu
e. Others (please specify)
3. How much time do you spend on Twitch each week?
a. Less than 1 hour
b. 1 - 3 hours
c. 3 - 5 hours
d. 5+ hours
4. How do you discover new streamers to watch?
a. Twitch recommendations
b. Social media (Twitter, Instagram, etc.)
c. Word of mouth from friends
d. Online communities (Reddit, forums)
d. Other (please specify)
5. How many streamers do you watch regularly on Twitch?
a. 1 - 3 streamers
b. 4 - 6 streamers
c. 7 - 10 streamers
d. More than 10 streamers
6. Do you often donate to your favorite streamers?
a. Yes
b. No
c. Occasionally
7. Why do you choose to watch Twitch over other platforms?
a. More variety of content
b. Better streaming quality
c. Interactive features (e.g., chat)
d. Community engagement
e. Other (please specify)
8. On a scale from 1 to 10, how would you rate Twitch in terms of gaming content?
9. What types of non-gaming content do you watch on Twitch?
a. Music
b. Cooking
c. Talk shows
d. Fitness
e. Art & Design
f. Other (please specify)
10. Do you watch content from your favorite creators outside of Twitch?
a. Yes
b. No
11. If yes, where do you watch their content?
a. YouTube
b. Mixer
c. Social Media (e.g., Instagram, Twitter)
d. Other (please specify)
12. Do you enjoy watching pre-recorded videos on Twitch (like on YouTube)?
a. Yes
b. No
c. Sometimes
13. What annoys you the most when using Twitch?
a. Ads
b. Buffering/stream lag
c. Lack of content variety
d. Poor video quality
e. Too many notifications
f. Difficult to discover new content
g. Other (please specify)
14. If you could change one thing about Twitch, what would it be?
(Open-ended question)
15. Do you feel comfortable using Twitch to explore new content?
a. Yes
b. No
c. Sometimes
16. Which of the following activities have you done in the past 12 months?
a. Played games
b. Watched streams on Twitch
c. Donated to streamers
d. Followed streamers on other platforms
e. Other (please specify)
Working on the user scenarios provided our team with valuable insights into the problems, helping me identify potential solutions to enhance Twitch's unique value for both viewers and streamers.
User Scenarios
Problems and Potential Solutions
Problems
User wants to find a suitable channel to watch
User only wants to watch streams about games, but there are too many streamers covering too many different genres
User only wants to watch streams about a specific game, but there are too many streamers covering different games
Streamer user wants to watch is offline, and user wants to find another streamer
User wants to find a specific streamer
User wants to watch ongoing events on Twitch
User wants to find a channel they have followed
User finds the channel interesting and wants to follow it
User wants to be notified when that streamer is online
User wants to rewatch a stream from the streamer or view pre-recorded content from the streamer
User wants to report a streamer for inappropriate content
User wants to unfollow the channel
User wants to interact with the streamer and other viewers
User wants to chat with the streamer/other viewers
User wants to express emotions in the chat
User wants to donate directly to the streamer via Twitch
User has donated and wants to receive special privileges
User (free viewer) also wants something to distinguish between long-time followers and new ones
User wants to watch in full-screen mode while still being able to read the chat
User wants to hide the chat content from other viewers
User wants to report inappropriate chat content from viewers to the chat moderators
User wants to find a suitable channel to watch
User only wants to watch streams about games, but there are too many streamers covering too many different genres
User only wants to watch streams about a specific game, but there are too many streamers covering different games
Streamer user wants to watch is offline, and user wants to find another streamer
User wants to find a specific streamer
User wants to watch ongoing events on Twitch
User wants to find a channel they have followed
User wants to manage and adjust their personal information
User wants to start a stream
Streamer wants to adjust the display information of their livestream channel
Streamer wants to create small events for viewers (e.g., predictions, giveaways, polls, etc.)
Streamer wants to end the livestream
User wants to post content on their channel
User adjusts the volume and image quality settings in the stream channel
User clicks the Watch in windowed mode button
User wants to adjust the image and sound quality of the channel
User wants to be able to do other tasks while still watching the stream
Solutions
Go to the Discover section
Go to Categories and click the Game button
Go to the Game category and choose the specific game that user wants
Refer to the suggested list of similar streamers who are currently online
Enter the streamer's name into the Search bar and press the Search button
Find the Events button or event posters on the homepage
Click on the Following section
Click on the Account Management section
Click the Start Live button
Click on Customize Livestream or Channel Dashboard
Click the Create Event button
Click the End Livestream button
Click the Post Content button
After conducting insightful research, we entered the analysis stage, where we identified the functions to retain from the current public version of the web app, along with new and upgraded features to introduce based on our findings:
Viewers
Follow
Subscribe to follow
Buy follow code
Chat
Hide offensive language
Gift to streamer
Turn off notification
Subscription package
Add friends
Share
Share via whisper
Replay channel
Block
Chat
Report
Gifts
Filter chat
Both Viewers & Streamers
Explore
Sign up
Login
Search
Notification
Friends
Create clip
Share clip
Copy link
Trim clip
Release clip
Video options
Sound
Program
Broadcast
Adjust image quality
View mode (Full screen/Window/Vertical mode)
Streamers
Live stream
My channel
Manage channel settings
After thorough research and gaining valuable insights, we ensured a deep understanding of users’ goals, frustrations, habits, and motivations. This enabled us to create well-defined personas that accurately represent Twitch’s user base.
User personas
Benjamin, a 25-year-old sales consultant, loves to explore game-streaming channels and has been doing so for about 3 years.
GOALS
Benjamin enjoys watching live streams, gaming, and interactive content for fun and relaxation. He stays updated on trending games, events, and popular streamers. He explores streams based on personal interests, such as gaming, cooking, music, and art. He participates in giveaways to win prizes during live streams and supports his favorite streamers by donating or subscribing for exclusive perks.
HABITS
🔎 Prioritization of watching tournaments over individual streamers.
👀 One main tab for tournaments, with one or two extra tabs to support favorite streamers.
🎁 Free gifts provided by the platform to level up the account and unlock fan badges in the streamer's channel.
💬 Engagement in the chat, interacting with the streamer and other viewers.
🎰 Participation in giveaways or activities offered during the stream.
FRUSTRATIONS
🗓 Frustration from missing key events and updates.
💬 Discomfort with the chat frame, especially on streams with large audiences. Fast-moving chat, overwhelming notifications, and merged viewer messages creating a cluttered and unfocused experience.
REASONS
✨ Top-level players and the excitement of tournaments
🕹 Balance of both competitive events and personal favorite content
🎁 Recognition and standing out as a dedicated follower through the use of complimentary gifts
⭐ Connection with the streamer and community through engagement in the chat.
🎮 The opportunity to win exclusive prizes or rewards
Ideation
Building on Twitch's initial concept, our team leveraged the strengths of the current web app and developed an upgraded sitemap based on our in-depth research to ensure that the new sitemap aligns with users' needs and goals. We created two different versions, and after many discussions and iterations, we arrived at the final version.
Design
Time constraints were another challenge we faced during the process. We prioritized creating hi-fi wireframes, then developed the prototypes. Our focus was on addressing the users’ pain points, needs, and goals. In the end, we mapped out the key flows we wanted to showcase during our pitch through the prototype.
YOU’RE ALREADY ONE OF US
Join the millions on Twitch now!
Streamer management screens 🕹
The simple design layout makes it easy for streamers to go live quickly, without the need for complicated setup steps, saving them time and energy.
Ranking of the most-watched channels on Twitch
Even beating the Gaming section to take first place, “Just Chatting” highlights the strong connection between streamers and users. The chat feature and gifting definitely play a crucial role in making it the top section on Twitch.
User send gifts 🎁
As one of the most important activities that both streamers and users want to include is boosting interaction. Users can now view detailed information about streamers and their vibe, reflected through their mascots/icons and styles. Based on this, users can choose the most suitable “Bits” (virtual gifts like stickers and icons, available in both standard and customized versions). “Cheer Anonymously” is also an interesting option that enhances the vibe, allowing users to donate large amounts without revealing their identity.
Streamer customized Cheermote 🍄
Streamers can create increasingly exciting Cheermotes for each tier of Bits used: 1, 100, 1,000, 5,000, and 10,000. Users no longer need to search for distracting “Gem” icons since they can now directly choose a customized design that matches each mascot's characteristics and complete the donation process instantly.
User’s Following Channel ✨
Users can easily find their favorite streamers in the left sidebar, eliminating the need to waste time searching for their favorite livestreams with all the distractions. The sidebar also includes “Categories” and the “Latest Videos”, ensuring users don’t miss any memorable moments.
It’s time to Discover 💖
To enhance the exploration experience for a diverse range of users, the “Discover” channel will undoubtedly become the best way for users to find new streamers. This feature is my favorite because it helps new streamers stand out in the highly competitive space, allowing them to reach audiences despite the dominance of top streamers. Letting them shine on their own and offering support through “Discover” is truly amazing!
Alongside other channels, music certainly has potential, as it’s one of the areas that has been steadily gaining attention.
Music statistics by month (2021) - TwitchTracker
Get ready to vibe! 🔥
Users can now easily find their favorite music streamers based on the type of music they love. With a dropdown menu offering sorting options (Recommended, View (Ascending), View (Descending), Recently), the experience will significantly enhance user exploration.
Esport Victory Starts Here 💥
Stay in line with user needs by offering access to live streams of gamers and battles they may have missed before. In this section, users can easily select their favorite games, watch live battles, view streams from pro gamers, and explore a list of replays and popular matches. This ensures that users never miss any updates on their favorite gamers and events.
Your Playlist, Your World 👑
Users can now create their own personalized playlists, making it truly their own world where they can customize everything. They can organize topics into different categories, view all the channels they've subscribed to, and even change their favorite illustrations.
Get Notified, Let’s Chat! 👋
Users can now connect with others who share the same hobbies and favorite channels. This boosts their interaction, not only with streamers but also with friends from around the world. The experience is no longer just about them, it's about engaging with a whole new world through the screen.
Reflection
Challenges
️🎨 Team member capacity
At this time, aside from the design leaders, the rest of the team members came from different fields, stepping into the project with little experience in design. The challenge of delivering such a large and fast-paced project, with limited time, required us to figure things out quickly and efficiently. By recognizing each team member's strengths and weaknesses, fostering unity and solidarity through mutual support, and respecting each other's ideas, we were able to collaborate effectively and successfully complete the project.
️🎨 The fear of not delivering perfect solutions
Everyone was extremely enthusiastic about the project, but due to limited experience in this field, there was a sense of hesitation and constant stress about making everything perfect. In the end, we decided to adopt a reverse approach, aiming to fail fast so we could quickly adjust and create a better version in less time.
Takeaways
01
Time management is crucial, especially for fast-paced projects. It's important to regularly review the timeline and ensure alignment with targets and goals at every stage.
02
Listening to each team member's concerns and offering support is essential to maintain throughout the project, ensuring everyone feels heard and recognized. “No one is left behind” is the motto we live by.
03
Mistakes are expected and respected! Adopting a “fail fast” mindset helps relieve the stress of creating perfect solutions and products.
IT’S BEEN 4 YEARS SINCE THIS PROJECTS WAS COMPLETED!
Do any features from our project align with Twitch's changes today?
Music
What we did ✨
Sections can be created by users in the left sidebar to suit their needs embracing customization
Subscribed channels are always displayed with an active/inactive status indicator
Options for changing illustrations are available
What their website is like now 🌟
Separate them into two sections: Music and DJs
Set a clear division for different music genres for the Music section (Hip Hop and Rap, Soul, Funk, R&B, etc. Instead of allowing users to create their own categories like our ideas, now almost all of the necessary sections are pre-defined
Streamer customized Cheermote
What we did ✨
Provide instructions for users on how to donate to support streamers through the 'How do I cheer?' section
Encourage anonymous cheering to create a big surprise and make a lasting impression (especially for large donations)
Allow users to express their creativity with emotes by earning bits
What their website is like now 🌟
Offer more freedom for both streamers and users to customize emotes by allowing them to modify each emote, choose their favorites, and more
Organize everything into separate sections with clear instructions and icons
