Adding A Feature: Twitch

Twitch is focused on its streamers rather than the user who watches the stream. Users would like to have a little more control and see what their friends are interested in, and have more abilities to connect with their friends through Twitch.

Add a feature to give the user more power to connect with their friends, including a group chat option and a friend profile page that showcases what their friends are interested in watching.

Now that I had empathized with the users and had a persona to work with I could begin defining.

Looking at the results from my survey, I took into consideration the needs users brought to my attention. Using what I had learned, I made a list of priority features that I planned to incorporate into Twitch.

Below is a table showing the features and their priority rankings. This was based on the results of my survey.

Next, I needed to incorporate these features in to Twitch's existing site map. In order to help me add the additional site map, I recreated Twitch's existing site map. Once I had Twitch's initial site map laid out, I could then look how to incorporate the additional features. Below you can see how Twitch's pages were originally laid out, and how I incorporated the additional features into it. I made sure the flow still made sense so it would be easy for the user to navigate the newer features.

Having defined the key features needed and how to implement them into the existing site, I started working on sketching out the new features / new screens needed.

How Twitch originally works is you have to click on your account in order to access your friends list. I thought this would be too many clicks for the user just to access, so I planned on adding a friend icon to the icon row at the top for ease of access. Based on how Twitch is laid out, I felt the Discover page would be the best place to put the new feature of "See what your friends are watching."

Next, I worked out how to implement the "group chat" function and "Watching Now." I felt that they would work best on the Social page, i.e. the friends list page. I put the group chat button right next to whispers as that made the most sense in this layout. "Watching Now" was a bit more challenging as I wasn't sure where the best place on the page would be for that function. In the end, with so much space at the top, I felt that was the best place for this feature. In addition to those features on this page, I also added a menu button next to each friend on the list. I thought this was necessary as there were more ways to interact with the friends lists now with the added feature of group chats and profiles.

Now, I needed to work on creating three new pages for the new features Friend's Feed page, Group Chat Manager, and Profile page. For the friend's feed page, I wanted users to be able to easily access what their friends were watching, so from either the Discover page or their Social page, they would be able to see a direct feed of their friends online and what they are watching. The Group chat manager really just mirrors the same layout as the friends list, but would have group names instead. Finally, for the Profile page, I took inspiration from the competitive analysis and incorporated it into Twitch's format as best as I thought would work.

Below is my sketch of all these additional features and their flows into each other.

With sketches complete, I could now work on creating the wireframes for the added features. While I was working on the wireframes, I decided against creating the "Friend's Feed" page. It felt a bit redundant if a user could just go to their friends list and click on a friend and view their profile to see what they were watching. So at this point in the project I felt it best to be cut out.

Before starting the high Fidelity screens, I needed to be sure I had a good understanding of the style. I created a style guide, including components I intended to add as a feature to Twitch. I did not have to create too many additional assets as I tried my best to follow Twitch's existing style. I really only add a large profile picture asset and added menu options.

With the Style guide completed and understood, I used my wireframes to create the high fidelity screens I would need for prototyping.

Now at this point, I worked on creating the prototype for this project. I did my best to make sure this prototype would not have any issues, ensuring each necessary component was accounted for in the prototype for testing.

My goals with testing was to see if the added features were intuitive enough for users to use. I tested this by conducting a task-based questionnaire using maze.co.

I was able to get eleven participants for my test and found that many participants struggled with the new features. It took most of the participants longer to figure out the expected path on all of my test scenarios. According to maze.co, my new features had a usability score of 51%. This meant I need to really dig into what went wrong and figure out how to improve this for the users to have better usability.

I looked over the results and worked out what was successful, what needed improvement, and what was unsuccessful. I then grouped them together into a whiteboard type arrangement so I knew what to focus on for the reworking.

Using my whiteboard as a reference, I got to work on updating my screens to be more user friendly. I removed the friend button icon as most users are used to selecting the chat bubble to access their friends list. So really I had been doubling up on icons at the top. Next, I removed the section from the discover page for "friends watching" as I learned from my results that many users actually avoid using discover page altogether.

Since many of the participants were having issues finding where to discover what their friends were watching, I realized my initial idea of having a "watching now" page would perhaps be more useful. I added "Watching Now" to the Social page so users could easily see what their friends were watching. Though instead of going to a new page, I felt it best to be included as another tab in the Social page, so the user still has access to go back to their friends list if needed.

Now that I had made my revisions, I created another test, slightly different from the first, to test whether these improvements would help the participants.

The results of the test were much better with these changes, going from a 51% usability score to an 80% usability score felt like a win to me. I'm sure given more time for this project, a few more iterations and tests, I could reach close to 100% usability.

With the second round of testing complete and at a better usability score, I felt confident enough in my final screens to complete this project.

Unfortunately, as I am rewriting this case study, news came out that Twitch will be completing removing it's current friend's list feature by May 25, 2022.

Though I do feel that this is a good learning experience. The sample size I surveyed could have been biased towards wanting a friends list expanded upon. Or Twitch may have different business goals that I had initially realized.

In the end, I am happy to have tried working on this added feature. It was a great learning experience and great to learn how to create a better user experience to an existing product.