A-Spot Introduction
A-Spot Introduction
A-spot is the first and top-most spot on the web page that gets the most views from the visitors. There are call to action buttons with labels that invite the user to click and explore other pages on the site.
Producers create A-spots for the homepage and show’s landing pages. They set which elements to display as well as where on the image those elements will go.
A-Spot Current Workflow
A-Spot Current
Workflow
Workflow
On each Content Type, there is a Promo Details tab to override title, description, and images of the Content when it goes into the Promo spots. However, all the A-spot contents are created manually.
To create an A-spot unit, the producer selects Content > Add Content > A-spot.
- Administrative Title: Only for internal search purposes.
- Show: Association to a show, if any.
- Link: The overall image’s link, which applies to both Homepage and Landing page. Producer can enter the full URL or use Search button to browse the internal pages.
For each of the uploaded images, producer can visually control the placement and size of the text and call-to-action button on the A-spot.
If the default setting isn’t used due to the long text elements, designers would go back in the CMS to check if the elements are visually pleasing.
At the bottom of the image previews, producer can select/deselect the items to appear on the A-spot.
Below, there are text areas for each item to enter the text that will appear on the A-spot. Producer may add additional call-to-action buttons, up to 3. They usually create up to 2, as the front-end UI doesn’t look good with 3.
The label can be as long as 128 characters, and URL is either the URL after the base URL or external. Even if the content is not published, the A-Spots are created beforehand as the URLs are predictable. However, it doesn’t prevent the producer from making typo and publish the A-spot with a broken link.
Once all the A-spots are created, the producer goes to USA Network > Administer USA Homepage and hit edit button of the corresponding day.
In the A-spot References field, producer can search with the administrative title of the A-spot. They use a set format ([SHOW NAME]: Aspot: [TITLE OF THE A-SPOT]) to name the A-spots so they are easy to retrieve.
When promoting content on other spots, producer can create a Promo content. Currently, they are trying to use the Promo fields attached to each of the content and reduce the number of Promo content types as much as possible. They are currently using Promo for animated GIFs or external links.
After you publish the Promo content type, it automatically appears in the Latest Content block. In order to prevent that, producer has to check the Exclude from Related Content block option.
A-Spot New Workflow
A-Spot New
Workflow
Workflow
We designed and developed a prototype for Promo content type and user-tested it with producers from each brands, including USA.
In addition to the required Title field, Association card, and Media card that are common across the Content Types, Promo Content Type has a Kicker field, which is often displayed above the title of the promoted content.
It also features a separate Promo Title field, which would be the consumer-facing title. The required Title field would be only used for the internal searching purposes.
Promo Wrapper page when all the basic information is filled.
The Title field is informative of what this Promo is for, while the Promo Title holds the text that would be displayed on the Promo unit on the front-end.
Since this is promoting a specific Episode of Royal Pains, the producer may choose to identify the Channel Reference, even though it is not required. This helps indexing and categorizing the content and makes it easier to search for in the library.
The image to display for the Promo Content type would be a Primary image, as it is the main and only image of the Promo Wrapper Content Type.
In the case the Promo only holds a single call-to-action button, producer can choose Single link option and enter the appropriate label for the button. In the URL / Content item field, she can either choose from the existing content type or enter a URL for the button to link to. There is also an option to select to open the link in new window.
The selected content type will display the published state in order to avoid mistakes of publishing the Promo Wrapper with unavailable content types.
Feature Enhancement:
Each brand should be able to configure the options in image usages. Currently, the tech leads have the ability to expose or hide options via Structure menu.
The focal point on different platform sizes and the see-ahead strip can be configured in the Edit screen of the primary image. After setting the focal point on where she wants it, the producer can preview all the different image styles that specific image generates. A-spot strip and Mobile size A-spot are featured in this example.
Feature Enhancement:
In order to be an effective preview, all the A-spot previews should have text overlay.
By selecting Multiple links option, producer can add multiple links to the Promo. When there are multiple links, each link should be assigned with one of the usages: call to action button, text link, or image link.
In this example, she adds another link to be a text link, which will appear as a hyperlinked text below the call to action on the front-end. This text is linked to the microsite URL, and the option to open it in the new window is selected.
As an alternative to the Promo Wrapper, the producer may use the Promotional fields available in each Content Type or Video Metadata to set the Promotional information.
This applies only in the case where 1. The link goes to a Content’s or a Video’s page AND 2. There is only 1 call-to-action needed. If the A-spot unit needs to 1. Link out to an External page OR 2. have more than 2 call-to-action, Promo Wrapper should be used.
After creating all the Promo Wrappers and/or entering the Promo information in Contents, the producer has to update the Homepage’s A-Spot. The quickest way is to find the Homepage A-spot Collection in the Collection Library. The producer needs to know the right filter and the Title of the Collection in order to use the Collection Library.
Feature Enhancement:
In the future, it is vital to offer a keyword search in the Libraries. Currently, all the Libraries’ result can only be narrowed down by Filters. This makes it difficult to retrieve Contents that do not have Channel Reference, Category, or Tags. Producers may now start adopting the habit of making the appropriate Associations, but the massive amount of content that already exists would not have those association upon migration, not to mention the fact that not all content to be created after launch might have appropriate associations to make.
Going into the edit screen of the Homepage’s A-spot Collection, the producer can choose the Promo Wrapper by start typing the title.
Feature Enhancement:
The item search in Collection needs to offer more information than just the title and the content type, as well as the option to further filter down the result. As Promo Wrappers’ titles would be consumer-facing, the titles may be quite generic, like the title of the series as in the example. Thus, there can be multiple Promo Wrappers and Content Type itself that have the same title, and it would become impossible to distinguish one from the others. There should be a thumbnail, unique number ID, date created/modified, and/or the creator/modifier in order to distinguish the items from the massive library of content.
Alternatively, each content type can have “Administrative Title” that is only for internal search purposes. Then the producer can give unique title to the Promo Wrappers and other contents without having to name it for consumer-facing purposes.
After selecting the Contents and Promo Wrappers to promote in the A-spot, the producer would hit Publish in order to make it go live on the site.
Feature Enhancement:
Based on USA’s current use case, there is a need to schedule the time of the A-spot content to go live. This can be achieved by one of the following two options:
1. Each item can be scheduled to go into/removed from the Collection. This option reuses the “Homepage A-spot” Collection and reduces the number of Collection that lives on the CMS. The downside of this is that the producers can’t reuse the Collection that was previously up on the site. Use case of this case, however, would be very minimal, if any.
2. Entire Collection can be scheduled to go into/removed from the Collection Group. This saves all the Collections that were ever created on the CMS, thus makes it easy to retrieve the A-spot that was created in the past. However, this would create new Collection each day - USA schedules to update the Homepage A-spot every day - and eventually weigh down the CMS.
A-Spot Annotations
A-Spot Annotations
A-Spot Use Cases For Other Brands
A-Spot Use
Cases For
Other Brands
Cases For
Other Brands
In the individual Promo content, there are Tagline (equivalent of Kicker), Title, Link, and image fields. There is also an option to opt out of the Show Landing Page’s Dynamic Collection if the Promo is meant for the Homepage only.
Bravo has a different access point; when the producer is logged in, he can always see View and Edit options. Edit takes him to the Layout screen.
Layout defines what content that each section holds. Each section has a limit of contents that can be shown in the front-end page, and it clearly lets the producer know which content is published, scheduled, and not displayed.
By clicking on the plus icon, producer can add a new Promo.
This is how a single Marketing Band Content Type looks like. Producer needs to upload multiple images for different layouts and screen sizes.
After the Marketing Band is created, producer can find this Marketing Band in the corresponding Marketing Band Collection, which belongs to a Collection of Collection that ultimately displays this content to the assigned Series’s landing page.
This is the initial screen of a Feature Content Type. This is closer to the Promo Content Type of other brands; it has Title, Image, Headline, and Link.
After the Feature is created, producer can find this Feature in the corresponding Feature Collection, which belongs to a Collection of Collection that ultimately displays this Feature on the assigned Series’s landing page.
A-Spot Next Steps
A-Spot
Next Steps
Next Steps
As we are designing the preview and schedule functionality, we will user-test the Promo content type within the full configuring Homepage workflow.
Catchall Page & Microsite Overview
Catchall Page &
Microsite Overview
Microsite Overview
Catchall page allows any type of custom content on it with full HTML, CSS, and JavaScript capabilities. It is typically used for one-off content with custom or embed code, such as voting.
Microsite is a sectioned page with contents that are related to a specific series. Many microsites are sponsored and tracked with custom analytics from the sponsor. Each section accommodates content from CMS as well as external code.
Catchall Page & Microsite Current Workflow
Catchall Page &
Microsite Current
Workflow
Microsite Current
Workflow
Catchall Page
This is the initial screen of Catchall Page with the basic information.
- Title: This is the title of the catchall page.
- Show & Movie: Association to a TV Show or Movie.
Catchall Code section has three fields for CSS, JavaScript, and HTML code. Producer receives code from designers and programmers and pastes the code in the separate boxes.
Microsite
This is the Basic Information screen for Microsite Content Type. Developers would pre-configure the Theme and Base Path fields and hand the node to the producer. A microsite is typically on a single TV show, and producer makes the association in the Show dropdown.
Each section can be one of the menu items in the Section Type dropdown. Producer adds contents that are appropriate for each section’s type.
Microsite is easier to build out than Catchall page for producers, as all the content is visually laid out.
Catchall Page & Microsite New Workflow
Catchall Page &
Microsite New Workflow
Microsite New Workflow
Potentially, both Catchall page and Microsite can be served by a single Page Content Type. They are both one-page, one-off pages that potentially has content from CMS and/or custom code. Microsite is more structured with the navigation and potential sponsorship opportunities compared to Catchall page. In a way, Microsite is containing sections divided with navigation as their titles, and each section has the same capability that Catchall page has.
Thus, the unified content type would have a Type selector, which would display additional sections and fields for the navigation and sponsorship upon selecting Microsite option.
Catchall Page & Microsite Use Cases For Other Brands
Catchall Page &
Microsite Use
Cases For
Other Brands
Microsite Use
Cases For
Other Brands
In the Additional Information tab, producer can set the cover photo that appears at the top of the page, as well as the Label that appears above title text. Labels are all pre-defined, and most used labels are SWEEPSTAKES and INFO.
Lastly, the relationship to the show, season, episode is set in the Relationships tab if the page is associated with a specific show in Syfy.
This is the initial screen of the Microsite Content Type in the CMS. On the left, producer enters the title of the microsite and attach images for each of the section. Subtitle appears right below the banner image.
On the right, there is a dropdown to select Microsite Type. There’s Cast Blog, The Daily Dish, Awards, Lookbook, Popup, and Theme. Depending on the label, the content renders in a different layout and design on the front-end website.
Also, an association to show, season, and episode is made if the microsite is related to a specific show in Bravo.
Below the subtitle is the body text area, where producer enters the introductory text. There is an Embed text area to copy and paste any embed code to be displayed on the microsite.
Once the microsite is created, a Layout content can be created with appropriate Promos. Then, the layout is associated to the microsite on the right rail.
Microsite
NBC is moving away from a free-form site and towards page as a saleable unit. They have a Content Type called Scalable Sales Page for any one-off page.
There are standard Title and Description fields, and underneath is the Content Modules section where producers add content in blocks.
Producer can also configure the Footer section with custom Title and URL. The design would be the same with the overall NBC.com website.
Catchall Page & Microsite Next Steps
Catchall Page &
Microsite Next
Steps
Microsite Next
Steps
We will consult the Engineering team and explore further on the feasibility and implications of using the same Content Type for similarly functioning pages.
Then, we will conduct Ideation Session and User Testing (2-3 weeks) to create a prototype and validate our workflow and UI.
Quiz Introduction
Quiz Introduction
Quiz offers an interactive content where user can answer to questions about a show or about themselves.
Each question has multiple answer choices, and the user selects what the answer is. Upon selecting an answer, next question appears.
At the end of the quiz, the user sees the result of the quiz, whether it be a score or a character’s profile.
Quiz Current Workflow
Quiz Current
Workflow
Workflow
On the initial screen, producer chooses the type of the quiz - Trivia or Profiler. Trivia counts the number of questions the user got right and shows appropriate messages depending on the number. Profiler lets the user know which character is the most similar to them based on the user’s answers.
Producer enters Title, Description, and related show or movie.
In Additional Information tab, producer sets the images to be used on the front page of the quiz.
Quiz New Workflow
Quiz New
Workflow
Workflow
Concerto has already identified Quiz as a necessary feature. Details on the user interface is to be determined.
On top of Trivia and Profiler quizzes, we are considering having more templates for additional type of quiz, e.g. Swiper, Gallery Quiz, etc. Tech admin from each brand can configure which templates to be exposed in the CMS, depending on the use case of each brand.
Also, we will explore the better logic to generate results of the quiz. Instead of the results of the profiler quiz depending on the sum of the values from answer choices, the answer choices would give points to each result options to generate more accurate result.
Quiz Use Cases For Other Brands
Quiz Use
Cases For
Other Brands
Cases For
Other Brands
To create a quiz, producer selects to create new Syfy Quiz Content Type. In the Basic Information tab, he sets the title, category, image, and synopsis of the quiz. There are Trivia and Personality quizzes under the Category dropdown. Category, Image and Synopsis appear on the landing page of the quiz.
In the Quiz Information tab, producer sets the theme of the quiz to be Trivia, Multi-paged quiz, or Single-paged quiz. Trivia theme would display the pop-up feedback, whereas the latter two would only show the result at the end of the quiz.
Right now, there is only Sum value under Calculation method.
Under Questions tab, producer can add as many questions as they want; but there are usually 10 questions so that the result would be out of 100 points, 10 points per correct answer. Each question features an image and accompanying text.
The result section for both type of quizzes looks identical - each result gets a range of numbers within 0 to 100, image, title, and text.
Finally, an association to a show and season is made under Relationships tab.
In Bravo, quizzes are powered by a 3rd party service called PlayBuzz. The embed code for the quiz simply gets pasted into a separate Game Content Type.
Bravo also has Vote content type, which works similar to quizzes - it merely acts as a wrapper for the embed code.
Quiz Competitive Analysis
Quiz Competitive
Analysis
Analysis
Once entering into Personality Quiz, user enters the title and description of the quiz.
In Personality Quiz, user needs to enter the Results first. Each result can have a title, a media item, and text.
Issue
Even when the text is entered, this view doesn’t show the full text nor whether if there is text entered.
Quiz Next Steps
Quiz
Next Steps
Next Steps
We need to conduct further discovery with quiz content writers and learn how they currently create the logics for quiz, improvements that can be made, and their ideal way of creating a quiz.
We will also look into creating different formats of quiz through CMS, which will involve researching the brands’ user base - their expectation, interaction, etc. Our ultimate goal would be to increase traffic to the brands’ sites through Quiz content type.
Then, we will conduct Ideation Session and User Testing (2-3 weeks) to create a prototype and validate our workflow and UI.
Timeline Gallery Introduction
Timeline Gallery
Introduction
Introduction
Timeline Gallery shows events from a show in chronological order of the episodes. Content is consisted of text and an image or a video, and user can use the arrows or the bottom navigation to jump through the scenes and episodes.
Timeline Gallery Current Workflow
Timeline Gallery
Current Workflow
Current Workflow
When creating a new Timeline Gallery, producer enters Title, Body text, and Show relationship. The Body text isn’t displayed in the current website design of USA, but it is used as the SEO description.
At the bottom on the same tab, there are options to autoplay video and the slideshow of the image, as well as the Cover Item field to set the representative image of the gallery.
For each page of the gallery, producer selects the Season & Episode of the show and the images or videos to display. In case of the videos, producer needs to upload them through MPX and manually run Cron to leave the video in the CMS but unpublish them from the site. Then, she needs to select them one by one, which takes a long time.
Timeline Gallery New Workflow
Timeline Gallery
New Workflow
New Workflow
We identified that the Timeline should be able to generate a timeline with text, image, and/or videos. It would also be able to section off the items, e.g. by season or by the year of the event, have custom titles and season/episode association for each item.
When the new section is added, the association would automatically be set to the next episode, which reduces the mistake of making a duplicate or skipping ahead of episodes. If the producer chooses, she can change the episode to whichever she wants.
Timeline Gallery Annotations
Timeline Gallery
Annotations
Annotations
Timeline Gallery Use Cases For Other Brands
Timeline Gallery
Use Cases For
Other Brands
Use Cases For
Other Brands
This is the initial screen of the Timeline Content Type. Here, producer sets the title and the cover image of the timeline.
In the Relationship tab, producers are required to fill in the association to a show.
Timeline Gallery Next Steps
Timeline Gallery
Next Steps
Next Steps
We will explore any other application of Timeline Gallery to engage and attract more users.
We will also consult the Engineering team with the technical details on how Timeline Gallery would be implemented - it can use the same Gallery content type with a flag, or become a separate content type.
Since we have a UI set for Gallery content type, Timeline Gallery would only require the User Testing (1 week) to validate the workflow.
Top 3 Gallery Introduction
Top 3 Gallery
Introduction
Introduction
Top 3 Gallery allows the user to choose top 3 videos out of the ones that are presented to them.
After hitting Start Now! Button, they can play the video clip and click and drag the ones they like to the bottom slots.
After choosing all 3, they are prompted with confirmation that they in fact like the 3 videos chosen.
At the last step, a link is generated for the user to share their choices on social media.
Top 3 Gallery Current Workflow
Top 3 Gallery
Current Workflow
Current Workflow
In order to create a Top 3 Gallery, producer has to wait until the full episode is in Envato and then pull the clips from it. Since Envato archives videos older than 30 days, she needs to unarchive older videos in order to get the clips.
Process of creating the gallery is similar to Timeline Gallery; producer sets the Title and Body first.
Uploading the videos in the similar manner as in the Timeline Gallery, producer finds the video clip and titles it accordingly. The thumbnail of the videos are automatically pulled, so producer makes sure that the images associated to the video is high resolution.
*NOTE: This feature was developed in Telemundo, and USA pulled it in.