support Contact Support | system status System Status
Page Contents

    Creating Your Application Design - Layout Options

    In this topic, you will answer a series of questions, recording answers in a spreadsheet, that will lead you to the look of your Brightcove Beacon Experience application design.

    Introduction

    This document will lead you through a series of questions about how you want the layout of your Brightcove Beacon Experience to appear. The result of answering these questions will help you build your application design for the Brightcove Beacon Experience. A very simple example of what you want to have defined for your app is pictured here:

    You may not have experience in designing a UX for an OTT app. In the last section of this doc, Is guidance available? , a list of vendors' advice is shown. You may wish to read and consider their guidance before designing your UI.

    Recording your categories/selections

    You will record your decisions as you work through this document in a spreadsheet. To prepare the spreadsheet follow these steps:

    1. Download a template by clicking on this link: app-design-layout-options.xlsx . Be sure to remember where it is saved.
    2. Open a blank spreadsheet from the Google Sheets app.
    3. From the Google Sheets menu select File > Import .
    4. From the dialog that appears, first choose Upload then click the Select a file from your device button, as shown here:
    5. Find the Excel file just downloaded, select it, then click Open .
    6. From the Import file dialog that appears, choose Replace spreadsheet, then click the Import data button.
    7. After the spreadsheet is imported you will see something similar to the following:

    In the spreadsheet you will record the answers to the questions in this document. You will make selections from dropdown lists indicating your choice of layout for a screen.

    At the end of this process, you will share your completed Google Sheet with the Brightcove representative helping configure your experience.

    Choosing site layout options

    The following provide layout options for different parts of your app. The images shown, and from which you will choose your preference, are from a mobile app. Of course, the screens for TV or web will look slightly different. For instance, shown first below is a movie details screen from a mobile app, followed by the same movie details screen from the Apple TV app.

    movie details a mobile
    movie details a apple tv

    Now it is your time to start choosing options. The following provide layout options for different parts of your app. Review the options for the particular layout, then record your selection in the spreadsheet.

    Landing page

    The landing page is optional. If you wish to have a landing page choose your layout, otherwise choose None. Note, there is no landing page on the web app. There are two options from which to choose.

    • Landing A

      landing_A
    • Landing Carousel

      landing_carousel

    Movie details page

    The movie details page displays details for a particular movie, and a list of related movies. There are four options from which to choose.

    • Movie Details A

      movies_details_A
    • Movie Details F

      movies_details_F
    • Movie Details G

      movie_details_G
    • Movie Details H

      movie_details_H

    Series details page

    The series details page displays details for a particular series, and a list of related movies. There are four options from which to choose.

    • Series Details A

      series_details_A
    • Series Details F

      series_details_F
    • Series Details G

      series_details_G
    • Series Details H

      series_details_H

    Live TV

    The customer can check what is playing now and what will play next on the selected channel. There are two options from which to choose.

    • Live TV D

      live_tv_D
    • Live TV E

      live_tv_E

    Player

    The player controls appear different, as well as other videos in the series, if any. There are four options from which to choose.

    • Player A

      player_A
    • Player B

      player_B
    • Player C

      player_C
    • Player D

      player_D

    Live TV Player

    Player used when live TV is playing. There are three options from which to choose.

    • Live Player A

      live_player_A
    • Live Player B

      live_player_B
    • Live Player D

      live_player_D

    Customer Settings

    Displays the customers' settings options. There are three options from which to choose.

    • Settings A

      settings_A
    • Settings Carousel

      settings_carousel
    • Settings Grid

      settings_grid

    Optional items

    In this section you will decide if you wish to include some optional items. In the spreadsheet you will answer with Yes/No .

    Rating popup

    Determine if you wish to use a rating popup..

    rating_popup

    More Info popup

    Determine if you wish to use a More Info popup.

    more_info_popup

    About screen

    Determine if you wish to use an About screen.

    about

    Moving forward

    You've completed this task. Be sure to save the spreadsheet you have been working on for later submission to Brightcove personnel when your Brightcove Beacon Experience is built.

    If you have not done so, you need to complete the other part of defining your application design by working through the Creating Your Application Design - Information Architecture to determine what videos you want displayed and how to group and order them.

    Is guidance available?

    UX design is a complicated matter, and you may wish to see what others consider when building a design. The following are links to some of the major OTT players advice on design and best practices.


    Page last updated on 08 Mar 2020