Case Study
Case Study
Introduction
Introduction
Twitch: Stream Schedule
Twitch: Stream Schedule
A redesign of the Stream Schedule to resolve the frustrations of users.
A redesign of the Stream Schedule to resolve the frustrations of users.
About the Project
About the Project
I gave myself two weeks simulate a design sprint.
The goal was gain experience redesigning an existing feature instead of adding.
I gave myself two weeks on the project to simulate a design sprint. Training myself to work quicker but, more efficient was also a goal.
The end product was a brand new stream schedule designed to resolve the frustrations I uncovered.
Project Information
Project Information
Client
Client
Twitch (Personal Project)
Twitch (Personal Project)
Team & Role
Team & Role
Solo Product Designer
Solo Product Designer
Timeline
Timeline
March 24' (2 Weeks)
March 24' (2 Weeks)
Before and After (Summary)
Before and After (Summary)
Before
Before
Poor findability.
Poor findability.
Features one channel only.
Features one channel only.
Misaligned mental model of a timetable.
Misaligned mental model of a timetable.
Cluttered with information not related to a stream schedule.
Cluttered with information not related to a stream schedule.
After
After
Reduced time finding the feature from 7-13 seconds to 1-2 seconds.
Reduced time finding the feature from 7-13 seconds to 1-2 seconds.
Includes ALL your Followed Channels and their streams.
Includes ALL your Followed Channels and their streams.
Much easier to interpret with a familiar mental model.
Much easier to interpret with a familiar mental model.
Revised information to reduce cognitive load.
Revised information to reduce cognitive load.
Prompt
Prompt
I don't like checking Twitter or Discord to know when someone is starting a stream!
I don't like checking Twitter or Discord to know when someone is starting a stream!
I thought Twitch's Stream Schedule was lacking…
I thought Twitch's Stream Schedule was lacking…
I seldomly used Twitch's stream schedule because I found it clunky and hard to read. I wanted to see if others have frustrations as well.
I seldomly used Twitch's stream schedule because I found it clunky and hard to read. I wanted to see if others have frustrations as well.
Research
Research
Gathering user feedback to validate the severity of the problem.
Gathering user feedback to validate the severity of the problem.
User Research
User Research
Validating the problem with Twitch's current solution
Validating the problem with Twitch's current solution
I remotely interviewed six people who previously used the stream schedule. Interviewees screenshared to point out specific problems.
I remotely interviewed six people who previously used the stream schedule. Interviewees screenshared to point out specific problems.
Research Goals
Research Goals
How users navigate to the stream schedule.
How users navigate to the stream schedule.
What are the major frustrations when using the schedule.
What are the major frustrations when using the schedule.
Identify the user needs and wants for the schedule.
— Main Discovery —
— Main Discovery —
0% Use the Stream Schedule Anymore
0% Use the Stream Schedule Anymore
Interviewees look for Tweets or Discord notifications.
Compounding frustrations lead to disuse
Compounding frustrations lead to disuse
Interviewees use Twitter and Discord in find when a stream starts. Why? Twitch's stream schedule has too many frustrations to bother using.
Interviewees use Twitter and Discord in find when a stream starts. Why? Twitch's stream schedule has too many frustrations to bother using.
— Current Experience Pain Points —
— Current Experience Pain Points —
We started the session from the homepage to simulate the process holistically. Then, we deep dived into problems upon reaching the schedule page.
We started the session from the homepage to simulate the process holistically. Then, we deep dived into problems upon reaching the schedule page.
Problem 01 - Poor findability and visability
Problem 01 - Poor findability and visability
An Interviewee navigating to Shroud's Stream Schedule.
Poor findability
Poor findability
The feature is on the Channel Page; a tab people don't look for during a livestream.
The feature is on the Channel Page; a tab people don't look for during a livestream.
Very long task flow
Very long task flow
The process requires many clicks. The task takes 7 to 13 seconds, on average.
The process requires many clicks. The task takes 7 to 13 seconds, on average.
Problem 02 - Too Much Processing Required
Problem 02 - Too Much Processing Required
Interviewees state this UI does NOT match a timetable they're familiar with.
Interviewees state this UI does NOT match a timetable they're familiar with.
A misaligned mental model
A misaligned mental model
Users expect timetables to have dates horizontal and events vertical. The misalignment requires additional processing time.
Users expect timetables to have dates horizontal and events vertical. The misalignment requires additional processing time.
The UI requires a lot to process and thinking about
The UI requires a lot to process and thinking about
Inconsistent time headers per week, requiring eye readjustments to process.
Inconsistent time headers per week, requiring eye readjustments to process.
Low visibility of timezone causes users to process if start times are accurate.
Low visibility of timezone causes users to process if start times are accurate.
Unnecessary info such as views and VOD time add time to read and process.
Unnecessary info such as views and VOD time add time to read and process.
Problem 03 - Doesn't fit what a user needs
Problem 03 - Doesn't fit what a user needs
This schedule is ONLY for Shroud; no one else.
This schedule is ONLY for Shroud; no one else.
Doesn't include all Followed Channels
Doesn't include all Followed Channels
Users NEED to see ALL their Followed Channels; Otherwise, they repeat the Task Flow for every channel.
Users NEED to see ALL their Followed Channels; Otherwise, they repeat the Task Flow for every channel.
To Summarize…
To Summarize…
What are the user pain points of Twitch's stream schedule?
What are the user pain points of Twitch's stream schedule?
Poor findability with a long task flow.
Poor findability with a long task flow.
Doesn't include ALL Followed Channels.
Doesn't include ALL Followed Channels.
Misaligned with the users' mental model.
Misaligned with the users' mental model.
Requires too much time to think and process the information.
Requires too much time to think and process the information.
Problem Refining
Problem Refining
I discovered the insight that most of user frustrations involve "too much".
I discovered the insight that most of user frustrations involve "too much".
Problem and Challenges
Problem and Challenges
The current stream schedule is too time-consuming and cognitively demanding.
The current stream schedule is too time-consuming and cognitively demanding.
Four out of five frustrations require significant thinking, processing and time commitment. Users want LESS from the schedule while fulfilling their needs.
Four out of five frustrations require significant thinking, processing and time commitment. Users want LESS from the schedule while fulfilling their needs.
Challenges
Challenges
Improve findability to reduce the time on task.
Atomize Followed Channels into a single schedule.
Atomize Followed Channels into a single schedule.
Introduce a familiar mental model.
Introduce a familiar mental model.
Remove unrelated information to reduce cognitive load.
Remove unrelated information to reduce cognitive load.
Ideation
Ideation
I focused on creating a less demanding schedule tailored for user needs.
— User Interface Ideation —
— User Interface Ideation —
UI Feature 01 - Calendar
UI Feature 01 - Calendar
Find the stream schedule faster
Find the stream schedule faster
The schedule is located in the navigation bar for quick and easy access.
The schedule is located in the navigation bar for quick and easy access.
Adding the number of streams for the day
Adding the number of streams for the day
Users can see how many different livestreams to expect each day.
Users can see how many different livestreams to expect each day.
UI Feature 02 - Information Panel
UI Feature 02 - Information Panel
A revised content panel
A revised content panel
Clarifies starting times based on YOUR timezone.
Clarifies starting times based on YOUR timezone.
All your Followed Channels available at a glance.
All your Followed Channels available at a glance.
Only shows important info based on my user interviews.
Only shows important info based on my user interviews.
Why is there no end time?
Why is there no end time?
Why is there no end time?
— Interaction Design Ideation —
— Interaction Design Ideation —
Leveraging a Familiar Mental Model
Leveraging a Familiar Mental Model
Users expect dates on the x-axis and information on the y-axis for timetables
Users expect dates on the x-axis and information on the y-axis for timetables
Realigned with user expectations of timetable
Realigned with user expectations of timetable
I changed the axis info to better reflect a timetable, reducing processing time.
I changed the axis info to better reflect a timetable, reducing processing time.
Making information easier to interpret
Making information easier to interpret
Filtered content (alphabetical and chronological) is quicker to interpret vertically - similar to how users view a dictionary.
Filtered content (alphabetical and chronological) is quicker to interpret vertically - similar to how users view a dictionary.
Improving the Visual Hierarchy on Filters
Establishing Visual Hierarchy
Text color is changed corresponding to the filter chosen.
Text color is changed corresponding to the filter chosen.
The Problem
The Problem
Twitch's styling guidelines uses small font sizes and gaps making it difficult to quickly interpret filtered information.
Twitch's styling guidelines uses small font sizes and gaps making it difficult to quickly interpret filtered information.
…And the Solution!
…And the Solution!
The text color changes to quickly guide the users' eyes to the filtered information.
The text color changes to quickly guide the users' eyes to the filtered information.
Resolving Human Factors
Resolving Human Factors
Hide a stream. Then find it again if you need to!
Hide a stream. Then find it again if you need to!
Avoiding overwhelming numbers with curation
Avoiding overwhelming numbers with curation
Some users follow 35-100 channels, which may decentivize use of the feature. Hiding a stream instance or channel name cuts down large numbers.
Some users follow 35-100 channels, which may decentivize use of the feature. Hiding a stream instance or channel name cuts down large numbers.
Final Solution
Final Solution
An easy-access livestream schedule for all your followed streamers.
An easy-access livestream schedule for all your followed streamers.
Welcome to the Livestream Schedule!
Welcome to the Livestream Schedule!
View all stream start times at a glance!
View all stream start times at a glance!
You don't have to leave Twitch to know when a channel is going live! No more relying on that Discord server ping or Twitter post!
You don't have to leave Twitch to know when a channel is going live! No more relying on that Discord server ping or Twitter post!
Your Followed Channels in one spot!
Your Followed Channels in one spot!
No need to jump around different Twitch channels anymore! You have access to your all your Followed Channels!
No need to jump around different Twitch channels anymore! You have access to your all your Followed Channels!
Curate YOUR Upcoming Schedule
Curate YOUR Upcoming Schedule
Tailor it the way you want!
Tailor it the way you want!
Not interested in a game or a channel isn't high priority? Make the schedule your own!
Not interested in a game or a channel isn't high priority? Make the schedule your own!
You can always can undo it!
You can always can undo it!
You always have the choice of seeing what you hide. Or you could change your mind and put it back on the schedule.
You always have the choice of seeing what you hide. Or you could change your mind and put it back on the schedule.
Improved Task Flow for Users
Improved Task Flow for Users
Improvements in the New Task Flow:
Improvements in the New Task Flow:
SIGNIFICNTLY less clicks and scrolling.
SIGNIFICNTLY less clicks and scrolling.
Removes the need to repeat the flow for EACH channel.
Removes the need to repeat the flow for EACH channel.
Reduced task completion time from 7-13 seconds to 1-2 seconds.
Reduced task completion time from 7-13 seconds to 1-2 seconds.
Task Flow (Legends)
Task Flow (Legends)
Task Flow (New ✨)
Task Flow (New ✨)
Task Flow (Old)
Task Flow (Old)
User and Business Benefits
User and Business Benefits
Analyzing how user benefits translate to business benefits.
Analyzing how user benefits translate to business benefits.
Understanding User and Business Benefits
Understanding User and Business Benefits
Correlating User and Business Benefits
Correlating User and Business Benefits
I looked into how the new solution benefits the user and thus, the business.
The Livestream Schedule boosts the amount of engagement time a user will spend on Twitch; along with a higher likelihood of catching streams easier.
I wanted to examine how the user benefits of the new Livestreaming Schedule can translate into business benefits.
User Benefits
User Benefits
Shorter time on task.
Shorter time on task.
More likely to join a livestream quickly.
More likely to join a livestream quickly.
Content creators enjoy increased viewership and visibility.
Content creators enjoy increased viewership and visibility.
Business Benefits
Business Benefits
Increased time on Twitch.
Increased time on Twitch.
Increased viewing time brings more revenue.
Increased viewing time brings more revenue.
Increased revenue through bits and subscriptions.
Increased revenue through bits and subscriptions.
Previous Iterations
Previous Iterations
A sample of some previous iterations that I ended up scrapping.
A sample of some previous iterations that I ended up scrapping.
Horizontal Panel
Horizontal Panel
No Horizontal Scrolls on Twitch
No Horizontal Scrolls on Twitch
Twitch does not have any horizontal scrolling elements. Users expect elements to have a vertical scroll.
Twitch does not have any horizontal scrolling elements. Users expect elements to have a vertical scroll.
The mental model problem is still there
The mental model problem is still there
I assumed users are already accustomed to viewing an improper timetable on Twitch. However, I decided it wasn't worth the risk and opted for a vertical panel still.
I assumed most users are already accustomed to viewing an improper timetable on Twitch. However, I decided it wasn't worth the risk and opted for a vertical panel still.
Front Page Calendar
Front Page Calendar
It sticks out, in a bad way
It sticks out, in a bad way
The calendar breaks the theme of the page. Users expect to see videos and categories only and may find it intrusive.
The calendar breaks the theme of the page. Users expect to see videos and categories only and may find it intrusive.
Sizing constraints
Sizing constraints
The stream panel quickly reached alarming vertical sizes - taking too much space.
The stream panel quickly reached alarming vertical sizes - taking too much space.
Reflections
Reflections
Thank you for reading!!
This is a look into lessons learned from the project. I also explore into what I could have done different if I had more time.
Thank you for reading!!
This is a look into lessons learned from the project. I also explore into what I could have done different if I had more time.
Learnings
Learnings
Working with design style constraints
Working with design style constraints
The small font and gaps between Twitch's elements proved to be difficult. However, I was able to think outside of the box with the Stream Panel by highlighting text when the filter changes.
The small font and gaps between Twitch's elements proved to be difficult. However, I was able to think outside of the box with the Stream Panel by highlighting text when the filter changes.
Marketing problems into a positive
Marketing problems into a positive
Curating a schedule requires time investment but reframing it to be a benefit for the user by allowing customization. I believe this learning helps deliver strong first impressions to stakeholders and marketed users.
Curating a schedule requires time investment but reframing it to be a benefit for the user by allowing customization. I believe this learning helps deliver strong first impressions to stakeholders and marketed users.
What I Would Have Done Differently
What I Would Have Done Differently
Experiment with color more
Experiment with color more
Establishing visual hiearchy for the stream panel was hard enough. However, I also want to look into turning the supporting elements a lighter gray and the highlighted portion a more conservative black color. In the end; I chose something that stands out the most to the user.
Establishing visual hiearchy for the stream panel was hard enough. However, I also want to look into turning the supporting elements a lighter gray and the highlighted portion a more conservative black color. In the end; I chose something that stands out the most to the user.
Ideating on implementation
Ideating on implementation
Time constraints for the project made it difficult to ideate on how to implement certain features. For example, typing in a channel or game name to blacklist from the schedule.
Time constraints for the project made it difficult to ideate on how to implement certain features. For example, typing in a channel or game name to blacklist from the schedule.
FIA
WORKS
Thank you for visiting!
Let's work together!
© 2024 Fia - Inspired by the world of NieR:Automata.
This portfolio was designed and built by Fia.
FIA
WORKS
Thank you for visiting!
Let's work together!
© 2024 Fia - Inspired by the world of NieR:Automata.
This portfolio was designed and built by Fia.
FIA
WORKS
Thank you for visiting!
Let's work together!
© 2024 Fia - Inspired by the world of NieR:Automata.
This portfolio was designed and built by Fia.