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.
Highlight reel of some of our major updates to the app. The overall success of this redesign helped shape the structure of Twitch's mobile products from its initial launch to its present day successor.
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.
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.
Some wins from our redesign.
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.
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.
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.
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).
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.
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.
Icon styling per theme.
Examples of some of the symbols created in the kit.
The success of the mobile app's redesign and hard work from our team was recognized in 2017 upon the initial release of the app.
