I Redesigned Twitch's UI
UI/UX
Figma
Web Design
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!
The Item Cards
Stream Page: Old VS. New
This is page I spend most of my time on when on Twitch. This page has a lot of information that can't really be compartmentalized and paired down, so instead it's a matter of spacing and organizing.
I detached the sections from each other so the info could have more space to shine on their own. This does slightly reduce the video feed size, but I am not concerned with that as it is the smallest view already. The left sidebar can be collapsed, there is theatre mode which fills the screen with just the stream and chat, and of course full screen.
Those modes cut down the visual clutter by their nature, so my main concern was organizing the most info-dense view of this page.
Simplifying the Menu
I added in 'Store' as one of the main navigation because it should be easy to access a storefront instead of hiding it on the righthand side?
There is this big messy dropdown menu that isn't used for main navigation at all. It serves no purpose there, so I moved it to the far right — perfectly accessible, but out of the way of the essential navigation elements
Better Alignment
Organized & Aligned
Twitch makes a lot of $$$, so it makes no sense to me how it has left this section so mis-aligned and a combo of boxes, text and icons. I unified all the elements here and got them aligned properly.
Dark & Light Mode
Twitch has a dark and light mode, but the light mode is so glaringly bright that I only ever use it in dark mode! The new light mode thoughtfully introduces a palette of light grays to tone down the sharp brightness whilst staying light. Having each section float on a slightly darker gray background gives each section more space and adds some contrast.
Let's work together!
Inspired by this project to work together? I'm a Top 5% Creative on Contra and would love to help you bring your idea to life!