Twitch Whispers Redesign
Refining Whispers message user interactions
Summary
Being an avid user and moderator on Twitch, Whispers is a great way to engage with the community by sharing your thoughts and clips from your favourite streamers. During my time using Whispers, it became apparent how some messaging features were missing and in need of a redesign. The purpose of this project is to improve the experience of direct messaging.
Assessment of Pain Points from Twitch Whispers Current State
The Challenge
The current interface can be challenging for users to navigate, such as the sent messages feeling squished together with an unclear hierarchy in the settings pop-up. The inactive message input is a grey rectangle with no placeholder text to indicate the current state. The message bar expands horizontally for longer messages, causing users to use the arrow keys to review their text. Outlined are three main pain points I wanted to address: the message bar, settings, and the appearance of the sent messages.
Micro-interactions
Prototype
Low-Fidelity Prototype
The initial redesign ideation began with including message bubbles to visually distinguish individual messages as opposed to the existing Twitch Whispers design with plain text all left justified for each message. Introducing message bubbles into the re-design came with the issue of leaning too far away from Twitch's existing graphic styles, by Revision 04 the re-design had returned to working with the existing Whispers layout. At this point, the redesign focused on including two options: the message bubble view and a refined classic view.
Classic View
Message Bubble View
Results & Takeaway
The takeaway from this project was staying aligned with Twitch's existing graphic styles while introducing revamped elements to the Whispers. Reflecting on what could be further developed in this project includes integrating a "search bar" for the messages and exploring how the emote pop-up window appears.
Also further exploration on whether two layout options are viable or if one option can solely exist instead. This Twitch Whispers redesign will allow users to read messages more distinctly and interact with the message bar with clearer visual hierarchies.
Image Sources
Results & Takeaway
The takeaway from this project was staying aligned with Twitch's existing graphic styles while introducing revamped elements to the Whispers. Reflecting on what could be further developed in this project includes integrating a "search bar" for the messages and exploring how the emote pop-up window appears.
Also further exploration on whether two layout options are viable or if one option can solely exist instead. This Twitch Whispers redesign will allow users to read messages more distinctly and interact with the message bar with clearer visual hierarchies.
Image Sources
Summary
Being an avid user and moderator on Twitch, Whispers is a great way to engage with the community by sharing your thoughts and clips from your favourite streamers. During my time using Whispers, it became apparent how some messaging features were missing and in need of a redesign. The purpose of this project is to improve the experience of direct messaging.
The Challenge
The current interface can be challenging for users to navigate, such as the sent messages feeling squished together with an unclear hierarchy in the settings pop-up. The inactive message input is a grey rectangle with no placeholder text to indicate the current state. The message bar expands horizontally for longer messages, causing users to use the arrow keys to review their text. Outlined are three main pain points I wanted to address: the message bar, settings, and the appearance of the sent messages.
Message Bubble View
Classic View
Micro-interactions
Assessment of Pain Points from Twitch Whispers Current State
High-Fidelity Prototype
Two different designs were created for users to have the option to view the new message bubble view or the refined classic view. The message bubble view was developed to resolve to make each sent message easier to read. As for the classic view, the layout allotted more space between sent messages and added corresponding timestamps.
The message bar includes a text input indicator and expands vertically for longer messages. The alterations to the settings pop-up included toggle switches for the notification and timestamp options along with creating a visual hierarchy for each option. Overall, the changes made will allow users to access features and make reading Whispers more manageable
Dark Mode Graphic Style
Light Mode Graphic Style
Dark Mode Graphic Style
Light Mode Graphic Style
Dark Mode Graphic Style
Light Mode Graphic Style
Low-Fidelity Prototype
The initial re-design ideation began with including message bubbles to visually distinguish individual messages as opposed to the existing Twitch Whispers design with plain text all left justified for each message. Introducing message bubbles into the re-design came with the issue of leaning too far away from Twitch's existing graphic styles, by Revision 04 the re-design had returned to working with the existing Whispers layout. At this point, the re-design focused on including two options: the message bubble view and a refined classic view.
High-Fidelity Prototype
Two different designs were created for users to have the option to view the new message bubble view or the refined classic view. The message bubble view was developed to resolve to make each sent message easier to read. As for the classic view, the layout allotted more space between sent messages and added corresponding timestamps.
The message bar includes a text input indicator and expands vertically for longer messages. The alterations to the settings pop-up included toggle switches for the notification and timestamp options along with creating a visual hierarchy for each option. Overall, the changes made will allow users to access features and make reading Whispers more manageable
Message Bubble View
Classic View
