Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Oscar MayerDo Some Good FB Tab
WireframesV 1.13
2
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Oscar MayerDo Some Good FB TabTable of Contents
DSG Facebook Tab (Upper Page) | User does not yet "Like" 3
DSG Facebook Tab (Upper Page) | User "Likes" 4
DSG Facebook Tab (Lower Page) | All FB Tabs 5
Utility | FB Install Application Interstitial 6
DSG Canvas App 7
DSG Canvas App | Obscenity Filter, Good Deed 8
DSG Canvas App | State/City Error, Good Deed 9
DSG Canvas App | User Names WM 10
DSG Canvas App | Deed Submission Confirmation 11
DSG Canvas App | User Unwraps Reward Modal 12
DSG Canvas App | User Customizes WM 13
DSG Canvas App | Obscenity Filter, WM Name 14
DSG Canvas App | FB Invite Friends Modal 15
DSG Canvas App | FB Post To Wall Modal 16
Interaction Diagram | Map Pins - WM, 75 Stops 17
Interaction Diagram | Map Pins - Good Deeds 18
Interaction Diagram | Good Deeds List Modal 19
Standard Page Elementsx.x
Annotation Legend
Interactions & Dynamic Elementsx.x
Error Elementsx.x
Please note, diagram elements throughout this document have been annotated using color-coded arrows.
Oscar MayerDo Some Good FB Tab
DSG Facebook Tab (Upper Page) | User does not yet "Like"
3
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Width: 520 px
GM MIssionVisit My TownWall Fan of the... >>Info Do Some Good
Oscar Mayer
[ X ] of [ X ] Albums See AllPhotos
[ Album Name ][ Album update information]
Album Avatar (Image)
[ X ] of [ X ] photos by others See All
[ Album Name ][ Album update information]
Album Avatar (Image)
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
Brand Avatar (Image)
XXXXX Friends Like This
[ User Name ]
[ User Name ]
[ User Name ]
XXXXX People Like This
[ User Name ]
[ User Name ]
[ User Name ]
Create a Page for My Business
Report Page
Share
Suggest to Friends
Subscribe via SMS
Brand Message Text
1) "Like" PromoHeader which promotes "liking" Oscar Mayer
2) Program Promotion Header & TextFeature area for promoting the program, with a CTA for "getting started"
3) Wienermobile Customization & Good Deed Count PromotionFeature area for promoting customizing the Wienermobile and joining the program as well as the overall number of good deeds recorded in the program
4) MapThe program's map, displaying the locations of good deeds, the location of the Wienermobile and the upcoming stops for the Wienermobile. Map is not interactive until user "likes", although they may see the good deeds of other consumers and Oscar Mayer. User may toggle any of the pins on or off in the by using the links in the legend.
5) Do Some Good Leader BoardLeader Board for the DSG program. Displays rank, first name, last initial for the top five participants.
6) Do Some Good Prize InformationFeature area for DSG prizing
7) Legal Footer Legal text and links to Details, FAQs, Rules, Privacy Policy and Terms & Conditions
Facebook Tab, width is constrained to 520 pixels
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
[ Overall Program Good Deeds Count & Promo For Customizing
the Wienermobile ]
[ Do Some Good Prize Information
- Including an additional CTA to join the program ]
[ Program Promotional Header & Text ]
[ "Like" Promotional Header; Possibly with arrow pointing toward "Like" button ]
[ Do Some Good Leader Board ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ X ] Pages See AllFavorite Pages
Logo/Brand Avatar (Image)
Promotional Graphic (Image)
Suggest to Friends
Brand Message Text
Founded: XXXX
Information
XXXXX People Like This
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
Page Avatar
(Image)
[ Page Name ]
Page Avatar
(Image)
[ Page Name ]
Page Avatar
(Image)
[ Page Name ]
-
+
[ Map Promotional Header ]
Legend
6
7
2
1
4
5
3
Oscar MayerDo Some Good FB Tab
DSG Facebook Tab (Upper Page) | User "Likes"
4
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Width: 520 px
GM MIssionVisit My TownWall Fan of the... >>Info Do Some Good
Oscar Mayer
[ X ] of [ X ] Albums See AllPhotos
[ Album Name ][ Album update information]
Album Avatar (Image)
[ X ] of [ X ] photos by others See All
[ Album Name ][ Album update information]
Album Avatar (Image)
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
Brand Avatar (Image)
XXXXX Friends Like This
[ User Name ]
[ User Name ]
[ User Name ]
XXXXX People Like This
[ User Name ]
[ User Name ]
[ User Name ]
Create a Page for My Business
Report Page
Share
Suggest to Friends
Subscribe via SMS
Brand Message Text
1) Program Promotion Header & TextFeature area for promoting the program.
2) Wienermobile Customization & Good Deed Count PromotionFeature area for promoting customizing the Wienermobile and joining the program as well as the overall number of good deeds recorded in the program
3) Good Deed Call To ActionCall to action to take user to the application to enter a good deed
4) MapThe program's map, displaying the locations of good deeds, the location of the Wienermobile and the upcoming stops for the Wienermobile. Map interactivity is available.User may toggle any of the pins on or off in the by using the links in the legend.
5) Do Some Good Leader BoardLeader Board for the DSG program. Displays rank, first name, last initial for the top five participants. User is displayed in the bottom right-hand corner with their rank, first name and last initial.
6) Do Some Good Prize InformationFeature area for DSG prizing
7) Legal Footer Legal text and links to Details, FAQs, Rules, Privacy Policy and Terms & Conditions
Facebook Tab, width is constrained to 520 pixels
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
[ CTA for entering a good deed ]
[ Do Some Good Prize Information ]
[ Program Promotional Header & Text ][ Overall Program Good Deeds
Count & Promo For Customizing the Wienermobile ]
[ Do Some Good Leader Board ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ X ] Pages See AllFavorite Pages
Logo/Brand Avatar (Image)
Promotional Graphic (Image)
Suggest to Friends
Brand Message Text
Founded: XXXX
Information
XXXXX People Like This
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
[ User Name ]
Page Avatar
(Image)
[ Page Name ]
Page Avatar
(Image)
[ Page Name ]
Page Avatar
(Image)
[ Page Name ]
-
+
[ Map Promotional Header ]
Legend
3
6
7
1
4
5
2
Oscar MayerDo Some Good FB Tab
DSG Facebook Tab (Lower Page) | All FB Tabs
5
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
Create a Page
Report Page
Share
[ X ] of [ X ] Albums See AllPhotos
[ Album Name ][ Album update information]
Album Avatar (Image)
[ X ] of [ X ] photos by others See All
[ Album Name ][ Album update information]
Album Avatar (Image)
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
Photo Thumbnail
[ X ] of [ X ] videos See AllVideo
[ Video Title ][XXX mins ] [ release
information/ date added]
Video Keyframe (Image)
[ X ] of [ X ] videos by others See All
[ Video Title ][XXX mins ] [ release
information/ date added]
Video Keyframe (Image)
Width: 520 px
This wire has been included for left-hand portion of the Facebook tab
Oscar MayerDo Some Good FB Tab
Utility | FB Install Application Interstitial
6
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
The first time the user opt to enter a good deed, they will be prompted to install the application. They will be routed through this interstitial.
This is a standard Facebook element
1) Permissions RequestedThis element outlines the permissions that this application will be requesting.
2) Application IconApplication's Icon accompanied by it's rating and a link which may be used to report the application
3) Allow / Don't Allow ButtonAllows user to install the application or abandon the installation
Facebook Canvas App, width is constrained to 760 pixels
Request for Permission
[ Application Name ] is requesting permission to do the following:
Access my public informationIncludes name, profile picture, list of friends, and any other public parts of my profile
[ Application Name ]
Report Application
ApplicationIcon
By proceeding, you agree to [ Application Name ]'s Terms of Service and Privacy Policy
Logged in as [ User Name ] (Not You?) Allow Don't Allow
Width: 760 px
3
12
Oscar MayerDo Some Good FB Tab
DSG Canvas App
7
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
1) Do Some Good HeaderMay be text or a graphic
2) Invite Friends PromoPromotion to encourage users to invite friends
3) Program PromotionFeature area for promoting the program
3) Invite Friends PromoPromotion to encourage users to invite friends
4) User's Customized WienermobileThe user's Wienermobile displayed with all of their customizations. Note: If user has NOT customized their Wienermobile a generic Wienermobile should be displayed here.
5) Good Deed Entry FormForm to allow user to enter a good deed (up to 250 words) and the state and city of that good deed
6) MapThe program's map, displaying the locations of good deeds, the location of the Wienermobile and the upcoming stops for the Wienermobile. They may see their own good deeds as well as those of other consumers and Oscar Mayer.User may toggle any of the pins on or off in the by using the links in the legend.
7) Unlocked & Teaser Upgrade Itemsa display of items the user has already unlocked and partially obfuscated (possibly silhouetted) items that the user may unlock.Note: Items displayed with "?" represent items that have not been unlocked.
8) Unwrapped & Teaser Reward Itemsa display of rewards the user has already unwrapped and partially obfuscated (possibly gift box icons) rewards that the user may unlock.Unwrapped rewards may contain links to fulfillment sites (for example coupons.com). The wrapped rewards should open a reward modalNote: Items displayed with "?" represent rewards that have not been unwrapped.
9) Good Deeds & Rewards - Progress To DateA display of what the user has done and which rewards they've unlocked so far
10) Do Some Good Leader BoardLeader Board for the DSG program. Displays rank, first name, last initial for the top five participants. User is also displayed with their rank, first name and last initial.
11) Return To Oscar Mayer's FB WallAn element that allows user to navigate back to the Oscar Mayer Facebook wall
12) Legal Footer Legal text and links to Details, FAQs, Rules, Privacy Policy and Terms & Conditions
Facebook Canvas App, width is constrained to 760 pixels[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
Post this Good Deed anonymously, do not include my name
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ Map Promotional Header ]
-
+
Legend
[ Oscar Mayer Good Deeds ]
[ Consumer Good Deeds ]
[ Wienermobile Stops ]
[ Wienermobile Location ]
Legend
8
21
4
5
7
9
12
11
6
3
10
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | Obscenity Filter, Good Deed
8
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
1) Filter ErrorA text error is displayed if the obscenity filter finds unacceptable language.
2) User's EntryUnacceptable words should be highlighted in the user's entry
3) Button TextButton text should be changed to "re-submit"
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ][ Our obscenity filter has detected unacceptable language. Remove or replace the highlighted word(s) and re-submit ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
re-submitMassachusetts BostonState*: City*:
[ Location? ]
adipiscing
Post this Good Deed anonymously, do not include my name
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
1
3
2
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | State/City Error, Good Deed
9
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
1) Field ErrorA text error is displayed if doesn't provide city and state.
2) FIeld HighlightSkipped field should be highlighted
3) Button TextButton text should be changed to "re-submit"
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
re-submit-- State -- BostonState*: City*:
[ Location? ][ Please select a state and re-submit ]
Post this Good Deed anonymously, do not include my name
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
1
32
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | User Names WM
10
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This modal is displayed whenever a user enters their first good deed which unlocks their Wienermobile and allows them to name it.
1) Salutation & Rewards TextText to congratulate user and inform them about their reward
2) Customization 2.a) Since this is the user's first time through a generic WM is displayed, however it should enlarge to be accompany the field and draw the user's attention to their reward.2.b) Field for user to enter a name for their WM
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Thanks For Spreading the Good! ][ Keep entering good deeds and see what happens! ]
submit another good deededit this good deed
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
[ Image of Wienermobile ]
Congratulations! You've just unlocked another customization for your Wienermobile!
You may now [ customization text including name of item; should correspond to the badge ].
Keep doing good, and see what happens!
Enter a name for your Wienermobilecancel
Your Wienermobile's Name:
save
1
2.a
2.b
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | Deed Submission Confirmation
11
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This modal is displayed whenever a user enters a good deed that does not unlock an award level and customization.
1) Submission TextText to inform user that their deed has been registered.
2) ButtonsA closel button which will close this modal and a "Post to my wall" button which will close this modal and display the post to my wall standard Facebook modal
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Thanks For Spreading the Good! ][ Keep entering good deeds and see what happens! ]
submit another good deededit this good deed
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
[ Your Good Has Been Registered ]
[ Thank you for participating in the Oscar Mayer Good Mood Mission: Do Some Good. Click below if you'd like to share your good deed in your Facebook feed. ]
Post to my wall close
1
2
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | User Unwraps Reward Modal
12
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This modal is displayed whenever a user unwraps a reward by clicking on the wrapp.
1) Reward TextText to inform user what their reward is. Has reward name, description, image, a link to the reward fulfillment site and a bold CTA to enable them to easily navigate to the reward fulfillment site. Clicking on the link or CTA will open a new browser tab.
2) CloseA closel button which will close this modal.
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Thanks For Spreading the Good! ][ Keep entering good deeds and see what happens! ]
submit another good deededit this good deed
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
[ Your Have Earned: Reward Name ]
close
[ Quick Reward Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor viverra felis, eget auctor risus scelerisque at. Curabitur sed tempor velit. ]
[ Click Here to go to your Reward: www.reward.com ] [ Reward Image ]
[ My Reward ]
1
2
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | User Customizes WM
13
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This modal is displayed whenever a user enters subsequent good deeds that unlock further customizations for their Wienermobile.
1) Salutation & Rewards TextText to congratulate user and inform them about their reward.
2) Customization 2.a) Since this is not the user's first time through the app, their customized WM is displayed, however it should enlarge to be accompany the customization choices and draw the user's attention to their reward.2.b) Customization options for user's WM. As user selects each individual option it should display on their WM.
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Thanks For Spreading the Good! ][ Keep entering good deeds and see what happens! ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
[ In ][ State ] [ City ]
submit another good deededit this good deed
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
Congratulations! You've just unlocked another customization for your Wienermobile!
You may now [ customization text including name of item; should correspond to the badge ].
Keep doing good, and see what happens![ Image of Wienermobile ]
cancel
Select [ customization ] for your Wienermobile :
Variation: [Lorem ipsum dolor sit amet, consectetur adipiscing elit]
Variation: [Lorem ipsum dolor sit amet, consectetur adipiscing elit]
Variation: [Lorem ipsum dolor sit amet, consectetur adipiscing elit]
Variation: [Lorem ipsum dolor sit amet, consectetur adipiscing elit]
save
1
2.a
2.b
Width: 760 px
Oscar MayerDo Some Good FB Tab
DSG Canvas App | Obscenity Filter, WM Name
14
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
1) Filter ErrorA text error is displayed if the obscenity filter finds unacceptable language.
2) User's EntryUnacceptable words should be highlighted in the user's entry
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
-- State -- -- City --State*: City*:
[ Location? ]
[ Thanks For Spreading the Good! ][ Keep entering good deeds and see what happens! ]
submit another good deededit this good deed
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
[ Map Promotional Header ]
-
+
Legend
Congratulations! You've just unlocked a customization for your Wienermobile! You may now name your Wienermobile. Keep doing good, and see what happens!
[ Image of Wienermobile ]
Our obscenity filter has detected unacceptable language. Remove or replace the highlighted word(s) and save again. ]
save
Your Wienermobile's Name:
elit
cancel
Width: 760 px
1
2
Oscar MayerDo Some Good FB Tab
DSG Canvas App | FB Invite Friends Modal
15
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
Standard Facebook Modal
1) Invite Facebook Friends ModalIf user clicks the CTA in the invite friends promo the standard invite friends modal is displayed allowing the user to invite up to 6 Facebook friends from their list of friends
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
Post this Good Deed anonymously, do not include my name
[ Map Promotional Header ]
-
+
Legend
[ Invite Your Friends To Do Some Good!You may invite up to 6 friends to Do Some Good by selecting them below. ]
skip >>
SkipSend Invitations To Selected Friends
Find Friends:
Filter Friends
Start Typing a Name
All Selected (0)
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
[ First NameLast Name ]
[ Group(s) ]
Type your message here[ Add a Personal Message ]
Width: 760 px
1
Oscar MayerDo Some Good FB Tab
DSG Canvas App | FB Post To Wall Modal
16
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
Standard Facebook Modal
1) Facebook Post To Wall ModalWhen user unlocks an award level they will be given a customization. Following thier customization, they will be prompted to post a message to their FB Wall/FB Feed about their customization.
Facebook Canvas App, width is constrained to 760 pixels
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
Post this Good Deed anonymously, do not include my name
[ Map Promotional Header ]
-
+
Legend
[ Post To Your Wall ]
CancelShare
What's on your mind?Add a comment...
[ I added <Customization & Variation> to my Wienermobile! ] [ Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
via [ App Name ]
[ Send as a Message instead ]
Width: 760 px
1
Oscar MayerDo Some Good FB Tab
Interaction Diagram | Map Pins - WM, 75 Stops
17
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This diagram illustrates the tool-tip rollover for the map pins.
1) Star Hover "Tool-Tip"When a user hovers over the star icon it will display:The name of the city, the state abbreviation for the stop. The date and address of the appearance.
2) Wienermobile Hover "Tool-Tip"When a user hovers over Wienermobile icon it will display:The name of the Wienermobile (there are 6 of them)The name of the city, the state abbreviation where it has just checked in. Currently they use the "note" for the check in, which typically is the address and sometimes the date, sometimes the time. Ideally, we can standardize this and list the date & time, place name (if applicable), and address.
This diagram applies rollover functionality on the map without regard to where it is displayed.
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
Post this Good Deed anonymously, do not include my name
[ Map Promotional Header ]
-
+
LegendLegend
[WM Name ]We've Checked into:[ City, State Abbreviation ]
You may see us: [ For example:Dec 12, 3-6PM, Westside Mall, 123 Any St. ]
We're Going to:[ City, State Abbreviation ]
You may see us: [ For example:Dec 12, 3-6PM, Westside Mall, 123 Any St. ]
Width: 760 px
12
Oscar MayerDo Some Good FB Tab
Interaction Diagram | Map Pins - Good Deeds
18
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This diagram illustrates the tool-tip rollover for the map pins.
1) Red Pin Hover "Tool-Tip"When a user hovers over a particular pin it will display:The name of the city, the state abbreviation and the current number of deeds submitted for that city accompanied by a link to view the list.
1) Yellow Pin Hover "Tool-Tip"When a user hovers over a yellow pin it will display:The name of the city, the state abbreviation and the good deed that Oscar Mayer did in this location accompanied by a link to view the good deed in its entirety via the modal treatment utilized for the good deeds list.
This diagram applies rollover functionality on the map without regard to where it is displayed.
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
Post this Good Deed anonymously, do not include my name
[ Map Promotional Header ]
-
+
LegendLegend
[ City, State ] [ # of Deeds ]see the list >>
[ City, State ]Oscar Mayer Good Deed:[Vestibulum metus orci, placerat nec ultricies ut, semper sit amet augue. Sed urna velit, tristique a bibendum imperdiet, vaugu ligula...]
more >>
Width: 760 px
1
2
Oscar MayerDo Some Good FB Tab
Interaction Diagram | Good Deeds List Modal
19
Integrated Solutions. Measurable Results.©2010 360i Proprietary & Confidential. All Rights Reserved
Thu Jan 27 2011Modified
Lance LoveCreator
Version V 1.13
File Name OscarMayer_FB_DSG_Wireframes_110103_113.graffle
Height Approxim
ately 500 PX = 90%
of VisitorsH
eight Approximately 700 PX
= 30% of Visitors
Facebook © 2010 · English (US) About · Advertising · Developers · Careers · Privacy · Terms · Help
This diagram illustrates the tool-tip rollover for the map pins.
1) Good Deeds List ModalWhen a user clicks on a pin for a city this modal is displayed. This list is segmented into pages of 5 deeds with pagination at the bottom.If there are fewer than 5 deeds there is no pagination and no scroll bar (unless there is enough content to require a scroll bar).
This diagram applies rollover functionality on the map without regard to where it is displayed.
[ Do Some Good Leaderboard ]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ First Name, Last Initial]
[ #/Rank ][ User First Name, Last Initial]
[ Your Rank ]
[ Wienermobile Upgrade Items ]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
[ Item ][Variation]
?[ Item ]
[Variation]
?
Details | FAQs | Rules
© 2011 Oscar Mayer | Privacy Policy | Terms & Conditions
Click here to return to the Oscar Mayer Facebook Wall
[ My Good Deeds ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]In [ City, State ]
[ My Rewards ] [ # of Rewards ]
[ Reward Name ][ Reward description ]
[ Reward Name ][ Reward description ]
? [ 'Wrapped' Reward ][ Teaser description ]
[ I am going to Do Some Good by: ]
[ Enter your good deed or thank someone else for a good deed they did for you ]
submit-- State -- -- City --State*: City*:
[ Location? ]
[ Oscar Mayer Do Some Good Header ]
[ User's customized Wienermobile ]
[ Program Promotional Text ]
[ Invite Friends Promo ]
Post this Good Deed anonymously, do not include my name
[ Map Promotional Header ]
-
+
LegendLegend
[ City, State ] [ X - XX ] of [ Total # of Deeds ]
[ First Name, Last Initial ][ date, time ] [Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
[ First Name, Last Initial ][ date, time ][Lorem ipsum dolor sit amet, consectetu adipiscing elit dolor ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
[ First Name, Last Initial ][ date, time ] [Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna mauris, vulputate ac tristique ac, ultricies in ligula. Donec quis luctus lorem. ]
[ First Name, Last Initial ][ date, time ] [Lorem ipsum dolor sit amet, consectetur adipiscing elit. ]
[ First Name, Last Initial ]
close
Width: 760 px
1
1 2 3 4 5 ...Prev Next9