The Project

Twitch is a great streaming platform that I am on almost every single day! I love watching different streamers on it and have made many friends through the platform.

While it is functional, it is quite information-dense and a bit overwhelming with everything cheek-to-jowl. I set out to give the main pain points of the platform's interface a much needed facelift–making it more intuitive and friendly to navigate was the goal!

Clearer Hero

On top of adjusting spacing, I added a 'Featured Streams' title at the top since the current site is missing a section title and description for it. Now we know what's happening in the hero section!

Stream Cards

The backbone of Twitch: the stream card. It houses a bunch of essential info that needs to look good as a single card and amongst hundreds, whether on the homepage or in a game directory.

Floating Sections

To improve the UX of the stream page, I separated the main sections and made them float. This allows for some breathing room and keeps the UI from feeling overcrowded in any given area.

The layout and design of the info within these sections is also updated with distinct containers, elevating the prominence of the details that naturally draws the eye in. This makes for a more relaxed, intuitive user experience.

Organizing and Aligning

With Twitch implementing and updating features at various times (and some with new/altered design language), the overall consistency of the UI has fallen out of alignment over the years. That is particularly prevalent here with the stream info section. The rows of info do not match and more importantly are out of alignment with the rest of the UI.

My redesign unifies the section by giving each element the same treatment, making them like stacked bricks. It improves prominence of key info like viewer count and introduces a "clip" button, making it easier for viewers to capture great moments from stream.

This new design is also an improvement because of how adaptable it needs to be because of all the data-bound elements. Viewer count and stream duration consistently update, and the follow & subscribe buttons change depending on your status with the stream.