Adding A Feature: Twitch
Adding a feature to an existing service
Twitch is a streaming platform where streamers can broadcast themselves playing videogames. Viewers are able to watch streams when streamers are live or they can watch previous broadcasts whenever.
UX UI Design, UX Research
Figma, Forms, Maze
80 Hours, Feb 2022
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.
Using the design process
I chose to work on adding a feature to Twitch because the feeler I put out to a group of people wanted to see Twitch improve it's friends feature. This group seemed to enjoy using Twitch, but felt it's "friends" feature was lacking.
Now that I had a direction, I needed to be able to empathize with the users to effectively add a feature to this existing product. To gain a better understanding of the users, I conducted a survey. And to gain a better understanding of the market, I conducted a competitive analysis.
First, I worked on doing research for my competitive analysis. I wanted to see what similar services had to offer when it comes to a friends list. I also made sure to compare account features as well as profiles and statuses.
As you can see from my results below, almost all of the other services had these features. With that, it made sense to include more friend's list features into Twitch, such as status, improved chat functions, and profile page.
Next, I wanted to gain a better understanding of what—people who use Twitch—their needs and frustrations were with Twitch's current friends list features. I created a survey
to see how users felt about the current status of Twitch's friends list. I also used this survey to guide me to what features were most important to the user to be implemented.
Once I had gathered a sufficient amount of results from my survey, I got to work on picking out what the users needs and frustrations were when it comes to Twitch's friend list. I organized my key findings below between user needs and frustrations.
- Wants to see what their friends are watching
- Would like to see what their friends are watching on the homepage rather than just as a text on the sidebar
- Would like to see group chats implemented
- There was interest in there being a profile page for users to view their friends' favorite clips, streamers, etc.
- Current friends list on Twitch doesn't invite or inspire users to do anything outside of just viewing streams
- Would like to be able to interact more with friends while on Twitch
- Doesn't like that Twitch is streamer focused when it would be nice to have a more user friend focus
Creating a Persona
With my empathizing research complete, I worked on condensing all my key findings into one unified persona. Creating this persona would then be a guide in my designing decisions in the next phases of the design process.
To further my research in empathizing, I also worked on creating an empathy map. This would be me ensure I had fully grasped what the users senses were in all regards as well as their gains and pains.
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.
Sketching out the New 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.
High Fidelity Screens
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.
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.
High Fidelity - Finalized versions
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.