Cover photo of three laptop mock-ups of Twitch Tweets home screen and gameplay.

TWITCH TWEETS

UI Designer (6 months)
December 2021 - July 2022

CONTEXT

With Twitch gaining popularity as a platform for users to stream content and Twitter being used by streamers to share their thoughts, Twitch Tweets was created as a web-game where users guess which famous Twitch streamer posted each given tweet. As a passion project, we wanted to ensure Twitch Tweets was usable and engaging for Twitch streamers and fans alike.

INITIAL IDEATION

As Twitch Tweet's developer described the gameplay to me, one aspect of the game stood out to me: its simplicity. Matching the interface with the ease of the game, I utilized common selection methods—search bars, drop-down menus, and multiple choice buttons—in my sketches. Twitch Tweets is a game centered around selecting or guessing answers, so using simple buttons and menus would allow the user to easily understand how the game works without written instructions.
Low-fidelity sketches of Twitch Tweets home screen and gameplay.
Low fidelity sketches of home screen and gameplay wireframes.
As I constructed mid-fidelity wireframes in Figma, I compiled pros and cons for each selection method to narrow down the best option for the site. I envisioned how easy each method would be in terms of gameplay through a player's perspective.
Pros and Cons list of utilizing a search bar or multiple choice selection method for Twitch Tweets' gameplay.
After comparing both layouts, I realized search bars and drop-down menus would prove to be tedious and more difficult for users, which could decrease engagement. Therefore, I continued with multiple choice buttons while developing high-fidelity wireframes

VISUAL STYLE

Since Twitch Tweets is based on both Twitch and Twitter, I incorporated the main colors from each platform (purple and blue) in the game’s visual style. Matching the simplicity of the gameplay, I decided on a minimal and sleek look for the game's interface, utilizing rounded corners and sans serif fonts. These elements allowed the game to appear simple and easy for anyone to play.
Branding kit utilized to design Twitch Tweets.
Diagram showing how I utilized colors from the Twitch and old Twitter logo to build Twitch Tweet's color scheme.
Visual style chart and color references from Twitch and Twitter.

REFLECTION

With Twitch Tweets being the first game I have designed for, one of my main take-aways was to always keep the user in mind. Creating mid fidelity wireframes allowed me to always consider how the user would interact with what was displayed onscreen. I learned to keep design elements clean and simple in order to make gameplay easier for users with minimal instruction.
Twitch Tweets Statistics gathered from how users interacted with the site.
As a fully functioning game, Twitch Tweets has managed to reach over 20,000 users. I am thankful to have been able to apply my skills to this project and for gaining more experience in designing user interfaces.
Click the following link to see the finished wireframes:
Twitch Tweets Wireframes
Check out the fully launched game:
Twitch Tweets