UI Revamp : Twitch UI Revamp on Figma
In this case study, I am going to guide you through the insights on the design decisions I made while I was revamping the User Interface of Twitch Mobile Application.
Disclaimer
This is a personal project. I was not commissioned by Twitch to redesign their app.
What is Twitch?
Before I commence with my guide, I would like to quickly elucidate about this service. Twitch is the world’s leading live streaming platform for gamers, musicians, designers and a lot more. It has come up with an amazing idea of watching and interacting simultaneously with millions of other fans from around the world.
Along with this, this platform also allows gamers to have the opportunity to start earning as well.
It’s a very simple concept.
Overview
I came across this service at the starting of this year. I found their brand guidelines to be pretty remarkable where they explain their brand’s assets. They started off as a web service but eventually, cultivated later on to produce an application as well.
To follow up with my curiosity to know about this brand more, I recently downloaded their application and, was somewhat not dazzled with the onboarding user experience. I found that there could be something missing in terms of the current existing trends and designs.
Also, this is my first project on Figma.
How we go about it
To start up, I have put my opinions by discussing the problems and mentioning what is exactly the main issue here, and what is actually missing from the experience or the interface point of view.
The Current User Interface
Even though it’s an area with fewer problems to discuss about here, I would still like to make a few changes. I do feel that there are some major things that I felt were missing in their current user interface.
First, as soon as you reach the Sign-Up section, I felt was hampering with the user experience was the lack of shortcuts or a possible direct sign-up page. It’s a form that you’re supposed to fill. That’s the first thing I found is a little unsatisfactory.
Second, it doesn’t ask you about what you like/love or what is the purpose that you’re here for which is at a point where the user would expect the application to already know what they want to watch and suggest something according to their preferences. As soon as you are done with the boarding, you are directed to a dashboard that just shoots you with streams of people you really might not be interested in watching.
This is that one major thing I felt was missing.
Third, there is a not so very appealing recommendation system. It recommends what I might like to watch but unfortunately, it’s not that engaging for the user. I will rather expect a personal section termed as ‘just recommended’ and curated on what I will like to watch instead of just a set of videos scrolling on a carousel.
Also, the currently following section makes me a little unhappy as I would rather expect videos and streams of the people I follow so that I don’t miss out on any of the content.
These are the top 3 problems that I wanted to highlight on.
The New Twitch
I tried addressing all the problems which I encountered.
- The Onboarding
I did put a ‘Login with Steam’ option. Steam is a video game digital distribution service by Valve. It was launched as a stand-alone software client in September 2003, as a way for Valve to provide automatic updates for their games and expanded to include games from third-party publishers.
“We are in the 21st Century, everyone wants their things to happen quick and fast.”
I also provided an option to ‘Sign Up with Google’. Google account is something that everyone has so it was a necessity to add that. Adding on to that, it’s just a 2 click sign up and you’re all set to go.
2. Pick Your Interests
The concept behind picking interests here is optimizing their amazing recommendation system by taking some user data to predict just the right results.
I read about Twitch’s recommendation algorithm which I found to be pretty good.
“To make recommendations to viewers like you, Twitch uses a form of machine learning that lets the machine work out for itself what viewers are interested in. Verrilli’s team points the system toward certain “features” of streams, like how chatty the audience is, and the AI determines how important it is to viewers.”
Well, I believe this interface will certainly provide an interactive experience for the user using it.
3.The Following and The New Discover Mode
The current following section is extremely vague and is not at all interactive. Now, the overall and your most watched are displayed at the top and you can easily access the streamer switching to the ‘Following’ section.
The For You section is a personally curated section that includes top recommendations from what the streamers would like in a particular category that they might like to explore.
4. A New Dashboard
The old dashboard I have shown doesn’t have any metrics or graphs showing relevant information.
I tried here to develop an interactive dashboard that tells you statistics about your total stream views along with the total number of minutes you have streamed. This will certainly help the streamers to know about their overall time spent, their statistics and traction on their channels.
That’s A Wrap
I hope you guys found it useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.
