FB App Sitemap, Flows & Open Graph Annotations - MARY BETH ...

cakeexoticInternet and Web Development

Dec 13, 2013 (3 years and 5 months ago)

343 views

Panera
Food Chain Reaction Circles App
IA/UX - Site & Flow Diagrams
Page 2 /13
December 17, 2012 8:54 PM
Sitemap
Create Circles (1) Complete Circles (2) Food Chain Reaction (3) Live consciously Eat Deliciously (6) Donate (7) Privacy Policy (8) Terms of Use (9)
Footer
List of Friends
Complete
Circles
2
Remind Friends
2.1
All Friends
Friends
List of Friends
Create
Circles
1
Invite Friends
1.1
All Friends
Friends
Welcome
0
Play Video
Start a Food
Chain Reaction
FB
4
T
5
Food Chain
Reaction
3
All
My Friends
Legend
Page
Link in a page
Video

NAP (link to Social Media)
Page 3 /13
December 17, 2012 8:54 PM
Flow Diagram
Landing to Home
Panera FB App
Landing Page
(Showing before
promo ends content)
Feeding America
Facebook Page
Promo Post
Panera Facebook Page
Promo Post
User Facebook Wall
Invitation from Friend
Friend’s Facebook Wall
Promo Post about Friend
Participating
Facebook
Permissions Request
Permission Granted:
User moves to Creating
Circles Page; Timeline
Post Annoucement
Permission Denied:
User returns to Panera
Facebook App Landing
Page
N
Y
After Promo Ends:
Show user message to
help share awareness
N
Y
Before Promo Ends:
Move user to Panera FB
App Landing Page
Panera FB App
Landing Page
(Showing after
promo ends content)
Legend
Decision by System
Decision by User
NOTES
See “Timeline Updates by Graph API Ob
-
ject” section of this document for “Permis
-
sions Accepted”.
1
1
Page 4 /13
December 17, 2012 8:54 PM
Flow Diagram
Create Circles: Send Invitations
NOTES
Invite All Friends
(Batch Invite)
Invite Friends by List
(Batch Invite;
only show list name if =
1+ eligible friends)
Invite Friends 1 by 1
(“Add” to select,
“Send Invitations”;
Batch Invite)
System Verification:
If 1-50 invitations
= Send Invitation
System Verification:
If 50+ invitations
= Send 1st 50; then send
next 50; and so on
Message to user: Confirmation
(see text content below)
Post invitation
to friend’s wall
A
Confirmation Options:
Use Case: Invite all friends (Batch Invite)

Confirmation text before promo ends:
“You’ve invited
2 lists
of friends to start
a Food Chain Reaction.”
Confirmation text after promo ends:
“You’ve invited
2 lists
of friends to help
feed people in need.”
Use Case: Invite friends by list (Batch Invite)

Confirmation text before promo ends:
“You’ve invited
all of your friends
to start a
Food Chain Reaction.”
Confirmation text after promo ends:
“You’ve invited
all of your friends
to help
feed people in need.”
Use Case: Invite friends 1 by 1 (Batch Invite)

Confirmation text before promo ends:
“You’ve invited
4 friends
to start a Food
Chain Reaction.”
Confirmation text after promo ends:
“You’ve invited
4 friends
to help feed people
in need.”
2
Button: Close (x)
Return to Create Circles
view of Send Invitations
Button: Invite More
Friends
Return to Create Circles
view of Send Invitations

Button: View The Food
Chain Reaction
Move user to The Food
Chain Reaction page
A
2
1
Legend
Decision by System
Decision by User
See “Timeline Updates by Graph API Ob
-
ject” section of this document for “User
Invites Friend”.
2
Friend Is Not Eligible
to be Invited:
Do not show name on
screen, do not include in
batch invite
N
Y
Friend Is Eligible
to be Invited
Page 5 /13
December 17, 2012 8:54 PM
Flow Diagram
Complete Circles: Send Reminder
NOTES
Remind All Friends
(Batch Reminder)
Remind Friends by List
(Batch Reminder)
Remind Friends 1 by 1
(“Remind” to select,
“Send Reminders”;
Batch Reminder)
System Verification:
If 1-50 invitations
= Send Reminder
System Verification:
If 50+ reminders
= Send 1st 50; then send
next 50; and so on
Message to user: Confirmation
(see text content below)
Post reminder
to friend’s wall
A
Confirmation Options:
Use Case: Remind all friends
(Batch Invite)

Confirmation text before promo ends:
“You’ve reminded friends invited from
2 lists
who have not accepted their invi
-
tation to start a Food Chain Reaction.”
Confirmation text after promo ends:
“You’ve reminded friends invited from
2 lists
who have not accepted their invi
-
tation to help feed people in need.”
Use Case: Remind friends by list
(Batch Invite)

Confirmation text before promo ends:
“You’ve reminded
all of your friends
who
have not accepted their invitation to start a
Food Chain Reaction.”
Confirmation text after promo ends:
“You’ve reminded
all of your friends
who
have not accepted their invitation to help
Use Case: Invite friends 1 by 1 (Batch
Invite)

Confirmation text before promo ends:
“You’ve reminded
4 friends
who have
not accepted their invitation to start a
Food Chain Reaction.”
Confirmation text after promo ends:
“You’ve reminded
4 friends
who have
not accepted their invitation to help
feed people in need.”
Button: Close (x)
Return to Complete
Circles page
Button: Remind More
Friends
Return to Complete
Circles page

Button: View The Food
Chain Reaction
Move user to The Food
Chain Reaction page
A
2
1
Legend
Decision by System
Decision by User
NOTES
See “Timeline Updates by Graph API Ob
-
ject” section of this document for “User
Reminds Friend”.
3
Page 6 /13
December 17, 2012 8:54 PM
Flow Diagram
Circle Completion
Friend Accepts Invitation
Add friend to existing
circle if members =
less than 4
Add friend to new circle
if members = 4
Send notification to user
that friend accepted
2
1
Badge Unlock:
If friend added = comple
-
tion of 1, 5, 25, 50 or 100
circles, unlock the re
-
spective badge on user’s
Completed Circles Page &
add to user’s Timeline
Badge Unlock:
If friend added does not
= completion of 1, 5, 25,
50 or 100 circles, do not
unlock a badge
N
Y
Legend
Decision by System
Decision by User
NOTES
See “Timeline Updates by Graph API Object”
section of this document for “Badge Unlock”.
4
Email Notification
“_____(name of friend)____ accepted your
invitation to complete a circle in the Panera
Food Chain Reaction app.”
A
A
Continue to
“App Landing to
Home” Flow
Promo Complete:
If circle is # 250,000,
change App mode to
“Promo Complete” mode;
post Promo Complete sta
-
tus to all users’ timelines
Promo Not Complete:
If circle is not # 250,000,
continue in Promo not
Complete mode
N
Y
4
Page 7 /13
December 17, 2012 8:54 PM
Flow Diagram
The Food Chain Reaction
Panera FB App
The Food Chain Reaction
Page
(Showing before
promo ends
“All Friends” content)
Panera FB App’s Create
Circles Page
(user clicks relative top
nav button)
Invitation Confirmation
(user clicks “View The
Food Chain Reaction”)
Reminder Confirmation
(user clicks “View The
Food Chain Reaction”)
Retweet
User clicks a Retweet
button in a Twitter post
to retweet the post
Like
User clicks a Like button
to post a “Like”
notification in user’s wall
3
1
After Promo Ends:
Move user to The Food
Chain Reaction show
after promo ends content
N
Y
Before Promo Ends:
Move user to The Food
Chain Reaction show
before promo ends content
Panera FB App
The Food Chain Reaction
Page
(Showing after
promo ends
“All Friends” content)
Panera FB App’s Com
-
plete Circles Page
(user clicks relative top
nav button)
2
“My Friends” page view
User clicks on “My
Friends” tab in page to
change content; only
show content relative to
the user
Legend
Decision by System
Decision by User
Page 8 /13
December 17, 2012 8:54 PM
Timeline Updates
by Graph API Objects
Page 9 /13
December 17, 2012 8:54 PM
Open Graph
Permissions Accepted (Post)
Post
API Reference › Graph API › Post
http://developers.facebook.com/docs/reference/api/post/
The User, Page, Application and Group objects have feed connections containing post
objects that represent their walls. In addition the User and Page objects have a con
-
nection named posts containing Posts made by the User and the Page respectively.
Panera’s Food Chain Reaction
1 in 6 People Don’t Know Where Their Next Meal Is
Coming From.
You are invited to help create circles of friends to
share awareness about food insecurity.
(After promo ends: You are invited to help Seth Sil
-
ver share awareness about food insecurity.)
From: Seth Silver
December 17, 2012
(50px x 50px)
Link: apps.facebook.com/my_game/home.html
1
1
Page 10 /13
December 17, 2012 8:54 PM
Open Graph
User Invites Friend (Link)
2
2
Link
API Reference › Graph API › Link
http://developers.facebook.com/docs/reference/api/link/
Panera’s Food Chain Reaction
1 in 6 People Don’t Know Where Their Next Meal Is
Coming From.
You are invited to help create circles of friends to
share awareness about food insecurity.
(After promo ends: You are invited to help Seth Sil
-
ver share awareness about food insecurity.)
Seth Silver
shared a
link
.
December 17, 2012
(50px x 50px)
Link: apps.facebook.com/my_game/home.html
Page 11 /13
December 17, 2012 8:54 PM
Open Graph
User Reminds Friend (Link)
3
3
Link
API Reference › Graph API › Link
http://developers.facebook.com/docs/reference/api/link/
Panera’s Food Chain Reaction
1 in 6 People Don’t Know Where Their Next Meal Is
Coming From.
You are invited to help create circles of friends to
share awareness about food insecurity.
(After promo ends: You are invited to help Seth Sil
-
ver share awareness about food insecurity.)
Seth Silver
shared a
link
.
December 17, 2012
(50px x 50px)
Link: apps.facebook.com/my_game/home.html
Page 12 /13
December 17, 2012 8:54 PM
Open Graph
Badge Unlock ( Achievement)
Achievement(Instance)
API Reference › Graph API › Achievement(Instance)
http://developers.facebook.com/docs/reference/api/achievement/
Achievement: object containing the id, url, type, and title of the achievement
Defining the set of achievements for a Game
Each achievement must possess a unique URL with the appropriate Open Graph protocol <meta> tags. We will scrape the achievement’s unique URL and use the in
-
formation provided in the tags to generate stories in news feed and on timeline. Clicking these stories will redirect to the achievement’s unique URL.
When defining an Achievement URL consider that if your Achievement URL is a child of your Canvas URL, the Achievement URL will automatically be re-written
as child of your Canvas Page URL. For example, assume your game is hosted at www.example.com/my_game/ and playable on Canvas at apps.facebook.com/my_
game/:
Registering an Achievement URL of www.example.com/my_game/ach1.html will be re-written to apps.facebook.com/my_game/ach1.html.
Registering an Achievement URL of www.example.com/achievements/ach1.html will not be re-written, as it is not a child of www.example.com/my_game/.
As a best practice when registering Achievement URLs for Canvas games build off your Canvas Page URL. Based on the example above, developers would register
apps.facebook.com/my_game/ach1.html
.
Achievement Badge Earned

Seth
earned the
1 star badge
on
Panera Food Chain
Reaction
by
completing 1 circle of friends
.”
(50px x 50px)
Link: apps.facebook.com/my_game/ach1.html
4
4
Page 13 /13
December 17, 2012 8:54 PM
Open Graph
Promo Complete (Link)
Link
API Reference › Graph API › Link
http://developers.facebook.com/docs/reference/api/link/
Panera Donates 250,000 Meals to Feeding America
“Panera received an overwhelming response from
friends and reached the goal of 250,000 meals do
-
nated.”
Panera Food Chain Reaction
shared a
link
.
December 17, 2012
(50px x 50px)
Link: apps.facebook.com/my_game/home.html
5
5