Home Screen

Overview

The Home Screen is the channel's main interface that users see when they select a channel. It allows users to access key features, navigate through different sections of the app, and discover relevant content.

The Home Screen

The Home Screen

The Home Screen has the following main sections:

  • Header (Top App Bar)
  • Billboard
  • Content lists, displayed as horizontal lists of content.
    • Live Stream
    • Featured
    • Featured Collections
    • Continue Watching
  • Nav bar (Bottom App Bar)

Header

The header of the mobile application has 3 sections:

Billboard

A carousel section that is formed by a banner image, a title, a description and a button. Autoplay is on by default and the time interval is set to 5 seconds.

ItemDescription
BannerThe billboard image that is uploaded by the admin in the Video Portal.
It uses a banner image for the web app and a cover image for the mobile versions (web and app).
TitleThe billboard title that is created in the Video Portal.
DescriptionThe billboard description that is created in the Video Portal.
ButtonsThe billboard call to action that is created in the Video Portal. Takes user to the link assigned to the button (e.g.: category, post, live event or external link).
Carousel indicatorIndicates how many slides are available in the carousel. Uses the indicator color of the Channel. Clicking on one of the rectangles takes user to that position of the billboard carousel.

Lists (Horizontal)

Lists present content in a horizontal format, following a sequential order. Lists may include text, images, and/or video posts, and are often used to organize content into a specific order. The order, name and content of the list can be created and managed through the Video Portal.

Each list has the following items:

  • Name of the section;
  • View All: Link to more items;
  • Card: Thumbnail of the content.

Live Section (Horizontal List)

The Live section lists all Live and Upcoming live events ordered by scheduled date (oldest to newest).

When there are no live events happening or scheduled, the section is hidden. When there is a Live event in progress (Live), it will be the first thumbnail displayed on the left.

The list displays up to 5 live events with the "View All" button. This button will be displayed if there are more live events to be shown.

This section is refreshed every 30 seconds so users don't miss out any live events.

Actions

  • Clicking View All takes user to Live tab.
  • Clicking on the "i" icon opens a pop up with additional information about the live event.
  • Clicking on a thumbnail takes the user to that specific Live event detail screen.

Featured Posts Section (Horizontal List)

This is a section of the platform that highlights specific posts that Admin users wish to showcase. Featured posts have their own section on the Home Screen, designed to draw attention to the most important or engaging content.

The Featured section lists all Posts marked as Featured in the Video Portal. The Posts in this Section are ordered by featured date (the date the post was marked as Featured) - from newest to oldest. In the event that there are no Posts marked as Featured, this Section will be hidden.

The list displays up to 5 featured posts with the "View All" button. This button will be displayed if there are more featured posts to be shown.

Actions

  • Clicking View All takes user to Feed tab, with the Featured section selected.
  • Clicking on the "i" icon opens a pop up with additional information about the post.
  • Clicking on a thumbnail takes user to that specific Post detail screen.

Featured Categories Section (Horizontal List)

Similar to the Featured Posts section, the Featured Categories section highlights specific categories of content that Admin users wish to showcase, encouraging users to explore further and engage with a wider variety of content on the platform.

The Featured Collections section lists all collections marked as "Featured" through the Video Portal, ordered by featured date (newest to oldest). If there are no collections marked as Featured, then this section is hidden.

The list displays up to 5 featured posts with the "View All" button. This button will be displayed if there are more featured posts to be shown.

Actions

  • Clicking View All takes user to Feed tab, with the Featured section selected.
  • Clicking on the "i" icon opens a pop up with additional information about the post.
  • Clicking on a thumbnail takes user to that specific Post detail screen.

Continue Watching Section (Horizontal List)

This section allows users to easily resume viewing content that they have previously started but not yet finished. It includes progress indicators that help the user keep track of where they left off.

The purpose of the continue watching section is to improve the user experience and encourage engagement by allowing users to easily resume watching content that they were previously interested in. This can help to increase user retention and reduce churn, as users are more likely to continue using the platform if they can easily find and resume the content they were previously enjoying.

This section will be hidden if there are no videos in the list.

Actions

  • Clicking on the "i" icon opens a pop up with additional information about the post.
  • Clicking on a thumbnail takes user to that specific Post detail screen.

Nav bar (Bottom App Bar)

This is the graphical user interface element that appears at the bottom of the application screen. It contains links and buttons that allow users to navigate and access different sections or features of the platform.

Available Customizations

  • Accent color (one color used throughout the app)
  • Indicator color (one color used throughout the app)
  • Nav bar background color (one color used throughout the app)
  • Nab bar items names: max of 15 characters
    • Home
    • Collections
    • Feed
    • Live
    • My List
  • Nav bar items: ability to show or hide any of the available items (Home, Collections, Feed, Live and My List)

Any changes made to this section require a new build to be submitted to the app stores for approval.