Chris Znerold - Social Application UX Design - Zynga Let's Play Website

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


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


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


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


Zynga Let's Play




I


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


Zynga Let's Play




I


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


Zynga Let's Play


JohnSmithSanFrancisco,California

IlovetoPlayFarmvillebecausethePurpleCowsandAll-NightersRemindmeofmywildcollegedays!

I


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


Zynga Let's Play




I


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


Zynga Let's Play




I


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


Zynga Let's Play




I


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


Zynga Let's Play




I


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


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




I


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


Zynga Let's Play





I


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


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



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


Zynga Let's Play





I


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


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


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


1

2

3



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


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


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



ZYNGA LET S PLAY SITEPreview Webcam Facebook Post


1



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


Zynga Let's Play

Billboard GalleryCreate Your Own Billboard


Watch the Live Webcams

New York City, New York

Reuter's Shot 1

Taken on Sunday, December15th at 12:34 PM.

Share with Facebook


Reuter's Shot 2


Share with Facebook


Reuter's Shot 3


Share with Facebook


Reuter's Shot 4


Share with Facebook


Reuter's Shot 5


Share with Facebook


Reuter's Shot 6


Share with Facebook


Reuter's Shot 7


Share with Facebook


Reuter's Shot 8


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


1

2

3



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


Zynga Let's Play




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


John Smith


me of my wild college days!

Share with Facebook


John Smith


me of my wild co llege days!

Share with Facebook


John Smith


me of my wild co llege days!

Share with Facebook


John Smith

I love to Play Farmville because

the Purple Cows and All-NightersRemindme of my wild college days!

Share with Facebook


John Smith


the Purple Cows and All-NightersRemindme of my wild college days!

Share with Facebook


John Smith


the Purple Cows and All-NightersRemindme of my wild co llege days!

Share with Facebook


John Smith


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


1

2

3



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


Zynga Let's Play





Reuter's Shot 1


Share with Facebook


Reuter's Shot 2


Share with Facebook


Reuter's Shot 3


Share with Facebook


Reuter's Shot 4


Share with Facebook


Reuter's Shot 5


Share with Facebook


Reuter's Shot 6


Share with Facebook


Reuter's Shot 7


Share with Facebook


Reuter's Shot 8


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



Billboard Gallery Facebook Post


1

Chris Znerold - Social Application UX Design - Zynga Let's Play Website

Documents

Transcript of Chris Znerold - Social Application UX Design - Zynga Let's Play Website