Tools:
About:
Platform:
Twitch:
Mobile App (Android/Ios)
Figma, FigJam, Notion, Adobe Illustrator, ChatGPT
IronHack solo Student project where I was able to chose favourite mobile app define weeknesses nd find solution to improve UI of chosen app
Twitch is a live streaming app, founded by Justin Kan. It is a famous online video streaming app mostly
used by gamers to broadcast their live gaming experience. Twitch has become a world-leader in online
streaming and esports. Twitch started with focus on live game streaming, "in real life" streams, and music
broadcasts but now it is being used to stream other non-gaming experiences like travel, DIY, arts, live
animation & even teaching. Though it was founded in 2011 it wasn't until recently, that the platform saw a
rise in popularity with its viewership growing to 5 billion hours in the year 2020 & has been growing ever
since. Currently it is still very much dominated by gamers, but in the recent times its usage has expanded
and it is predicted to grow more in the near future as well.
Kyrylo Prachko
Twitch Re-design app
Heuristic analysis
Result
Match between system
and the real world
User controle & freedome
Consistency and
Standards
Excellent
Excellent
Average
Excellent
Excellent
Excellent
Good
Excellent
Average
Good
Users should have "emergency exit" to leave the
unwanted action in case of a mistake
Users should not have to wonder whether different
words, situations, or actions mean the same thing.
Error Prevention
Recognition rather
than recall
Fexibility and
Minimalist Design
When a new user uses the app during the onboarding the user is informed the features of the app
The new user in given information about the features of the app when they start using it
The user can easily select among the sub-categories of a particular genre making navigation easy
The user can easily sort & filter according to their preferences without needing to scrolling continously
Under following, the user is shown relevant channels & the categories are not so much that it will be overwhelming as it is to the point
Under a channel, the information is a bit confusing & can be presented in a better way
Under a channel, the information is a bit overwhelming & can be presented in a better way. It feels very cluttered & in this screen it seems too much is happening
Under discover the information is a bit overwhelming & can be presented in a better way. The categories seems to be merging with the above information & therefore It feels very cluttered & in this screen it seems too much is happening
An error message will show up if your username is incorrect, while logging in
As an extra security measure after securely logging in the app asks the user a code which is sent to their mail
When there are no conversations with the fellow users the present state is shown & the user is given the option to start conversation with them
When there is an error in live streaming, a pop up message shows up & gives the user to recover from it by giving them an option
The user can see important information related to terms, help etc related to the app in the settings
All of the information is well documented on the site, but it is not within the app so if there was connectivity issue the user won't be able to access.
The user can see important information related to licenses & credits within the app not needing to be redirected to the site
Shortcuts-unseen by the novice user-may often speed up the interaction for the expert user
such that the system can cater to both inexperienced and experienced users.
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
A loading page is shown once the user opens up the app to inform about the page's loading status
In the following section when a live stream has ended the user can rerun the recorded version & it clearly shows in the bottom of the video thumbnail. And if it is live then the status is represented by a red dot & the views
In the browse categories section, in each channel the user is informed about the genre type & how many viewers are following a particular channel.
When the user starts the stream, they can see the live status which informs the user that they are live & they can also see their chat besides.
When the user is going to start a stream the app informs the user in how much time they will go live.
Usage of images to depict the category makes the understanding for the user better & they can relate to it
And putting real live image thumbnails instead of graphic banner thumbnails for live streams again easens the understanding & relatability for the user. Also it gives them context about the stream
Usage of live videos instead of static thumbnails again easens the understanding & gives the user context before hand without needing to open stream
In the live chat, the users can give subs to fellow viewers & these subscription are depicted by gift icons which the users can relate & understand
If a user by any chance selects a sub then the user has to wait for the error prevention message & cannot undo it directly
User can easily pause & unpause the video though because its live they cannot rewind it
User can easily minimise the streaming video with this function & continue watching it while scrolling for other streams or can just simply stop watching the current stream by swiping it right
The language is casual & matches with the tone of the app
Similiar icons style has been used throughout the platform
As Twitch is famous for its emotes, within the app one can spot various illustration styles, but it doesn't seem inconsistent as it compliments the tone of the app
The illustrative styles are consistent for gifts & cheers
If you by mistake end on the bottom left the user will be asked for a confirmation if they want to end the stream or not
When the user clicks logout as a confirmation the user is asked whether they want to logout or not.
If by mistake the user, clicks the subs button then as a final confirmation user in the follow up screen has the option to cancel it. But it is not full proof given there is a high probablity that by just touching the home button their payment can get
Again during the stream the user is asked if they are sure whether they want to buy the bits or not & at the same time the users are informed about them
Auto suggestions appear when the user types for a letter & shows the user possible options
Recent searches allows users to find their previous searches
Speak the users' language and follow real-world
conventions, making information appear in a natural
and logical order.
Error messages should be expressed in plain language
The user should not have to remember information from one part of the dialogue to
another. Instructions for use of the system should be easily visible.
Aesthetic and
Minimalist Design
Every extra unit of information in a dialogue competes with the relevant units of information
and diminishes their relative visibility.
Help Users Recognize,
Diagnose, and Recover From Errors
Error messages should be expressed in plain language
Help and Documentation
Even though it is better if the system can be used without documentation, it may be necessary to
provide help and documentation.
