SkyShowtime TV app design review
This article was written in 2023, March 22, so let’s hope that if you’re a late reader, most of the things mentioned here are already managed.
As a Product designer, and especially during my time at Plex, I have enjoyed working on TV app design. It’s refreshing to work on a layout that doesn’t require considering variable screen widths, as we often do in mobile design.
Over the years, I have also witnessed the streaming market’s evolution and the emergence of specific visual and interactive patterns that have become industry standards. However, learning to use a new TV app can be challenging, especially with remote controls’ nuances.
With that in mind, I’m always eager to check new players (no pun intended) arriving in the streaming apps market and learn how they’ve approached and solved things like focus states, navigation, etc.
During my experience using the Skyshowtime app, I noticed a few areas that could benefit from improvement. So I decided to write this article to provide insights and my personal thoughts that hopefully could help other designers facing similar challenges in the TV app space.
Home
Upon launching the Skyshowtime app, the first thing that caught my attention was the unbalanced layout. The composition, spacing, size proportions, and imagery all felt off.
Spacing
For instance, each swimlane type (landscape, square items) has a different width, but the spacing between items remains the same, resulting in an odd alignment.
Focus state
Additionally, when an item is in focus, the entire swimlane content adjusts to the new width, causing an undesired “dancing movement” that affects the whole swimlane.
This is more of a technical implementation solution, but what we’ve done in the past is to contain the idle and the selected status under the same container that doesn’t change width when the state changes. That way, you properly align the items regardless of the state.
Imagery
One of the treats of “owning” the content of your streaming platform is that you can curate the images you will use to have a more appealing presentation on screen.
Here, the hero images are placed with a “fill” method, leading to cropped art… Let’s consider that you will have around half of the screen covered with information: texts, logo, paginated dots, and the initial swimlanes. With that in mind, a smarter image-framing method could be used to fill the screen.
Additionally, some of the thumbnails use the same color as the app’s background, which increases visual misalignment. Finally, while some of the images chosen to represent genres are present, they may not be as informative as some labeling, resulting in visual noise that makes it difficult to focus on reading the actual label.
Sidebar
We know that sidebar on TV Apps is almost like a corner case, right?
The app should be smart enough to provide the user with interesting content by browsing the swimlanes… “continue watching”, “because you’ve watched The Office”, etc.
But there will be some cases when the user wants to perform a dedicated action, like switching between profiles, searching for something, or any other stuff.
In this case, the sidebar appears with additional labeling on the icons to better define the nature of those sections, but also with a colorful, candy pill-shaped border that acts as a focus item visual indicator. The larger logo that appears when the sidebar is invoked raises the question of whether this is an instance of the old “make the logo bigger” joke among designers.
In terms of aesthetics, the icons are a bit dull. There’s no need to reinvent the wheel, but for an app that shows so often their brand factor (gradient border, big logo on the sidebar, etc.), I feel like adding a little bit more personality to the icon’s design would be much welcomed.
Media Detail
Once you select a TV show, you can jump into the episodes, seasons, and related content details.
But again, some inconsistencies caught your eye the moment you enter this screen:
- Selected states in Seasons have the same visual treatment as just the default state on the top actions (episodes, add to list…).
- The selected color (again, the brand treatment) makes the text hard to read which is something you want to avoid as much as possible.
- I wonder why “add to list” doesn’t have a label. The plus icon is perfect for that action, but since the whole set of actions is labeled, it creates an unnecessary inconsistency.
And we finally arrived at the category icons.
One of the exercises I like to do with my students when doing icon design is defining complex concepts within a simple shaped icon. I love to choose concepts like “friendship” and “religion”, which seems easy firsthand, but the complexity increases when you want to be much more accurate.
Personally, the approach taken here could be more simple. The icons are a bit complex in shape construction and not large enough to be noticeable with a simple eye scan.
Even when you pay attention, some of these are unclear. I’m wondering what’s the meaning of the spider icon.
Maybe using labels instead, for clarity purposes, that also can be localized to other languages is a win-win situation.
Player
I’m an animation advocate in Product Design. It still surprises me that in 2023 we’re still dealing with static approaches in so many interfaces, especially when using it correctly; animation can enhance and enrich the user experience and move it to another level.
That said, I personally would have chosen to show the complete actions (icon + label) the moment the player controls are invoked.
Context is everything, so when the user decides to invoke the controls, we cannot be shy about showing the options available to them. They’re no longer focused on the media playing; they want to perform an action, so let’s help them immediately.
The animation is a nice touch, but after using it several times, it may feel like an extra step.
It’s always difficult to center icons with non-regular shapes within a circular container. Sometimes using a mathematical approach (evenly values on both sides) doesn’t do the trick, and you find yourself pressing left and right arrows in front of the screen.
I find using an optical l approach to solve these cases helpfully. Just create a circular container and reduce it to adjust the edges of the icon to that inner circle boundaries. That way, you will find it much easier to center icons within circle containers.
Profile
I was overwhelmed the moment I entered the switch user section. For me, the size of the avatars is huge. Seems like the selected one is taking around 15 to 20% of the screen state. Maybe decreasing the size of the avatars, even the unselected ones, would lead to a less aggressive screen.
Also, the background color matches the selected image of the avatar, but again, instead of doing a subtle gradient to create some texture or depth, it brings too much attention to it.
When we enter the account settings, we can see the brand treatment in the buttons, which generates some readability issues, and a huge avatar pic that focuses all the user’s attention.
We talked about user context already. In this case, the user came here to change some of their account’s settings… So let’s expose those using the available space of the screen in a better way.
There’s also some inconsistencies in colors, sizes, and even between button states.
Summing up
In conclusion, while some of the issues mentioned in this article may already be on the app’s roadmap for improvement, I wanted to mention some other ones that could be much more subjective.
While it’s possible that most users may not notice these issues, there is a psychological factor that influences how users perceive the quality of a product, something intangible, and this is especially true for those who are experienced with using streaming media apps. By paying close attention to the small details that increase the delight factor of using an app, the product can build a solid brand identity that goes beyond just using corporate colors or increasing the logo size.
This design review is just a quick overview of the visual improvements that I found it could be worked upon. So take them with a grain of salt.
Thanks for reading this!
