Twitch Mobile App

Mobile App Redesign

Visit Site

Twitch Mobile App Redesign

With it’s continual increase in product features and outdated UI paradigms, Twitch's app was overdue for a change. In collaboration with our mobile team, I worked on our information architecture and solving UI/UX problems that are associated with a social video platform. The result was a redesigned app that improved numbers in key metrics and seamlessly integrated new features for our users.

  • • Information Architecture
  • • UI Design
  • • UX Design
  • • Visual Design

A video highlighting the redesign of the app.

Approach

I worked very closely with Product, Engineering and key stakeholders to create the newly designed Twitch iOS/Android app. Starting by auditing our information architecture to particularly cater to our mobile platform, I was able to quickly sketch our new vision of the app.

Process

My sketchbook is the first place turn to when I need to quickly iterate my thoughts or solutions. Drawing on the whiteboard allowed me to iterate multiple ideas and collaborate with the design team on proposed decisions. I produced high-fidelity mocks using Sketch and Invision. Exporting artboards to Zeplin ensured style guidance for engineers.

Useless chicken scratch to some, but invaluable to the process :)

Final Outcome

Some wins from our redesign.

3 tab Nav

One of major changes we made in the app was moving Twitch to a 3 tab bottom nav rather than a crowded hamburger nav. The user is now defaulted to the Live tab first which is what they care about most- their followed broadcasters and friends. Pulse allowed a customized recommended timeline of content to check what the user might have missed or what they might be interested in. Browse allows the user to discover content on Twitch. Bucketing the app into these 3 tabs increased click through rates, minutes watched, ad impression metrics, as well as improved user flow to content.

Live, Pulse, and Browse tabs. Moving to a 3 tab nav system improved wayfinding on the app.

Player Page

The player page underwent the largest transformation compared to its predecessor. The streamlined and functional design is a product of auditing our information architecture and taking a mobile-first approach to its design. This solved the previous problem of having a player page that was bloated with buttons and overcrowded UI. The introduction of “swipe surfing” to other videos, helped users quickly switch between broadcasts without a complicated UI. Of course, swiping between broadcasts was a huge contributor to the increase of minutes watched in the app.

Player page and tapped video controls.

Swiping between live channels was a new feature that increased the amount of videos consumed, minutes users watched, and social engagement.

Pulling down a video reveals a playlist while a minimized player lets you browse the app without missing any parts of a stream.

Feature rich chat is now full screen and cheering and emote selection has been added.

Player Page Landscape

For the first time in Twitch history, landscape chat is available on the phone. Twitch mobile users largely watch all their video on landscape so this new UI allowed users to engage in chat, using emotes, and cheering (spending money on custom messages).

80% of our videos are viewed in landscape so adding in chat were popular amongst users and solved the frustration of switching between portrait and landscape to chat.

Dark Mode

A highly requested feature from Twitch users was a Dark Mode for the app. Our data science team proved that a large number of our users watch video in the evening or at night and the previous version only allowed a harsh “light mode” which drained battery life and was uncomfortable to a users eyes. Dark mode ultimately solved this problem and was created through careful branding and accessibility testing.

Dark mode allowed users to watch content at night more comfortably and was our #1 requested feature.

UI Kit

In collaboration with my teammates, I contributed to the overall UI System for our mobile app. Creating core components and usable patterns was crucial in setting guidelines for other design teams and proved to be valuable. The master file was made in Sketch and is available to all design teams in the company.

Intro on how to use the UI Kit.

Icon styling per theme.

Examples of some of the symbols created in the kit.

More Work

CNET

iPhone App

CNET

iPad App

CNET Video

Website, Smart TV App