My role in this project and brief description of the project.
Role: researcher, UX/UI designer, user testing
Duration: 3 weeks
Tools & Software: pen, paper, google form, figma
Objectives: When there are multiple streamers in my follow list live at once, it’s difficult to figure out who I want to watch or how to watch them all at once. I would always either split screen myself or pick one and miss out on the other one that I also wanted to watch. I know there are websites out there that allow you to copy and paste Twitch links so they split screens for you but wouldn’t it be easier to have that feature directly on Twitch?
This feature adds a split screen option that would be different from the already offered “Squad Stream” because it will not have any restrictions and be viewer's choice not the streamer. It would allow you to play any streams you want without restricting categories or specific topics.
Quick rundown of the research process. I wanted to start with a board audience and then slowly narrow it down to engage in meaningful conversations about Twitch's current UI.
Objectives:
- Learn of features that are available elsewhere for multi-streaming
- Learn if other streaming platforms offer this feature
- Understand how users interact with Twitch
- Learn if there are pains to the UI of Twitch right now
Methodology
1. Released a survey to gauge interest in the topic through Discord and other social media platforms.
2. Conducted 1-on-1 interviews to deep dive into survey responses. Gained better understanding of respondents use of Twitch, whether as a streamer and/or viewer.
3. Performed competitor analysis to see whether other streaming platforms offer multistreaming. Specifically researched Youtube Gaming, Facebook Gaming, and even third party extensions for multistreaming.
Survey & Interviews
- 11 total survey responses
- 4 interviews conducted
- Average user age approx. mid 20s
- Most were both streamers & viewers of Twitch
Interview Findings:
- Discovering Twitch streams was a secondary finding from other platforms (ex: YouTube)
- Like to “lurk” on stream (a person who plays stream in the background but isn’t active in the chat)
- Users do have interest in a multi-stream feature for the convenience of it
Competitor Analysis Findings:
I analyzed Youtube Streaming, Facebook Streaming, and Twitch's "Squad Stream"
- Across all platforms, there were no multi-screen feature
- Most platforms are already too crowded for more screens to be added
- Twitch’s “Squad Stream” doesn’t appeal to Partnered Streamers enough to use because of restrictions
- No control for viewers as Twitch users
Persona
Created based from interviewees' experience and desire for this added feature. An individual that just started out streaming their music and wants to support other streamers through view counts.
My approach with the design after reviewing my research and persona.
My idea grew from my personal experience with watching streams combined with Twitch's friendly UI layout that I could take advantage of. I started off small by drawing out different chat boxes and sketching/brainstorming ideas that came to mind. I knew I wanted to use the chat box area as the main control center because right now there isn't a lot of special features there. As an example, I drew out a visual for where the volume and clip button would be in the chat box.
I wanted the design to look clean and not too much all at once. I don't want to cluster the screen and overwhelm viewers when they are just trying to enjoy their streamer. In order to do that, I kept the concept of "control panel" in one area that users already recognized which is the bottom section of the chat box.
Two Main Design Goals
- Incorporate a multiple stream viewing feature for viewers who enjoy watching different streamers all at once
- Create a seamless process to adding streams to watch without having to split screen manually and still count the views for the streamers
A sitemap of the current website and then creating the task flow for a user.
The sitemap was simple and straightforward, the audience shouldn't take too much time to search for their streams so conveniently their following list is on the left side of the homepage.
The task flow should also follow how simple and straightforward the sitemap is so the design should be able to add and remove streams when already watching.
My approach with the design after reviewing my research and persona.
After completing my sketches, I created wireframes for the desktop version. In this project, the main focus was to add the feature for both the desktop and mobile application. I ultimately decided to go with just the desktop version because, from my interviews, most users would watch multiple streams only when at home on their computer because of the screen size.
Highlights of wireframes:
- A user can have up to 4 streams to watch
- Options to change how they want the streams to be set up such as all windows equal sizes vs. one large window and the rest small, etc.
- Ability to rotate through different chat
- Easily know which stream and chat box is focused on
Transferring the wireframes with actual design elements to make it come to life.
I began to create low to mid fidelity screens of my wireframes. The most challenging part was creating the chat box. I had ideas that I wanted to try out but I also worried about making it too different and make the site seem like a completely different website. I didn't want to stray away too far that old features would need to be relearned.
The ultimate goal was to keep everything central to where the viewers would be interacting the most. I used Dark Mode as the main canvas and moved different features into the chat box such as the volume and clipping buttons.
I worked with another DesignLab student that was familiar with Twitch. We discussed the usability of the low fidelity model.
Test Objectives
- Test overall flow of feature
- Test if the chat box redesign is too much
- Gain feedback on functionality
Test Goals
- With the limited space already, where would the start of this feature be?
- How does the tester feel about the screen layout style?
- Are there any large red flags or concerns that need immediate attention?
Feedback Received
- Design style is very similar to Twitch's right now
- Functions moved into the chat box is bold and opinions on it will differ between different users
- Adding more streams to the screen should not require many steps (clicks)
- Screen layout is overall easy on the eyes
Questions that were raised
- How would this look if we put it here?
- Is it too much clicking for a user to ‘activate’ multi-streaming?
- How would this look in the mobile version?
- Would this be a mobile feature?
Based from the usability testing session, I created a prototype to see how the design flows when activating the multi-viewing feature.
This is the first version of the prototype. The focus of the prototype is to show the flow of the feature in action. Based from the usability testing sessions, I wanted the steps of action to be seamless. The transition between 1 to 2 to 3 to 4 streams should be smooth and quick for viewers to continue watching after clicking.
With a simple button, the user can add up to 4 streams to watch. They can scroll through the small window to look through their follow list or search by users that are live at the time. The "plus" and "minus" icon helps the user to easily see who is already on the screen and can add or remove them quickly.
The goal was to add a feature that would allow more options for viewers to watch multiple streams at once if they so choose. I wanted it to be easy to control and not too different from how Twitch already works. With this feature, it cuts out the headache of trying to split screen all the streams you want to watch. If you can't relate, imagine that it's football Sunday and there are three games playing at once. You want to watch them all, but they're all on different channels. Wouldn't it be easier to just have it all on the screen at once rather than flipping through the channels? Same concept.
Priority Revision
Based from group discussions, the next revision should start considering how we can have this feature on the mobile application. Many viewers are on-the-go so to have this feature to be included on the mobile application will surely enjoy it.
Next Steps for this project:
1. Usability testing for the first version of prototype
2. Make iterations based on feedback and test results
3. Produce a higher-fidelity prototype (make it more realistic)
4. More usability testing
