Twitch is one of the most popular live-streaming platforms and is currently being used by millions of people today. Twitch is a place where users can watch content creators (also known as streamers), interact in different communities, and stream their own content or gameplay.
When streamers want to notify their viewers about announcements or important information, they either use chat commands or make posts in their Discord servers. Viewers are not always aware of these commands and may dislike joining multiple Discord servers. This leads to streamers having to repeat the same information throughout a stream, which is not very effective and can be exhausting for streamers.
Having a feature in Twitch where streamers and chat moderators can pin messages in the chatbox will help provide convenience to both streamers and their viewers.
Through research, we want to be able to confirm if our assumed problem and solution are valid. Then, we want to learn how this problem is affecting users of Twitch and how they currently try to solve it. During this phase, we also want to identify how this feature of pinned messages is being incorporated into other popular websites and applications.
The goal of this project is to add a feature to Twitch that allows streamers and chat moderators to pin messages in Twitch chat. There will be no changes or redesigns made to the brand or style guide of Twitch. I will be focusing more on Twitch’s desktop screens instead of the app due to time constraints
Duration: 2 weeks (80 hours)
Role: UI/UX Designer
Tools: Figma, Whimsical
I began this phase with secondary research to learn what makes a feature like pinned messages effective and valuable in a service or product. In doing so, I was able to identify other streaming platforms and apps that use a similar feature and conducted a competitive analysis. I evaluated each platform and made notes of their strengths and weaknesses.
After the initial research, I conducted user interviews in order to ask users with experience streaming on Twitch about their thoughts on the assumed problem and solution to solve it. I also asked participants about the current methods and platforms they use to make announcements and communicate information to their viewers. I wanted to learn about any particular features they enjoyed about the current platforms they were using.
I put together a persona by thinking about my findings from my user interviews and also imagining a potential user who would benefit from having a feature like pined messages while they stream.
.png)
After my research phase, I created a task flows that focused on the two main tasks streamers would want to do: pin and unpin messages. Creating these task flows helped me to visualize the amount of steps it would take to complete the task. For a feature like pinned messages, it was important to keep the amount of steps to a minimum and eliminate any unnecessary steps.
.png)
In this phase, I began by creating sketches and low-fidelity wireframes of how pinned messages would be integrated into Twitch's existing design. I also included details such as the different ways a user could interact with the feature.
After the initial wireframes were done, I started to work on the high-fidelity designs. Below, you can find the initial designs I created, along with the arrows illustrating the UI flow.
After completing my first iterations of high-fidelity designs, I wrote up a usability test plan. For this test, I chose tasks that would let the participants interact with the new feature. During my usability test, I avoided using the word "pinned" to see if participants would still be able to figure out how to use the feature.
This was the prototype that my participants used during the usability tests.
Using the feedback from usability testing, I made revisions to my design. I will not be showing every revision that was made as most of the revisions were small, but included below are the most notable revisions.
I moved all of the existing messages in chat to be below the pinned messages so that none of the messages are blocked when the pinned messages are in their default, collapsed view.
I added an extra step for users when pinning a message. Before the message gets pinned, there is a popup asking users to confirm if they want to pin the message or not. This is to ensure error prevention and decrease the chances of the user pinning the incorrect message.
