Twitch
Twitch
vertical mobile view stream
vertical mobile view stream
UI/UX design | Personal project
UI/UX design | Personal project
Roles & Responsibilities
Roles & Responsibilities
I completed this case study quickly due to time constraints. I did all aspects of the project, including research, analysis, and prototyping
I completed this case study quickly due to time constraints. I did all aspects of the project, including research, analysis, and prototyping
Timeline
Timeline
4 weeks
July - August
4 weeks
July - August
Tools Used
Tools Used
Figma
Figma
About the Product
About the Product
Twitch is a leading live streaming platform where creators broadcast gaming, creative content, and more, engaging audiences through real-time interaction and community building
Twitch is a leading live streaming platform where creators broadcast gaming, creative content, and more, engaging audiences through real-time interaction and community building
How might we make a vertical mobile stream view on Twitch to address challenges users face with horizontal viewing?
How might we make a vertical mobile stream view on Twitch to address challenges users face with horizontal viewing?
The Problem
The Problem
Many streaming features have already started with a vertical mobile view stream, but only Twitch does not yet have a vertical view. Beside Users face several challenges with horizontal viewing, including limited screen space, difficulty navigating while watching, and the inconvenience of holding devices horizontally.
Many streaming features have already started with a vertical mobile view stream, but only Twitch does not yet have a vertical view. Beside Users face several challenges with horizontal viewing, including limited screen space, difficulty navigating while watching, and the inconvenience of holding devices horizontally.
The Challenge
The Challenge
Twitch already has a vertical view feature on the Feed for live streams. However, it's still quite difficult for users to interact and comment in the vertical position because every time they click on the live section, the display is still in horizontal format.
With the challenges I'm currently facing, I seek validation by reaching out to 5 individuals using Google Form in qualitative research to ask about:
• What's the main challenge in staying focused on your goals?
• Why is it hard to reach your goals?
• How do you stay focused on your goals?
Why am I solving this?
Why am I solving this?
Improve user engagement and satisfaction by addressing common pain points
Improve user engagement and satisfaction by addressing common pain points
Improve user engagement and satisfaction by addressing common pain points
Cater to the growing number of mobile device users with a more intuitive design.
Cater to the growing number of mobile device users with a more intuitive design.
Cater to the growing number of mobile device users with a more intuitive design.
Ensure accessibility for all users, enhancing inclusivity and broadening the user base.
Ensure accessibility for all users, enhancing inclusivity and broadening the user base.
Ensure accessibility for all users, enhancing inclusivity and broadening the user base.
The assumptions
The assumptions
Users find horizontal viewing on mobile devices uncomfortable and cumbersome.
Users find horizontal viewing on mobile devices uncomfortable and cumbersome.
Users find horizontal viewing on mobile devices uncomfortable and cumbersome.
A vertical design will better utilize screen space, making navigation easier.
A vertical design will better utilize screen space, making navigation easier.
A vertical design will better utilize screen space, making navigation easier.
Users with motor impairments will benefit from a design that supports one-handed use.
Users with motor impairments will benefit from a design that supports one-handed use.
Users with motor impairments will benefit from a design that supports one-handed use.
Competitive analysis
Competitive analysis
I analyzed youtube that conform to vertical streaming standards which is Livestream and Video on Demand (VOD)
I analyzed youtube that conform to vertical streaming standards which is Livestream and Video on Demand (VOD)
I analyzed youtube that conform to vertical streaming standards which is Livestream and Video on Demand (VOD)
In the Shorts section on YouTube, users can find some people streaming in vertical view with a different UI. It doesn't automatically allow you to interact with the chat; users need to click 'Watch Live' first. Only then will they be redirected to the stream
In the Shorts section on YouTube, users can find some people streaming in vertical view with a different UI. It doesn't automatically allow you to interact with the chat; users need to click 'Watch Live' first. Only then will they be redirected to the stream
In the Shorts section on YouTube, users can find some people streaming in vertical view with a different UI. It doesn't automatically allow you to interact with the chat; users need to click 'Watch Live' first. Only then will they be redirected to the stream
This is where the display is in VOD (Video on Demand) format, where viewers can watch the past stream.
This is where the display is in VOD (Video on Demand) format, where viewers can watch the past stream.
This is where the display is in VOD (Video on Demand) format, where viewers can watch the past stream.
Design sample
Design sample
I developed several design options, including two variations specifically for vertical streaming
I developed several design options, including two variations specifically for vertical streaming
I developed several design options, including two variations specifically for vertical streaming
Variation #1
Vertical streams are available in the Home section and immediately interact with the chat
Variation #1
Vertical streams are available in the Home section and immediately interact with the chat
Variation #1
Vertical streams are available in the Home section and immediately interact with the chat
I made some different chat box design
I made some different chat box design
I made some different chat box design
Variation #2
Vertical streams are available in the Home section; click 'Watch Live' to view and interact via chat
Variation #2
Vertical streams are available in the Home section; click 'Watch Live' to view and interact via chat
Variation #2
Vertical streams are available in the Home section; click 'Watch Live' to view and interact via chat
Home section
Home section
Home section
Redirected to the stream
Redirected to the stream
Redirected to the stream
From observing both models, I can conclude that the first one is not effective because it may also avoid spam or trolls who can easily spam if they see the chat directly on the Home section. Therefore, it would be better to have a dedicated interface to access the stream, where users can interact with the chat.
From observing both models, I can conclude that the first one is not effective because it may also avoid spam or trolls who can easily spam if they see the chat directly on the Home section. Therefore, it would be better to have a dedicated interface to access the stream, where users can interact with the chat.
From observing both models, I can conclude that the first one is not effective because it may also avoid spam or trolls who can easily spam if they see the chat directly on the Home section. Therefore, it would be better to have a dedicated interface to access the stream, where users can interact with the chat.
Design choices
Design choices
Compared to all the other buttons, this section's button is actually more visible with 'Watch Live' button
Compared to all the other buttons, this section's button is actually more visible with 'Watch Live' button
Compared to all the other buttons, this section's button is actually more visible with 'Watch Live' button
Additionally, with the inclusion of a follow button, users can easily follow the streamer without having to open the stream directly
Additionally, with the inclusion of a follow button, users can easily follow the streamer without having to open the stream directly
Additionally, with the inclusion of a follow button, users can easily follow the streamer without having to open the stream directly
VOD design
VOD design
VOD design
In terms of design changes for Video on Demand, there were no significant alterations, except for the format, which was adjusted to a vertical layout
In terms of design changes for Video on Demand, there were no significant alterations, except for the format, which was adjusted to a vertical layout
In terms of design changes for Video on Demand, there were no significant alterations, except for the format, which was adjusted to a vertical layout
Lesson learned
Lesson learned
What did I learn:
What I've learned is that streaming apps must evolve and improve continuously to stay competitive and adapt to tech trends. That’s why I’m designing a vertical view for Twitch to keep it relevant and meet user needs
What could have been improved?
In terms of design, I need to do more exploration to create a user-friendly and easy-to-use interface. Since I didn’t conduct user testing due to time constraints, I’m aware that my design may still need improvements.
What could be better?
I need to practice more, especially in UI design, as my experience level is not yet sufficient to enhance my UI design skills
What did I learn:
What I've learned is that streaming apps must evolve and improve continuously to stay competitive and adapt to tech trends. That’s why I’m designing a vertical view for Twitch to keep it relevant and meet user needs
What could have been improved?
In terms of design, I need to do more exploration to create a user-friendly and easy-to-use interface. Since I didn’t conduct user testing due to time constraints, I’m aware that my design may still need improvements.
What could be better?
I need to practice more, especially in UI design, as my experience level is not yet sufficient to enhance my UI design skills
Addressing the Lack of Formal Validation
Addressing the Lack of Formal Validation
Limitations and Future Work:
While this case study is based on informed assumptions, further research and validation are necessary to confirm these findings. Future work should include
User Research: Conducting surveys and interviews to gather direct feedback from users.
Data Analysis: Analyzing user behavior data to validate assumptions about viewing challenges.
Usability Testing: Testing prototypes with real users to ensure the proposed design solutions effectively address the identified problems.
Limitations and Future Work:
While this case study is based on informed assumptions, further research and validation are necessary to confirm these findings. Future work should include
User Research: Conducting surveys and interviews to gather direct feedback from users.
Data Analysis: Analyzing user behavior data to validate assumptions about viewing challenges.
Usability Testing: Testing prototypes with real users to ensure the proposed design solutions effectively address the identified problems.
