Mobile App |

Mobile App |

UI Redesign

UI Redesign

Redesigning Twitch

Redesigning Twitch

Associated with

Associated with

Ironhack Bootcamp

Ironhack Bootcamp

Jonathan Elalouf

Jonathan Elalouf

Team

Team

Guillaume Normand

Guillaume Normand

Jorge Formoso

Jorge Formoso

Mathilde Leonardo

Year & Duration

Year & Duration

12/2023 - 2 days

12/2023 - 2 days

Sylvain Bretagnolle

Sylvain Bretagnolle

Role

Role

Heuristic analysis, Wireframing,

Heuristic analysis, Wireframing,

Visual Redesign

Wireframing, Visual Redesign

Prototyping

Project Goal

A weekend adventure to redesign Twitch mobile app on Android, driven by a desire to make it more engaging, intuitive, and socially connected.

Problem

A brief analysis of the application (December 2023) uncovered confusion surrounding the navbar and discover page. Additionally, the landscape view layout is occupying excessive space in comparison to the actual stream.

Solution

The new layout takes cues from the desktop version of the app to ensure better consistency, particularly by implementing a left sidebar for easier access to current livestreams. It introduces a new navbar for improved intuitive understanding and a revamped discover system. Additionally, the redesigned landscape view prioritizes the actual stream and emphasizes various call-to-action buttons (such as subscribe and follow), while enhancing accessibility through the introduction of a "custom positioning" feature.

Disclaimer

Disclaimer

I’m French ! Therefore I used screenshots of the French version of the app for comparison below.

Home Page Revamp

Home Page Revamp

Reimagining the Layout

Reimagining the Layout

Our first area of focus was the home page, which, in our opinion, suffered from excessive white space and lacked engaging elements. Drawing inspiration from the desktop version of Twitch, we introduced a sidebar featuring followed live streamers and recommendations. Emphasizing stream cards and making them horizontally scrollable aimed to reduce the infinite vertical scrolling, providing a more dynamic browsing experience. We also felt that the “clips” were given too much space in comparison to the other elements so we imagined they could be part of the different horizontally scrollable categories you might find while scrolling down, after the “finish watching” category.

We also made the “create” button more noticeable, underlining that Twitch is not just about consumption but also about fostering creativity.

Reimagining the Navbar

Our redesign extended to the bottom navigation bar. Recognizing that the “Following” page acted as a de facto home page, we believed it would be clearer to present it that way.

We also decided to merge the “Discover” and “Browse” pages into a unified “Browse” page. This consolidation aimed to reduce confusion and offer a more straightforward content discovery process.

Acknowledging the importance of social connections on Twitch, we made private messages more accessible by integrating them from the top into the bottom navigation bar.

For specific searches, the Search feature on the right would remain the preferred option.

Browse Page Revamp

Browse Page Revamp

As explained hereabove, we decided to merge the “Discover” and “Browse” pages into a unified “Browse” page.

The new “Browse” page features categories and subcategories, facilitating a more intuitive and user-friendly way to explore content. Clicking on a category would reveal relevant subcategories, creating a seamless filtering system (for example below, clicking on « Games » would pop up the various most trending games of the moment and clicking on one of them would then update the content below accordingly). To enhance discoverability and optimize space, we also introduced a tile system for recommended creators.

We opted for buttons from the web version of Twitch for a more engaging and consistent look across platforms. Rounded corners on tiles also softened the aesthetic, making it less aggressive.

Landscape View Overhaul

Landscape View Overhaul

Recognizing the need for a better landscape view, we reimagined the layout to prioritize the viewing experience.

By reducing the space taken up by chat and streamer details, we aimed to enhance immersion.

You might also have noticed the following buttons :

That’s because we introduced a custom positioning feature for users to create their preferred setup, catering to individual preferences and even accommodating left-handed users.

Conclusion

Conclusion

While we acknowledge that thorough testing and user feedback are essential for any redesign, this weekend project allowed us to explore new possibilities and have fun in the process. The proposed changes were driven by a desire to make Twitch more engaging, intuitive, and socially connected.

Thank you for reading !

Looking for more detailed insights about the project ?

Looking for more detailed insights about the project ?

Read it on

Read it on

gui.normand@gmail.com

© 2024 - Guillaume Normand

gui.normand@gmail.com

© 2024 - Guillaume Normand