UI/UX Case Study — Twitch Application Redesign

Overview

Twitch is a video live streaming service that focuses on video game live streaming, including broadcast of e-sports competitions and is based in San Francisco USA. In addition, Twitch offers music broadcasts, creative content, and many more in real life streams. Twitch was launched in June 6, 2011 and it grows each year and of course Twitch has survived from other competitors that also have the same services, but ever since Twitch has spread the wings into other regions and unfortunately it became an issue in each region not just the newly added features but also the new look of design interface.

Therefore, I have decided to choose this as my case study project. This project aims to solve usability problems and improve the design user interface on the application and to provide a great and better experience for users.

Role : UI/UX Designer.

Scope : User Research, User Flow, Information Architecture, Wireframing (Lo-Fi), Mock-up (Hi-Fi), Design System, Prototyping, and Usability Testing.

Timeline : 3 Weeks.

Tools : Figma, Zoom and Blender.

Design Process

The design process carried out in this research is using design thinking methodology.

Design Thinking Methodology

Empathise

In this stage, I will do the main things such as: Observation, Research Planning and Conducting Research.

Observation
Before planning and conducting the research into the participants, Since I’m also a user of the Twitch app I decided to try and regain the app by experiencing the app step by step and each page on the website. Meanwhile trying using the app I also make some notes about the app that could potentially be a problem when using Twitch App.

Current Twitch App

Research Planning

Background

Based on reviews on the internet including the App Store I have found the similarity problem that also faced the user while trying to use the app. *lanjut explain the reason and problem*

Objectives

1. Understanding and validating user behavior when using Twitch App.
2. Understanding and validating the needs of users when using Twitch App.
3. Understanding the goals and pain points of the user when using Twitch App.
4. Identify the user priority when using Twitch App.

Methodology

Qualitative IDI (In-Depth Interview)

Platform

Twitch Website

Sample Specification

Twitch App User — Worldwide — 18 to 55 years old — Man & Woman — New Users & Old Users — 9 Participants (5 of New Users & 4 of Old Users)

Key Information Areas

1. Log In — Games genre
2. UI Design of Home Page, Live streams, Chat Bar.

Conducting Research

Introduction :
Hi, first of all thank you for your time and energy to attend this meeting.

My name is Vincentius Trudy, and currently doing a research from the Twitch application.

In this session I will give you some questions that you need to fill every question but all these questions have no right or wrong answer. The answer is based on what you experience using the Twitch app.

Every detail of answers and discussion is confidential, so feel free to share and speak out what’s on your head about experiencing the Twitch app.

User Profile :
Please introduce your name, age, where you are from, and what you do for a living, etc.

User Behaviour to the Twitch app :

1. How are you experiencing the Twitch App?
2. How do you feel when using the Twitch App?
3. How long have you been a user on Twitch App?
4. What are your goals by using Twitch?
5. What would you like to change on Twitch?
6. What is your impression when you use the Twitch App?
7. What do you like the most from Twitch App?
8. If there is something you would like to add on the app, what would that be?

Usability Testing Of The Current Twitch Application

In this stage, I will explain and tell the situation while doing the research. In this case I actually have 12 participants but in the middle of convo 3 of them are not able to join for some reasons and good thing I can still keep 9 participants on this research. The usability testing on the current Twitch app is to find what or which part of the problem that usually users are facing while using the app and to find out how user’s can be successful on their task using the current Twitch app. The research process is carried out remotely by using a zoom app.

Testing Result

In this test, I recorded the user’s while doing the task on using the Twitch app.In this procedure is not all the same time but in personal recording and interview. The result of these tests is that they are successful on each task but they also give some notes while doing the tasks such as :

What they said

Define

After empathising with the problem of the user, in this stage will define the problem I’ve received based on what is going on with the users/participants while experiencing the app.

User Personas

In this step I’m creating a user’s persona to describe the user based on what they have faced on the Twitch app. The user personas that I create are almost the same but I decided to make some personas for the reason these 3 are common while doing the task.

Customer Journey Map

New Users

Old Users

Problem
1. Server connection.
2. Shortcut switch account
3. UI Design.
4. Finding the history.
5. Audience engagement.
6. Contain violence and nudity.

Prioritisation Matrix

Ideate

At this stage of ideate will contain User Flow, Information Architecture, Wireframe (Low Fidelity), Mock-ups (High Fidelity), Design System (Assets).

User Flow

I created the user flow to describe the steps of what the user is going through to use the features that need more attention and improvement.

Information Architecture

Information architecture is created for documentation of all the flow, design requirements, contents, and other components that will be implemented into the wireframe.

Wireframe

I created the Low Fidelity wireframe manually using pencil and paper, based on the information architecture that I’ve created previously.

Low Fidelity

Mock-up

At this stage I will create the High Fidelity based on the wireframe that I have created previously.

High Fidelity

Design System

In here I have used all the assets that I created for the purposes in use to the design of Twitch app.

Design System

Prototype

In this section, I will not explain anything about the prototype and how it really works but on the below I have attached the link that you can access to give it a try using the prototype’s app.

Twitch Prototype

Disclaimer : I have completed the new design of Twitch app but not all buttons will be functioning, only the purpose of this project can be clickable. Please take a seat while experiencing the new Twitch app design.

Test

The new design was tested by using a zoom app as a tool to measure and see how participants can get through the tasks. This test requires all participants to share the screen while doing the task until they finish and reach the end.

Task 1.

Task : Create an account.

Scenario : Imagine you want to make an account for underage person’s.

All users managed to complete the task easily without any problem. The option to fill the age and genre preferences on the design makes them easily decide what they preferred to watch. Especially on the genre page they are actually impressed by how they can manage what’s right for them as well as streamers or viewers.

Task 2.

Task : Watch the live streams.

Scenario : Imagine if you have children and they actually love to watch people’s play video games without worrying about the content.

New users and old users can manage the task that has been given. The design for people underage can still use the app and have fun with the streamer because they have chosen the genre they prefer to watch. Meanwhile, the app is designed for the streamer and can also take down the person and the chat as well if there is any sign of negativity on their content.

Task 3.

Task : Encourage viewers to get involved on live streams.

Scenario : Imagine you want to encourage viewers to get involved in your live stream content.

Both users are passed the task. The designs are made to encourage viewers to take a chance approaching the streamer by helping the streamers decide their options. After viewers click the content to watch, they will find the polling bar below the streamer’s screen. The feeling when they have the experience of trying to approach the streamers by getting involved can also give them a chance to give their ideas through the polls.

Recommendation/Feedback

1. There’s to be and improvements on the design. The previous design has the animation on each content and icon, it actually moves when using the cursor to point the object in every page of content.
2. Navigation bars are so helpful, the new design is useful compared to the current app design. The design language or micro-copy of the content are quite important for users to understand instead of trying to get the meaning by themselves of each content and icons. This section also needs to be consistent with the icon and the motion.
3. The pages of “Sign In” and “Create an account” should be more consistent on each page. It is actually good but not completely or fully animations and images.

Conclusion

Overall users are way more enjoy with the design I’ve created and also with some feedback that can be improved. They are expecting more details on each object that can make them easily understand, and also the new design is not much different compared to the current app design but overall they have a new experience on the new design. Furthermore, users feel that Twitch has to minimise the motion content to reduce the lagging on the app by using pictures or images into the design that are quite helpful to access or use the app.