chris znerold - social application ux design - zynga let's play website
TRANSCRIPT
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
1/19
UX/UI Documentation prepared by Chris Znerold
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
2/19
1 2 3 4 5 6 7 8 9 10 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 1 2 3 4 5 6 7 8 9 10 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4
Create Your Own Billboard
Login to Facebook Watch the Live Webcams Billboard Gallery
Accept Permissions
Edit Personalized Information
Select Facebook Album
Select Facebook Photo
Upload Game Board Select GameChange Photo Add Quote
Preview Personzlized Game BoardShare Personzlized Game Board with
Facebook
Preview Facebook Share
Share Live Webcams with Facebook
View Enlarged Photo
Share Photo with Facebook
Facebook Wall Post(On Facebook.com)
Personalized Billboard(Direct Link from Facebook)
Application Landing
ZYNGA LET'S PLAY SITESite Map
Prepared byZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
3/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
YourNameYourLocation
YourQuoteAboutAFavoriteMomentPlayingaZyngaGame
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
4/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
YourNameYourLocation
YourQuoteAboutAFavoriteMomentPlayingaZyngaGame
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
5/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
YourNameYourLocation
YourQuoteAboutAFavoriteMomentPlayingaZyngaGame
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
6/19
1 2 3 4 5 6 7 8 9 10 11 1 2 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
7/19
1 2 3 4 5 6 7 8 9 10 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 1 2 3 4 5 6 7 8 9 10 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
8/19
1 2 3 4 5 6 7 8 9 10 11 1 2 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
9/19
1 2 3 4 5 6 7 8 9 10 11 1 2 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
10/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
11/19
1 2 3 4 5 6 7 8 9 10 11 1 2 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
C rea te You r O wn B il lbo ar d Wat ch t he Li ve Web ca ms
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
12/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
C rea te You r O wn B il lbo ar d Wat ch t he Li ve Web ca ms
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
13/19
1 2 3 4 5 6 7 8 9 10 11 1 2 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
is Showcased in Zynga's Times Square Billboard!
Create Your Own Times Square Billboardhttp://zynga.com/billboard
Lorem ipsum dolor sit amed sit lorem ipsum dolor
lorem ipsum dolor sit lorem sit ahe.
ZYNGA LET'S PLAY SITEFacebook News Feed Post
Prepared byZYNGA LET'S PLAY SITE
Facebook News Feed Post Components
1. Facebook PostAfter a user has selected to share their personalized billboard with
Facebook, the post appears in the newsfeed with an image placeholder and
a link, title, and description of the application post.
1
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
14/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
C rea te You r O wn B il lbo ar d Wat ch t he Li ve Web ca ms
Welcome to Zynga's Times Square!
JohnSmithSanFrancisco,California
IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!
I
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
15/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Watch the Live WebcamsCreate Your Own Billboard
To see the Zynga Let's Play billboard in action tune in December 12th to January 2nd.
Share these Webcams with Facebook
Welcome to Zynga's Times Square!
Billboard Gallery
Watch the Live Webcams Components
1. Live Webcam ComponentThis component contains the two live webcam feed .swf files
Reuters of Times Square.
2. Campaign Timeline InformationThis component lets users know the duration of the campaig
they might be able to see the bill board in action.
3. Share with Facebook ButtonThis button allows users to share the webcam feeds with Face
NOTE:The Times Square Interactive Graphic is a .swf. It is the only el
page that is built with Flash.
ZYNGA LET S PLAY SITEWatch the Live Webcams
Prepared byZYNGA LET'S PLAY SITE
1
2
3
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
16/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Watch the Live WebcamsCreate Your Own Billboard
To see the Zynga Let's Play billboard in action tune in December 12th to January 2nd.
Share these Webcams with Facebook
Welcome to Zynga's Times Square!
Billboard Gallery
Preview Webcam Facebook Post Components
1. Preview Facebook Post DialogAfter a user has selected to share the live webcam feeds with
are shown a dialog screen that gives them a preview of their
them to customize the users timeline on which it will appear
Watch the Live Webcam of Times Square
http://zynga.com/billboard
Lorem ipsum dolor sit amed sit lorem ipsum dolor
lorem ipsum dolor sit lorem sit ahe.
ZYNGA LET S PLAY SITEPreview Webcam Facebook Post
Prepared byZYNGA LET'S PLAY SITE
1
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
17/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Billboard GalleryCreate Your Own Billboard
Welcome to Zynga's Times Square!
Watch the Live Webcams
New York City, New York
Reuter's Shot 1
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 2
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 3
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 4
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 5
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 6
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 7
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 8
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
Billboard Gallery Components
1. Photo of Times Square BillboardThe photos of the Zynga billboard taken by Reuters will be a
gallery section of the website.
2. Enlarge PhotoEach photo can be viewed at larger size by clicking on the th
3. Share with Facebook ButtonEach photo can be shared to Facebook. Clicking this buttonpost preview dialog.
ZYNGA LET S PLAY SITEBillboard Gallery
Prepared byZYNGA LET'S PLAY SITE
1
2
3
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
18/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Billboard GalleryCreate Your Own Billboard
Welcome to Zynga's Times Square!
Watch the Live Webcams
San Francisco, California
John Smith
I love to Play Farmville becausethe Purple Cows and All-NightersRemind
me of my wild college days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville becausethe Purple Cows and All-NightersRemind
me of my wild college days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville becausethe Purple Cows and All-NightersRemind
me of my wild co llege days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville becausethe Purple Cows and All-NightersRemind
me of my wild co llege days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville because
the Purple Cows and All-NightersRemindme of my wild college days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville because
the Purple Cows and All-NightersRemindme of my wild college days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville because
the Purple Cows and All-NightersRemindme of my wild co llege days!
Share with Facebook
San Francisco, California
John Smith
I love to Play Farmville because
the Purple Cows and All-NightersRemindme of my wild co llege days!
Share with Facebook
Photo Headline Lorem Ipsum Dolor Sit Lorem Ipsum. Share with Facebook
Billboard Gallery Photo Dialog Components
1. Photo of Times Square BillboardThe enlarged photo will be displayed in the center of a light-
dialog.
2. Next/Back buttonsUsers can navigate between enlarged photos by clicking on th
back buttons to the left and right of the photo.
3. Share with Facebook ButtonEach photo can be shared to Facebook. Clicking this button
post preview dialog.
ZYNGA LET S PLAY SITEBillboard Gallery Photo Dialog
Prepared byZYNGA LET'S PLAY SITE
1
2
3
ZYNGA LET'S PLAY SITE
-
8/2/2019 Chris Znerold - Social Application UX Design - Zynga Let's Play Website
19/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Googlehttp://iheartplay.zynga.com
Zynga Let's Play
Billboard GalleryCreate Your Own Billboard
Welcome to Zynga's Times Square!
Watch the Live Webcams
New York City, New York
Reuter's Shot 1
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 2
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 3
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 4
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 5
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 6
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 7
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
New York City, New York
Reuter's Shot 8
Taken on Sunday, December15th at 12:34 PM.
Share with Facebook
Billboard Gallery Facebook Post Components
1. Preview Facebook Post DialogAfter a user has selected to share a Reuters photo with Faceb
shown a dialog screen that gives them a preview of their post
them to customize the users timeline on which it will appear
Create Your Own Times Square Billboard
http://zynga.com/billboard
Lorem ipsum dolor sit amed sit lorem ipsum dolor
lorem ipsum dolor sit lorem sit ahe.
Billboard Gallery Facebook Post
Prepared byZYNGA LET'S PLAY SITE
1