*This redesign is a personal project for the CareerFoundry course and not commissioned or implemented by Twitch
*This redesign is a personal project for the CareerFoundry course and not commissioned or implemented by Twitch
Livestreaming has become a popular form of entertainment and Twitch, currently, is the most well-known platform. Twitch plays host to millions of users, viewers and streamers alike, that come together to create amazing moments.
The existing design fails to shine a spotlight on the most important part: streams
The existing design fails to shine a spotlight on the most important part: streams
The existing design fails to shine a spotlight on the most important part: streams
Despite the numerous streams one can pop into, it can be overwhelming for users to find streams of their favorite streamers or discover a completely new stream. Twitch’s current mobile experience doesn’t make it easy and potentially pushes away a part of the user base who predominantly watch from mobile devices.
Although Twitch’s current branding exudes fun and excitement, those feelings don't translate through its design. It’s not very welcoming even from the starting dashboard that all users are greeted with. It’s also visually plain and does nothing to really the streamers or viewers.
Keeping users at the center
Keeping users at the center
At the end of the day, I am designing for real people. I created user stories that resonate with common user needs. It allowed me to focus on designing the most important features.
Focus on a more accessible, user-focused design that allowed users the freedom to curate their own experience.
Create a more visually friendly, eye-catching design that pulls in new and old users to streams.
I started laying down the blueprints
I started laying down the blueprints
I started laying down the blueprints
Wireframing + Low-Fidelity Prototyping
Wireframing + Low-Fidelity Prototyping
With paper and pen, I quickly created a rough vision of what the new design could be. Rough paper wireframes transformed into low-fidelity prototypes.
Curating the mood and tone of the redesign
Curating the mood and tone of the redesign
Curating the mood and tone of the redesign
Moodboards can be a great way to capture the feel and colors I wanted to take with this redesign. I compiled a variety of inspirations and generated quite a few moodboards to see if I could truly find one that represented Twitch.
Colors that evoke the fun, and playful side of Twitch. Bright and multicolored, it represents the many facets and faces of the millions of users it hosts.
A hint of nostalgia for childhood games and retro arcade cabinets. A warm callback and homage to one of the largest and most popular communities on Twitch.
A familiar feel with a twist
A familiar feel with a twist
At the end of the day, Twitch's iconic purple is unforgettable and the core of what makes Twitch look like Twitch! I stuck with a darker color palette that complimented Twitch’s sleek, high tech experience. However, this particular mood board allowed Twitch’s mobile UI to expand beyond the dark black and purple. Taking inspiration from cyberpunk and city pop aesthetics, I added bright accent colors and bold fonts to really highlight Twitch’s vibrant and energetic personality.
Constructing the style guide
Constructing the style guide
Constructing the style guide
Twitch’s iconic purple is here to stay, but I wanted to support it with colors that allow it to truly shine. Pairing it with dark purples and an ice white, Twitch’s purple can really standout against the stream content crowd.
I added some additional fun accent colors to add to the whimsical and fun nature that Twitch carries. Think of it as a colorful surprise for the users.
Roobert has been Twitch’s voice and it will be used for the majority of texts ranging from minor headers, stream titles, and body text.
Mangueria provides a fun twist and its curves compliment Roobert. It will be used for big headers to highlight sections and pages.
Icons and symbols are how users find their way and identify landmarks. I wanted to keep things simple, familiar, and when the occasion calls for it, fun!
Smoothing out the rough edges
Smoothing out the rough edges
Smoothing out the rough edges
Gradually, through various cycles of feedback and tuning, I turned grey and white rectangles into a rendered, high fidelity prototype.
Check out the protoype on Figma!
Check out the protoype on Figma!
Redesigning an app can be a daunting task. Ideally, the goal is to update and upgrade the interface and user experience. However, we don't want to accidentally alienate old users by designing an app they no longer recognize.
With this experience, the biggest challenge was marrying all the iconic and wonderful qualities of the old design with needed improvements and changes.
As with any project, there is and will always be more work to be done. I would love to explore further ways to make this design more accessible for different kinds of users and find solutions to streamline each screen even more.
From a UI/UX design standpoint, redesigning Twitch, an app I also use and love, was an eye-opening experience. I had to iterate and review my design with purpose and intent so that I could create an experience that will benefit any and all users. Looking back, I see that I have turned a familiar place into an even more welcoming home.
