Wireframing for Video Streaming TV mobile app
To create a unique "related videos" page for the Stream TV mobile app, I propose a design that focuses on enhancing user engagement and personalization. Here's a wireframe along with the rationale behind it:
- At the top Selected by the user Video - I have included interactive elements such as heart, view details, and play buttons for selected videos to enhance user engagement. Users can interact with these buttons to add videos to the wish list for later viewing, to view details for selected videos on the details page (summary of the video and related comments), or to watch the selected video.
- Related Videos are dedicated to personalized recommendations based on the user's viewing history and preferences. This helps users discover relevant content tailored to their interests.
- New Videos - last videos on Stream TV
- Popular Videos - to keep users updated on the latest trends I have included a "Popular" section that displays videos currently popular among Stream TV users. This section can help users discover new content that is gaining traction.
- Topic - the video is divided into sections by topic.
- The footer includes a Home page, a Navigation icon for easy content discovery, a Wish list - a list with saved videos, Person - to log in or sign up.
- Wireframe is made for the smallest phone 320*568 px - to be sure that the app will not be cropped on different mobiles
- List videos are organized horizontally. The grid layout is designed for continuous scrolling, enabling users to explore a large number of related videos without having to navigate to a new page.
- To find out more information about the video immediately (for seamless interaction) - in my design, the main characteristics of the video are given: video rating, video topic, year of creation, and duration.
I propose two ways to navigate the video by section:
- when the user scrolls left or right the main video window enlarges, while others are blurred. At the bottom of it - the name of the Video and a few main video characteristics
- when the user scrolls left or right the main video window enlarges, while others are getting smaller. There are two navigated buttons (left and right).
Reviews
5 reviews
The floating card structure is interesting. Because the person can continue to watch the video that is playing. The first option is more interesting than the first, since in the second option the buttons are very close to each other. Furthermore, the video box size format changed from horizontal to vertical, which would be incompatible with the horizontal format of the video.
The facet menu with various types of recommendations organization is a very interesting idea.
The darkmode option could be located within a menu, along with settings and the like, as it is a sporadically used feature.
When we create wireframes specifically thinking about a feature, it is quite common to overestimate its importance in relation to other features. The ideal is to create a written list with the importance and then create the wireframe.
The top ‘Selected Video’ section with interactive buttons (heart, details, play) promotes user interaction.
Horizontal scrolling for ‘Related,’ ‘New,’ and ‘Popular’ videos allows for intuitive content discovery.
Footer icons provide easy navigation.
Wireframe 2’s size variation and arrows guide focus effectively.
The design prioritizes accessibility for small devices and presents key video information upfront for seamless interaction.
Both designs would have a lot of more insight after user testing for interaction preferences, with a focus on thumb reachability.
Hi, I like the non-standard look of the buttons on the right! Maybe the app also has support for right and left handed people?
There are moments that the eye clings to.
1) It is not clear what page the user is on: the icon in the bottom TabBar menu is not highlighted and there is no page title. If Selected video is the page title, what is the title of the film and how do you go back a step?
2) Usually there are many genres of videos. Now it is not clear how they will be shown. Maybe several genres will be displayed or only the first one, but the total number will be shown next to it.
3) The first variant of the Related video gallery is very attractive: you want to interact with it. And in this variant, the user sees more surface area of the back cover.
I hope these comments will be useful and I'm already wondering how the page with the finished design will look like!
Clean layout wireframes and fantastic detailed annotations
WOW, like the the design, honestly, the floating cards, love it!!!
You might also like
Wireframe for Video Streaming Service
Sneaker New Definition - UI Design
EV Scooter – Futuristic & Minimal UI Design
Video Streaming App Wireframes
Dying Revolution - Making top 100 scoring game in four days for GMTK 2025
Freight Document Management System
Interaction Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
