User Experience/Information Architecture

V 1.0

Date | Version | Description
10/05/13 | 1.0

QUEEN LATIFAH • SITE MAP

0.0

Home Page

Call To Action

Where to
Watch

This
Week

Tickets

Sweepstakes

Remind
Me

Footer Links

Privacy
Policy

Terms of
Use

Contact Us

1.0

Page
1

2.0

Page
2

3.0

Page
3

4.0

Page
4

5.0

Page
5

TBD

B

QUEEN LATIFAH • 0.0 MAIN NAVIGATION (TOP)

A

Where to Watch

This Week

Remind Me
to Watch

D

C

BUTTON 1

BUTTON 2

BUTTON 3

BUTTON 4

BUTTON 5

Search on queenlatifah.com...

E

F

When the user scrolls down the page, the social media follows, tethered to the top of the page. The first 3 buttons are indicated while the other 6 are hidden inside an arrow. When the arrow is pressed, the other 6 buttons slide out.

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: The navigation of the website can be done in two different ways the first of which is top navigation.
The resolution being used in this architecture is 1024x768.
A. LEADER BOARD AD
The top leaderboard ad has a resolution of 728x90.
B. SITE LOGO
This is the logo for the site. Clicking here will return the user to Home.
C. MAIN NAVIGATION
The main navigation contains the following: (TBD)
D. CALL TO ACTION BUTTONS
The call to action buttons contains the following:
• Where to Watch
• This Week
• Tickets
• Sweepstakes
• Remind Me to Watch
D. SOCIAL MEDIA
The social media on the site consists of the following:
• Youtube • Facebook
• Twitter
• Google+
• Instagram
• Pinterest
• Get Glue
• Reddit
• Send Email
E. SEARCH MODULE
User can seach for content on the site.

QUEEN LATIFAH • MAIN NAVIGATION (TOP)

QUEEN LATIFAH • 0.0 MAIN NAVIGATION (SIDE)

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: The navigation of the website can be done in two different ways the second of which is second navigation.
The resolution being used in this architecture is 1024x768.
A. LEADER BOARD AD
The top leaderboard ad has a resolution of 728x90.
B. SITE LOGO
This is the logo for the site. Clicking here will return the user to Home.
C. MAIN NAVIGATION
The main navigation contains the following: (TBD)
D. CALL TO ACTION BUTTONS
The call to action buttons contains the following:
• Where to Watch
• This Week
• Tickets
• Sweepstakes
• Remind Me to Watch
D. SOCIAL MEDIA
The social media on the site consists of the following:
• Youtube • Facebook
• Twitter
• Google+
• Instagram
• Pinterest
• Get Glue
• Reddit
• Send Email
E. SEARCH MODULE
User can seach for content on the site.

QUEEN LATIFAH • MAIN NAVIGATION (SIDE)

QUEEN LATIFAH • 0.0 FOOTER

Privacy Policy | Terms of Use | Contact Us

© 2013 Sony Pictures Television Inc. All Rights Reserved.

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: Footer contains the following items:
A. FOOTER NAVIGATION
The footer navigation links to the following pages:
• Privacy Policy
• Terms of Use
• Contact Us
B. LEADER BOARD AD
The footer leaderboard ad has a resolution of 728x90.
C. SITE LEGAL DISCLAIMER
This is the copyright information of the website.

QUEEN LATIFAH • FOOTER

QUEEN LATIFAH • 0.0 HOME

FEATURED

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

View

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: The index page that the user initially comes to when viewing the site.
A. ROTATING IMAGE CAROUSEL
The image gallery houses ads, show information and/or links.
B.PREVIOUS IMAGE BUTTON
This button scrolls the image gallery to the previous image in the carousel.
C. NEXT IMAGE BUTTON
This button scrolls the image gallery to the next
image in the carousel.
D. PAGINATION INDICATOR
This indicates what image is being viewed in the rotating image carousel.
E. MODULES
These modules contain items of interest of the show.
(TBD).

QUEEN LATIFAH • HOME

QUEEN LATIFAH • 0.0 HOME (V2)

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: The index page that the user initially comes to when viewing the site.
A. ROTATING IMAGE CAROUSEL
The image gallery houses ads, show information and/or links.
B.PREVIOUS IMAGE BUTTON
This button scrolls the image gallery to the previous image in the carousel.
C. NEXT IMAGE BUTTON
This button scrolls the image gallery to the next
image in the carousel.
D. PAGINATION INDICATOR
This indicates what image is being viewed in the rotating image carousel.
E. MODULES
These modules contain items of interest of the show these modules have a view button that takes the user to the specific content.
(TBD).
F. OPTIONAL AD/INSTAGRAM CONTAINER
This is the area for either an ad or an instagram image container.

QUEEN LATIFAH • 0.0 VIDEO PAGE

VIDEOS

Video page intro text.

SHARE

XXXXX LIKES

FEATURED VIDEO TITLE

DESCRIPTION: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rating

FULL EPISODES

CELEBRITIES

WATCH

MUSIC

FUN

COOKING

CONTESTS

NEW

NAME

POPULAR

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: This is the videos index page. This page allows the user to sort by category.
A. VIDEO PAGE INTRO
Introductory text that only appears on the index page.
B. VIDEO PARSING
Clicking on a category allows the user to view different categories of videos in the video list. The buttons will consist of the following: (TBD)
C. FEATURED VIDEO PLAYER
The featured video will play directly on the index page.
D. VIDEO LIST
The video list contains thumbnails of the videos that have been parsed above. The video list defaults to NEW and POPULAR when the page is first visited.
E. SHARE BUTTONS
The following buttons are displayed:
• Youtube • Facebook
• Twitter
• Google+
• Instagram
• Pinterest
• Get Glue
• Reddit
• Send Email
F. RATING
The user can rate the video here.

QUEEN LATIFAH • VIDEO PAGE

G

QUEEN LATIFAH • 0.0 VIDEO PLAYER

00:02/00:15

H

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: This is the video player. Auto start will be off. Video services will be utilized through Kaltura. All videos will be h.264. The video player is scalable to view on tablet and desktop.
A. LARGE PLAY ICON BUTTON
This button appears at page load and when pressed starts the video.
B. PLAY/PAUSE BUTTON
This button plays and pauses the video.
C. VIDEO SCRUBBER This is the scrubber for the video. The user can scrub through the video.
D. TIME
This is the amount of time in the video as well as the current placement in the video.
E. VOLUME
This regulates the loudness of the audio.
F. FULL SCREEN BUTTON
This button makes the video full screen.
G. SHARE BUTTONS
The following buttons are displayed:
• Youtube • Facebook
• Twitter
• Google+
• Instagram
• Pinterest
• Get Glue
• Reddit
• Send Email
H. RATING
The user can rate the video here.

QUEEN LATIFAH • VIDEO PLAYER

QUEEN LATIFAH • 0.0 THIS WEEK

Monday

Month Date, Year

Tuesday

Wednesday

Thursday

Friday

View This

FUNCTIONAL ANNOTATIONS
SCREEN DESCRIPTION: This page shows
upcoming highlights for the show.
A. WEEK DAY
This is the day of the week of the show.
B. DATE
This is the date of the show.
C. THUMBNAIL
This is the thumbnail image of the show.
D. COPY
This is the brief description of the show.
E. VIEW THIS BUTTON
This button displays the video page of the show clip.
F. TODAYS SHOW
This is todays show.
G. TODAYS SHOW RIBBON
This ribbon indicates todays show.

QUEEN LATIFAH • THIS WEEK