UX Guide for Post Video Promotions on Facebook

Pat Lang, Senior User Experience Designer
March.13. 2012
Post Video Promotions / Facebook Linking
Draft v.0.1
Change Log:
Friday March 9, 2012
- Started Template
- Added guiding principles
Monday March 12, 2012
- Added whiteboard session with Matt
- Added discussion output with Tom
Tuesday March 13, 2012
- Added High-level inﬂuences
- Added competitors at a glance
- Added how U-verse Facebook Likes behave from ATT
- Added how U-verse Facebook Share behave from ATT
- Added Ux process diagram
- Updated based on Review from Matt.
Tuesday March 20, 2012
- Reversed order of ATT Branded Button and Facebook Branded Button
- Updated based on Review from Boki
Thursday March 22, 2012
- Updated based on 2nd review with Matt
Monday March 26, 2012
- Stepped through the process with Matt on how Hulu auto shares content on
Facebook.
- Concluded that Facebook linking offers minimal beneﬁts without auto sharing content
to Facebook.
- Documented Hulu sharing to Facebook methods
Monday - Wed April 03-04, 2012
- Added wireframes for Post Video Sharing.
Thursday April 05, 2012
- Added header wireframes to template.
- Annotated header wireferames.
Change Log:
Friday March 6, 2012
- Added re-designed wireframe of video player during video playback
- Added re-designed wireframe of video player - Post Video Promotion.

About This Document
This document will help guide us through the Discovery and Deﬁnition phase of the project.
It is the culmination of all research, exercises, and stakeholder meetings.
It provides an outline of our thoughts for the product and creates clear guidelines for the
Design, Development & Evaluation phases.

WIREFRAME 1: CONNECT TO FACEBOOK
1.0 User State: U-verse User Not Logged In
U-verse Sign In
Forgot U-verse ID?
2.0
User State: U-verse User Logged In / Facebook Connected:
Facebook Settings
3.0
Watch Now
Search Field
Ken's U-verse
Sign Out
Watch Now
Search Field
Learn More
Ken's U-verse
Sign Out
Watch Now
Search Field
You account is connected
User State: U-verse User Logged In / Facebook Not Connected
HEADER NAVIGATION
Post Video Promotions
Client
Author
Date
Version
ATT Referrals
KIT Digital / Pat Lang
Sun Apr 08 2012
Draft 0.1

WIREFRAME 1: CONNECT TO FACEBOOK (ANNOTATED) 2
1.0 User State: U-verse User Not Logged In
U-verse Sign In
Forgot U-verse ID?
2.0
User State: U-verse User Logged In / Facebook Connected:
Facebook Settings
3.0
Watch Now
Search Field
Ken's U-verse
Sign Out
Watch Now
Search Field
Learn More
Ken's U-verse
Sign Out
Watch Now
Search Field
You account is connected
User State: U-verse User Logged In / Facebook Not Connected
UVERSE USER
NOT SIGNED IN
UVERSE USER
SIGNED IN
Your U-verse account is now
connected with Facebook!
Let your friends know what
you are watching.
Start a dialog around your
favorite shows on your wall.
CONNECT TO
FACEBOOK
BUTTON APPEARS
VISUAL INDICATOR
THAT ACOUNT IS
LINKED
Now you can Link your AT&T
U-verse account with Facebook!
Let your friends know what
you are watching.
Start a dialog around your
favorite shows.
Sign in to your U-verse
Account First, then connect
your Facebook account.
VISUAL INDICATOR
THAT ACOUNT IS
NOT LINKED
HEADER NAVIGATION
BUTTON CHANGES
TO SETTINGS
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1
V.01
Uverse Post Video Promotions

WIREFRAME 2: POST VIDEO PROMOTIONS - SOCIALSHARINGADDED
MORE
RECOMMENDED
WATCH AGAIN NOTIFY ME
More shows from <Network>
Since you like <current show> you may like these programs
<Current Media Title>
http://urltoffdthatwil/fogossdsda...
Media Title 1 Subtitle
Season : Episode
Season : Episode
Season : Episode
f Like
100
Assertively evolve long-term high
fmpa vor tals through visionary…
solutions.
Post to Facebook Close
P
Mad Men A little Kiss
Season : Episode
Season : Episode
Season : Episode
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

WIREFRAME 2: POST VIDEO PROMOTIONS - SOCIALSHARINGADDED (ANNOTATED)
MORE
RECOMMENDED
Season : Episode
Season : Episode
Season : Episode
f Like
100
solutions.
P
Season : Episode
Season : Episode
Season : Episode
JUST
WATCHED
SUBSCRIBE INDICATOR
META DATA
LARGE
TITLES
MORE
SOCIAL
SHARING
CURRENT
VIDEO
FACEBOOK
SHARING
CHOICE
STREAM
FROM SAME
NETWORK
PREVIOUS
NETWORK
LOGO
WATCH AGAIN
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

WIREFRAME 3: SHARING + UPNEXT VIDEO
MORE
RECOMMENDED
Season : Episode
Season : Episode
Season : Episode
P
Season : Episode
Season : Episode
Season : Episode
f Like
solutions.
COMING UP NEXT
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

WIREFRAME 3: SHARING + UPNEXT VIDEO (ANNOTATED)
MORE
RECOMMENDED
Season : Episode
Season : Episode
Season : Episode
P
Season : Episode
Season : Episode
Season : Episode
f Like
solutions.
COMING UP NEXT
SUBSCRIBE
UP NEXT
VIDEO
FACEBOOK
SHARING
CHOICE
STREAM
FROM SAME
NETWORK
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

RECOMMENDEDSince you like <current show> you may like these programs
Season : Episode
Season : Episode
Season : Episode
439,299 Views
WIREFRAME 4 - SHARING, RATINGS, VIEWS
P
Logo
f Like
100
solutions.
UP NEXT Will start playing in <5> seconds
Season : Episode
521,654 Views
23,889 Views
521,654 Views
258,320 Views
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

SHARING PANEL RELATED CONTENT
UP NEXT VIDEO
AUTOPLAY
RECOMMENDED
Season : Episode
Season : Episode
Season : Episode
439,299 Views
WIREFRAME 4 - SHARING, RATINGS, VIEWS (ANNOTATED)
P
Logo
f Like
100
solutions.
UP NEXT Will start playing in <5> seconds
Season : Episode
521,654 Views
23,889 Views
521,654 Views
258,320 Views
VIEWS
RATINGS
VIEWS
RATINGS
SUBSCRIBE
FACEBOOK
SHARING
UP NEXT
VIDEO
CHOICE
STREAM
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Season : Episode
Season : Episode
Season : Episode
Logo
f SHARE
100
solutions.
Post to Twitter
Tweet
I just saw the Mad Men episode
A Little Kiss on Uverse #Watch
P
MOREMore shows from <Network>
Season : Episode
Season : Episode
Season : Episode
WIREFRAME 5: SHARE PANEL+ MORE + RECOMMENDED
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Season : Episode
Season : Episode
Season : Episode
Logo
f Like
100
solutions.
Post to Twitter
Tweet
P
MOREMore shows from <Network>
Season : Episode
Season : Episode
Season : Episode
SHARING PANEL RELATED CONTENT
MORE FROM
SAME NETWORK
RECOMMENDED
WIREFRAME 5: SHARE PANEL+ MORE + RECOMMENDED (ANNOTATED)
FACEBOOK
SHARING
TWITTER
SHARING
SOCIAL
SHARING
SUBSCRIBE
CHOICE
STREAM
FROM SAME
NETWORK
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Season : Episode
Season : Episode
Season : Episode
Logo
f Like
100
solutions.
UP NEXT Media will start playing in <5> seconds
Season : Episode
Post to Twitter
Tweet
P
WIREFRAME 6: SHARE PANEL+ UPNEXT
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Season : Episode
Season : Episode
Season : Episode
Logo
f Like
100
solutions.
UP NEXT Media will start playing in <5> seconds
Season : Episode
Post to Twitter
Tweet
A Little Kiss on Uverse. <link>
#Uverse
P
SHARING PANEL
UP NEXT VIDEO
RECOMMENDED
WIREFRAME 6: SHARE PANEL+ UPNEXT (ANNOTATED)
RELATED CONTENT
FACEBOOK
SHARING
TWITTER
SHARING
SOCIAL
SHARING
SUBSCRIBE
UP NEXT
VIDEO
CHOICE
STREAM
A Little Kiss on Uverse. Check it
out. <link>
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Logo
WIREFRAME 7:ALWAYS VISIBLE SHARE PANELW/ VIDEO PLAYING
Season : Episode 1 25.30
Video Player
One morning, when Gregor Samsa woke from troubled
dreams, he found himself transformed.
NOTIFY ME OF
NEW EPISODES
RECORD
+ FAVORITES
f Like
I just saw the Mad Men episode A Little Kiss on Uverse.
750 More
One morning, when Gregor Samsa woke from troubled ...
242
Hulu | Hulu Privacy Policy Episode
0:00 / 4:59
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Logo
WIREFRAME 7:ALWAYS VISIBLE SHARE PANELPOST VIDEO PROMOTION
Season : Episode 1 25.30
One morning, when Gregor Samsa woke from troubled
dreams, he found himself transformed.
RECOMMENDED
You may also like these programs
Media Title 3
Subtitle
Season : Episode
Media Title 4
Subtitle
Season : Episode
Media Title 5
Subtitle
Season : Episode
UP NEXT
Next video will start playing in <5> seconds
Media Title
Subtitle
Season : Episode 2
25:30
Media Title 1
Subtitle
Season : Episode
Media Title 2
Subtitle
Season : Episode
WATCH AGAIN
NOTIFY ME OF
NEW EPISODES
RECORD
+ FAVORITES
NOTIFY ME
f Like
I just saw the Mad Men episode A Little Kiss on Uverse.
750 More
One morning, when Gregor Samsa woke from troubled ...
242
Hulu | Hulu Privacy Policy Episode
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Competitor List
POST VIDEO - COMPETITOR LIST
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

How it looks on Facebook.
Online Usability Testing
ATT Uverse Online ++ YouTube Netﬂix
Hulu in the Browser + Hulu on Facebook
POST VIDEO - COMPETITOR LIST 2
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Hulu in the Browser
1 2
5
6
7 8
10
12
11
9
13
14 15 16
17
18
19
20
3
4
30
22
1. Watch Again Icon + Words
2. Embed Icon + Words
3. Advertisement Image
4. Call to Action Button for Ad
5. Advertisement Words
6. Broadcast time for show.
7. New video start countdown
8. Auto Play on/off toggle button
9. Next Video Thumbnail
10. Next Video Show Title
11. Next Video description
12. Nest Video Season #, Episode #
13. Recommended Title
14. Recommended Video Thumbnail #1
17. Recommended Video Title
18. Recommended Video description
19. Recommended Video Season #, Episode #
20. More Recommended Video Arrow
21. Current Video Station ID / Brand
22. Current Video Title
23. Current Video Secondary Title
24. Current Video Episode Name
25. View details (slides to reveal details)
26. Tweet link (launches new window)
27. Facebook Share (opens new window)
28. More (slides to reveal email / share options)
plus embed code and video pop out option.
29
23
24
25
21
26 27 28
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Hulu in the Browser
1 2
14 15
7
10
11
9
8
19
12
18
22
13
20
2. Current Video Secondary Title
3. Current Season # : Episode #
4. Current Episode Running Time
5. Like this episode
6. Watch Again Icon + Words
7. Up next text
8. Next Video Thumbnail
9. Next Video Show Title
10. Next Video description
11. Nest Video Season #, Episode #
13. Recommended Title
18. More Recommended Video Arrow
19. Broadcast time for current video
20. Advertisement Words
21. Advertisement Image
22. Hulu icon
23. Facebook Comment Box
24. Share on Facebook Button
21
23
24
http://itun.es/iPP9qg
3 4 5
6
16 17
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

YouTube in the Browser
1
14
16
19
10 11
21
2
15
13
5
18
3 4
6 7 178
9
10 11 12
15
14
14
14
15
22
20 23
24
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Netﬂix in the Browser (Post Video)
4
1
7
1. Recently watched message
3. Current Video Season
4. Current Video Episode Name
5. Browse Catalog button
6. Play next Episode
7. Show all Episodes for this title.
5
2 3
6
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

AT&T Uverse in the Browser (Post Video - not signed in)
7
14
11
15
3
13
5
8
12
1
9
10
16
2
4
6
20
21
19
1817
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

Competitor List
Social Sharing / Video Playback
POST VIDEO - COMPETITOR LIST 3
Client
Author
Date
Version
ATT Referrals
Sun Apr 08 2012
Draft 0.1

High Level Competitors These sites should be included in discussions about new features.
Online Usability Testing
Vevo ++ Get Glue Spotify
Netﬂix
Social Music Videos Social TV/Movies/Video Games Community Social Music
Multiplatform Video Playback
+ Hulu
Online Video Site

Competitors at a Glance
Get Glue
Social TV Site
Looking at other brands or web properties and how they integrate Social Media Sites.
Spotify
Social Music Site
Vevo
Social Music Video Site
Digg
Social News Site

Competitor Social Music Video Site
Social Media Sharing Indicator
My Time shows a list of music videos I watched.
Vevo Playlist Page

Competitor Multiscreen Video Site
Differs from ATT because the Like Button is related to the actual content that I am viewing.
Differs from ATT because the user can enter a customized message related to the media
they are viewing.
Multiscreen Video Site
On a hulu "player page" a user can share
content to Facebook in 2 ways.
Share content via a Like button
Share content via the Facebook Button, user must
login ﬁrst.
Once logged in the user can enter a customized message.
My Timeline

Social Media Sharing Indicator
My Time shows a list of music videos I watched.
Vevo Playlist Page

Competitor Multiscreen Video Site
Article Page
Article comments powered by Facebook
User Comment posted on user's Facebook Timeline with link back to the Article

How U-verse handles "Likes"
Chantalle Van Doorns Facebook News Feed
(Pat's Facebook Friend)
When I SHARE something on U-verse, it appears in my friend's news feed.
It is clickable link that takes the user back to the content on ATT U-verse.
User must log into their Facebook account and can enter a message.
Share button on ATT Uverse
Facebook Website

How U-verse handles "Likes"
Chantalle Van Doorns Facebook News Feed
(Pat's Facebook Friend)
When I LIKE something on U-verse, it appears in my friend's Side Bar feed.
It is not clickable and it does not link to or reference ATT U-verse in any way.
Like button places content in my friend's content stream.
Clicking the Like button for the "Shakira" category.
Facebook Website
Not ideal.. my timeline shows an image not
related to the content in the main player.

UX Guide for Post Video Promotions on Facebook

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie UX Guide for Post Video Promotions on Facebook

Ähnlich wie UX Guide for Post Video Promotions on Facebook (20)

UX Guide for Post Video Promotions on Facebook