Twitch: an entirely new way to interact for streamers and viewers (part 2)
A new Twitch mobile app feature that mixes physical activity and entertainment.
Hello, there! This is the second part of the Ironhack project: Twitch A-Train alarm feature. Firstly, let’s do a recap of the things already covered in the previous Medium article:
INTRODUCTION
Previously, on the first part:
The challenge
I have to say I was very hesitant as on which project should I choose! I wanted to do something impactful, but straightforward enough to be effective. I explored different apps I often use, like Instagram, Twitch, or Youtube, as well as others like Facebook (Meta) or Tiktok. While looking at them, a thought crossed my mind. Twitch doesn’t have a tool that many apps and services already include — users cannot track the hours they spend watching content in Twitch. So I decided to work on that!
I divided this Case Study into two parts:
1st part:
UX
- Research
- Iteration
- Health benefits: exercise vs. NEAT
- Last steps before UI
2nd part:
UI
- Streamer POV
- Viewer POV
- Alarm settings
Next Steps
Let’s jump right into Figma!
UI
Organization is key in all my projects. Thus, I had to create and develop the right components, from smaller to bigger ones, so they were functionally interactive within Figma. Remember this feature will only be available for the mobile app. This is divided into the three prototypes that I ideated (streamer point of view, viewer POV and Alarm settings). Here’s what I did for (almost) all master components:
- Creating a mid-fidelity light variant
- Creating a mid-fidelity dark variant
- Creating a high-fidelity light variant
- Creating a high-fidelity dark variant
Streamer POV
As the title states, this is what the streamer will see. From the mobile app, the phone needs to be in landscape mode. The components I created are the following:
- Chat
Remember in the last article I said that my brain is always making up jokes and looking for entertainment? I shall introduce you to my classmates then. As you can imagine, this can make up a nice and fun class presentation.
- Pikachu screen & carrot
I made this as a GIF for the sake of the prototype and to emulate a real-time playing screen.
- “5 minutes left” warning
This warning is helpful and very much needed so both viewers and streamers know when the A-Train is about to pop up. I think 5 minutes is more than enough to prepare for exercise.
- A-Train first level
This consists of a master component with a smart animated variant that ranges from 0% to 100%, filling up a bar as more people join the exercise.
Adding a snooze option here (only for streamers) can be helpful if the streamer is in the middle of a tense situation or if they are focused on something else. Please note this is not included in the prototype version.
Viewer POV
This section defines the viewer's POV. The mobile phone is in portrait mode.
- Chat
The portrait mode prototype includes the small chat component. I integrated this into a bigger component so the animation I will explain below works suitably.
- Screen
Sadly, the portrait mode screen doesn’t show any carrots 😢. I made three components for this screen, which include different assets: a Play button and a Pikachu background image for the first component, a Pause button and the Pikachu GIF for the second one, and a running Pikachu GIF without any buttons for the third one. This helped me integrate the animation I will explain below.
- Profile
The profile information displays tags, the Follow, Notifications, and Subscribe buttons, the profile picture, multiple titles, and top gifters for the stream.
- Play/Pause/Playing screen animation
Twitch shows an animation whenever you click play where the Pause button appears, and part of the profile screen disappears to highlight the chat and the stream screen. This interactive component is divided into three subcomponents — screen, chat, and profile — so the animation occurs with a five-second delay between the last two. It is the exact amount of time this animation lasts in Twitch.
- Sending messages and collecting Channel Points.
These are the last components of the viewer's POV, not including the A-Train feature. There is a text input field, icons for the emotes and Bits options, and a button that allows users to collect Channel Points they can spend on “stream rewards”. The streamer can completely customize these up to make the stream more entertaining. As per “stream rewards,” streamers can include actions such as drinking water, making dips, choosing a stream emote, and many others.
- “5 minutes left” warning
It is fair that if the streamer gets the “5 Minutes Left” warning, viewers should also see it.
- A-Train first level
The same train of thought applies to the A-Train pop-up.
- Prizes: badges & icons
These are the prizes for viewers. The button allows users to share they have taken part in the event. Twitch also features an animation to show how much the notification will last. As in the previous case, the bar will slowly fill up.
Alarm settings
The last prototype is the settings for the A-Train alarm, divided among seven different screens. The components are the following:
- Navigation Bar
Even though I won’t use it for this prototype, I’ve created three components for this navigation bar to show when the “Following,” “Discover,” and “Browse” options are selected.
- Screen Animations
The Twitch animations between screens I replicated are shown below.
- Smart animated buttons
I really enjoyed this part. As I said, I created two screens to set up the A-Train alarm. The idea behind both screens is that you can only choose one of the options. Configuring this was a bit complicated since I had to create lots of screens to show a suitable prototype. The prototype connections for both screens are shown below.
All the minor components and icons made from scratch are shown below.
Finally, the GIFs for all prototype POVs are shown below.
Next steps
Overall, I am very proud of this complex project and the results, considering all the hard work I put into the UX and UI sections. I enjoyed the challenges I faced in both areas, especially for UI. Figma is an exciting tool, and I’d love to explore it thoroughly in future projects.
This feature would be a great addition to Twitch. I believe it is almost ready to be implemented, but I’d like to implement it within the web version of Twitch and try a few more things to improve it.
Also, I’ve been toying with implanting the feature only for exercise streamings. Scoping the feature in that way could also be enjoyable!
This is Vins Rubio; thank you for reading this article. I hope to see you in my next posts. There are many things to come!
