Design a new feature for Twitch
Our project started with the brief to design a new feature for Twitch, a leading platform for live-streaming games. The two of us came to this project with little-to-no knowledge of gaming or live streaming, but we were excited to dive deep into this subculture.
Diving into streaming culture
We were really surprised, not only by how many interesting nuances there were around gaming and live streaming, but by how mainstream these behaviours actually were. With every conversation, we left a with insights that inspired, validated and rejected certain early ideas.
“I kind of got tired of sitting in my room streaming everyday. That’s why I took my break from Twitch. I wanted to go out and meet people again.”
Szeki, a female streamer mentioned how not having enough real-world interactions pulled her away from the platform, and upon probing, we learned that she enjoyed meeting up with her fans. She also told us that there was a huge dropoff when it came to converting viewers to follow them on other social platforms, and so this made us look into how we could create tools for streamers to organize in-person events.
“I usually place a huge order of fast food in the morning, and then just eat the leftovers throughout the day. Every second I leave the stream I lose viewers. The time I spend answering the door is killing me.”
A high-level streamer from LA talked about how critical it was to stay on stream, especially in the upper-echelons of streaming. These are also the top revenue producers for Twitch, which lead to us thinking about them building a physical camera that could detach from their computer and act as a vlog-camera when needed.
“Twitch chat is famous for being the worst kinds of people. Oh god. It’s like this collective of people that just follow each other instantly.”
One Twitch viewer told us this, going on to talk about some of the common racist jokes that were customary, especially in streams with large viewer counts. This made us start to reconsider an idea we had around community tagging of videos through hashtags in a chat.
“Usually I come home and open up Youtube, Facebook, and Twitch. I usually leave Twitch on in the background. It’s like leaving the TV on in the background. I’ll switch back to it when something interesting is happening.”
We started to learn that live streaming wasn’t always about active viewing. Switching between passive and active viewing was a common habit, and this got us to start exploring this area more.
How do viewers use Twitch on Mobile?
As we talked to people, our preconceptions around Twitch started to change dramatically, and so we started being more careful to test our ideas before latching on to them. As we started to think about creating an experience around passive watching in the mobile app, we decided it would be important to do some research around how people currently use the Twitch mobile app vs the desktop version.
We created a survey and posted it to a Vancouver Community Meetup Group, Powered by Twitch on Facebook. From their responses we uncovered that most people who watch streams on desktop also watched on mobile. Viewers answered that they use it mostly when they are away from their desktop, like during commutes, at their friend’s house, and when they’re at school. More importantly, viewers will watch while doing other things such as, browse the internet, do homework, and play games.
A shared understanding of our persona
Having worked together before, the two of us remember a project where a mistake we had made, in our group of 6, was not having a solid shared understanding of our persona. This lead to a lot miscommunication and time wasted.
With this being such a unique group to us both, we wanted to make sure we were on the same page, and so we developed a persona to help guide our design decisions.
Some guiding principles
From our research emerged a couple key insights that guided our
design process.
Passive to active, and back again.
Too often people design interfaces that assume the user is completely engaged. From our research it was clear that Twitch viewers would constantly switch between passive and active viewing, so it was important to design for these distinct type of moments.
You don’t know, and you don’t know that you don’t know.
You should never assume too much about your user, but this project really pushed us as designers to adhere to this idea. We were constantly having ideas rejected and new trains of thought formed in our head with every conversation we had. We made sure to use some level of research at every stage of the process.
The bottom line.
At the end of the day, Twitch is a platform which need to make money, especially with its recent acquisition by Amazon. We knew our ideas had to account for how they would impact revenue, which meant understanding the nuances of its advertising ecosystem and its stakeholders. We also reached out to a Sr. UX Designer at Twitch who focused on monetization for critique throughout the project.
The ideas that didn’t make it.
At the beginning of our project we did a lot of exercises to explore high-level concepts. There’s a saying that “your best idea is either your 1st or your 100th, and you won’t know until you come up with your 100th.”
We took some of these ideas and fleshed them out a bit further before we settled on designing the passive watching experience for the always-on player. Below are some of those explorations.
1. Meet Ups
Meetups is a section on Twitch that allows streamers to create events on the platform to facilitate in-person events with their fans.
2. Indicators
Indicators are a way to make streams more understandable before you click into them. We explored two ways of doing this, one using machine intelligence, and another that relied on community-generated tags. Each provided an infrastructure of data that allowed for unique applications throughout the platform
3. Twitch Cam
This was our more blue-sky idea which focused on how Twitch could partner up with Amazon Lab126 to create a physical camera that could be clipped to your computer or taken off, and would allow for numerous applications like seamless setup, more “IRL” streams, and group-syncing of Twitch Cams. We also explored how this could work through your existing mobile phone.
Feedback from a Sr. UX Designer @ Twitch
We wanted to really put our ideas through some rigor, not only from a user perspective, but also from a business perspective. During our project we regularly got critique from Adam, a SR. UX Designer at Twitch focussed on monetization. He helped us understand Twitch’s strategic goals and challenged us to make more real world considerations.
After considering Adam’s feedback we realized we needed to investigate how and when people are watching streams. We looked to Twitch communities on Facebook to get some feedback, and through our research it helped us get a better understanding of how viewers were watching in different contexts than we expected.
Mapping out the flow and answering questions
Early on we decided to map out potential flows for this feature, and in doing so we uncovered both questions around the UX and opportunities for the feature. We used rapid sketching as a way to get our ideas our and worked together to make decisions.
Early user testing to work through roadblocks
As we went through and fleshed out parts of the flow, we came across questions where we had differing assumptions. We’d encountered a situation like this in a project we’d worked on before, and had learned that in times like these, a quick and dirty user test helped provide an additional perspective that could move things forward.
We spent 10 minutes making a quick mockup in illustrator and made a simple click-through prototype in InVision. We then set out to show it to some people nearby.
We made some mistakes
While testing with users at this stage helped identify some initial feelings around the interface, we ended up learning some more interesting lessons around our process.
First of all, you need to be careful with how “quick and dirty” your prototype really is. While it was fine that the prototype was not completely interactive, we had designed it so quickly that not enough clarity was given around basic hierarchy of elements, which made things confusing for the people we tested with, and served as a distraction from the overall experiment.
We also learned to try as much as possible to not test with designers. While critique sessions are great, we often found that a designer’s natural inclination is to inject their larger opinions around design into their responses, rather than giving their gut reactions to things. While it’s easy as a designer to find people around you (other designers) to test with, it really makes a difference to make the effort to test with the type of people who are likely to use your product, even if it means simply approaching people in a different department at your workplace.
Diving into Prototyping with Framer.js
We decided to dive into learning Framer to prototype our feature. With little previous experience, we ended up learning a ton about programming with coffeescript, and actually made revisions to our design as we played around with it and understand how interactions felt.
You can play with our prototype here.
These are some of our takeaways from diving into Framer:
How Do We Advertise To The Passive Viewer?
Twitch viewers are tech savvy and we found a lot of articles online of them complaining about disruptive techniques advertisers have used on the platform. In response, streamers have took the approach of being very honest and direct with their fans, letting them know when they will play an advertisement, and asking them to watch as a way to support.
So our approach with the passive viewer is not to try and disrupt them over the other app they are using at that moment, instead it is to provide simple and direct call to actions that they can choose to interact with, similar to the existing ways they interact with the player. We also considered how ad placement can respond to what they are doing in the other apps they are multitasking with.
Finally, we think that strategically the always-on player will increase overall watch time for the platform as a whole, which will make for a greater viewership for advertisers.
Below are two possible approaches to the UX of ads on the always-on player.
What does this mean for the future of live streaming?
The idea of a pop-out player is nothing new. However, taking care to design a thought-through experience for the passive viewer, we believe, is an important consideration that we currently don’t see in existing products. Passive viewing is a very real behaviour that is increasing in the digital space with the influx of live streaming.
This project was our attempt to address this in 4 weeks, but as this relatively new viewing habit increases, so will the decisions that will need to be made around the interface.
Hopefully some of the ideas presented can serve as inspiration for other platforms such as Instagram, Facebook, Youtube, or any others that wish to enter the live streaming space.
