Redesigning Twitch

Chances are you’ve never heard of Twitch.tv, a live video streaming platform bought by Amazon ($970M) in 2014. I didn't really know much about it myself until a little while ago. Its main focus is on video game content and allowing channels the ability to stream their live experiences to audiences and loyal subscribers (dedicated viewers). It’s a rapidly growing community that has a ton of business potential.

In 2014, Twitch realized some of its biggest milestones by announcing they had over 100 million unique viewers per month, and 16 billion minutes watched per month. Most users spend an average of 3 hours a day watching videos! With all this momentum and upswing where can Twitch really improve going forward? I’d have to say strides could be made in their mobile design.

As their brand grows, so will the devices people view it on. At the moment, mobile device usage on Twitch is closely split between Android (53%) and iOS (47%). With no real overwhelming preferred platform, why did Twitch opt to create nearly identical designs for both?

We understand that it's not always practical, but at DeveloperTown we believe that creating a single mobile experience and plugging it into both Android and iOS platforms is a bad long term investment. Why? Mainly because it means you are “settling” on a design that works for both but is optimized for neither. Android and iOS often have very different user experiences and design practices. On top of that, most mobile users have reached a comfort level with their platform and expect their device to behave in a certain way across applications. For these reasons, I decided to take a stab at refreshing the Twitch experience on iPhone. I tried not to remove any functionality from the app, to avoid compromising the experience for the sake of visual improvement.

Let’s take a quick look at Twitch’s current iOS app:

Twitch brings games front and center to allow users to quickly answer the question, “What do I want to watch right now?” I like this idea and have no qualms with making this the landing view. What I don’t like is how navigation and search are buried in the hamburger slide-out drawer. This approach makes it difficult for users to quickly see if there are any live channels that they follow. It also makes it harder for users to naturally explore new games and channels. The user has to scroll down the drawer to see “Promoted Games” and “Promoted Channels”. Promoted content is nice, but what about channels or games that are naturally trending?

The channel’s profile view is a right hand slide-out (accessible from an information “i” button) that allows users to read basic info on the channel and access it’s chat. However, if you want to access a channel’s previous broadcasts, you have to click a different button that takes you somewhere else. There's a lot of room for design improvement here. Channels and their personalities are the lifeline of Twitch and keep users coming back every day. There should be a central location to access everything about a specific channel.

Lastly, I wanted to clean up the overall design by using up-to-date iOS guidelines, spacious tap-ability for buttons, and small improvements. One of my frustrations with the app was a channel’s chat overlay on the stream. Messages in chat can appear rapidly, and scroll upwards so a user is always reading the most current message. However, Twitch has made the white background of the expanded chat slightly transparent so a user can read the chat AND see the video occurring at the same time. It’s a compromise that hurts the overall experience because each one distracts from the other. You can’t fully appreciate chat because there is a moving stream and you can’t fully see the stream because chat messages are constantly appearing. If a user has consciously decided to “Join chat” by bring up the keyboard, why not make chat the focal point?

With all that out of the way, let’s dive into the redesign. There are over 10 views in total, but I want to highlight some of the more prominent ones below.

I decided to keep the home view all about games. I moved all main navigation to the bottom tab bar, and made search readily accessible at the top of the view. I squared off the games and tightened up gutter space all around. A more subtle difference is the “Went Live…” in-app notification that Twitch has recently rolled out. The notification sits on the view for a few seconds while visually showing how much longer till it disappears.

If a user tapped into search, they would be able to explore new and current channels/games happening in the app. I came up with the idea of having “Trending Channels” to foster the idea of exploring new channels that are rising in popularity and subscribers. There's still a lot of room for exploration and expansion on this view as Twitch grows in popularity.

Search

My favorite view of the redesign is the updated channel profile view. I took inspiration from the new Facebook profile, which I believe is a much cleaner and simplified design. Here a user can access all things related to a channel (all activity, past broadcasts, highlights, info, chat, statistics). You can still reach this view from a channel’s live video stream or search. I added a new statistical category of “Broadcasts” in addition to “Views” and “Following”. I felt it helped solidify information users care about when viewing channels. Total broadcasts helps gauge just how long and dedicated some of the Twitch channels have been to the community.

Channel Profile

The last view I wanted to mention was the expanded stream chat. It now uses an opaque white background to make the chat more readable while hinting at the stream by being visually present at the top. A user could swipe down from the very top to collapse the chat and keyboard (or by tapping the down button).

Chat (expanded)

The all new design! By putting an emphasis on search exploration, dedicated channel profiles, and improved design standards, Twitch could create a much more delightful iOS experience.

If you like what you read or saw, please share around! Feeling inspired? I’ve provided my original Sketch file below for others to jump-start their own Twitch redesign.

Daryn Shapurji, Designer

Subscribe for DeveloperTown news.

  • This field is for validation purposes and should be left unchanged.