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 five 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
  • Movie Details I

    series_details_I

Series details page

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

  • Series Details A

    series_details_A
  • Series Details G

    series_details_G
  • Series Details I

    series_details_I
  • Series Details I

    series_details_I

Live TV

The customer can check what is playing now and what will play next on the selected channel. There is two option, and it is shown here.

  • Live TV D

    live_tv_D
  • Live TV I

    live_tv_I

Player

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

  • Player A

    player_A
  • Player B

    player_B
  • 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.

Page design

You also should start thinking of how you would like individual pages to look. For instance, here is an example home page:

home page example

For details on page layout options see the Introducing Pages document. Here the different page types you can use are detailed, along with layout of video content on those pages.

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.