AFT Viggle Mobile 21714 (PDF)

Viggle WP8

Prepared by 72 Pixels - Photon Infotech
v1.7 February 17, 2014 10:07 AM

Style Guide

#da2c64

#832b7f

#b23dad

#5b1e59

#3e113f

#ffffff

Tile Icons

Log In

Skip

Filter

Set
Reminder

Help

Cancel

Prepared by 72 Pixels - Photon Infotech

Guide

Confirm

Delete

Fan Show

Search

Share

Block

Add
Comment

Unblock

New
Conversation

Send

v1.7 February 17, 2014 10:07 AM

2

Table of Contents
Live Tiles
5
Information Architecture - Sign Up
7
Information Architecture - TV Provider
8
Information Architecture - Find & Invite Friends
9
Information Architecture - Entering the App
10
Information Architecture - Sign In
11
Landing Screen - Log In
12
Landing Screen - New Account
13
Landing Screen - New Account
14
Landing Screen - New Account
15
Landing Screen - DirecTV
16
Landing Screen - HD Channels
17
Landing Screen - Find/Invite Friends
18
Landing Screen - Tutorial
19
Home Screen - Panorama
20
Information Architecture - Check In Flow Starting
Points21
Information Architecture - TV Check-In Flow
22
Information Architecture - Music Check In
23
Information Architecture - Manual Check-In Process
24
Information Architecture - What’s On
25
Information Architecture - Who’s Watching
26
Information Architecture - Rewards
27
Information Architecture - Redemption
28
Information Architecture - Activity
29
Check In-TV
30
Check In-TV
31
Check In-Music
32
What’s On-Featured
33
What’s On-Show Page
34
What’s On-Who’s Watching
35
What’s On-Guide
36
What’s On-Guide & Search Shows
37
What’s On-Share Show Page
38
What’s On
39
What’s On
40
Prepared by 72 Pixels - Photon Infotech

My Music
41
Rewards42
Rewards43
Rewards44
Rewards45
Rewards46
Activity47
Information Architecture - Profile
48
Information Architecture - Inbox
49
Information Architecture - Block User
50
Information Architecture - Settings
51
Profile
52
Profile
53
Profile
54
Profile
55
Profile
56
Profile
57
inbox - Notifications
58
inbox - Conversations
59
inbox - Conversations
60
Block User Prompt and Blocked Users List
61
Settings62
Settings63
Settings64
Settings65
Settings66
Push Notifications
67
Push Notifications and Fandom Level
68
Help69
Help70
Mockups Landing Screen - Login & Create Account72
Mockups Landing Screen - Login & Create Account73
Mockups Landing Screen - Login & Create Account74
Mockups - Home
75
v1.7 February 17, 2014 10:07 AM

Mockups - Home (Music tab enabled)
76
Mockups - Listening
77
Mockups - Listening
78
Mockups - What’s On-Featured, Most Chatter,
Show Page
79
Mockups - What’s On-Featured, Search, Share
Show80
Mockups - Featured, Show, Guide
81
Mockups - Who’s Watching
82
Mockups - My Music
83
Mockups - Rewards
84
Mockups - Rewards
85
Mockups - Activity
86
My Profile
87
Shows88
List Items
89
A Friend’s Profile
90
Friend’s Profile with Unblock User Option
91
Edit Tagline
92
Inbox - Conversations, Thread, New Conversation93
Settings94
Push Notifications
95
Help96
Help97
Help98
Help99

3

Live Tiles

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

4

Live Tiles

1

2

3

Points of Interest
1

User can be alerted to incoming chat requests

2

Upcoming reminders and favorite shows with their
next airtimes can be prompted on the live tile

3

If a User gains a level while logged outside of the
application, they will be prompted

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

5

Wireframes

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

6

Information Architecture - Sign Up
Section 2.0 Sign Up / 3.0 Sign up with Facebook

3.3 Email address verification

2.1 Login, Create Account
Or Find Out What Viggle Is

before account creation is

2.3 Account Information/

completed

Create account with
Facebook

3.1 Facebook Install Screen

3.4 Facebook permissions,

in Browse

all Public by default
3.2 Account information
populated by Facebook

2.2 What Is Viggle? Modal

2.3.14 Add photo detail (2.3.1)

2.3.9 Under-age registration

2.3.15 Prompt user when
display name already exists

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

2.3.16 Prompt user when
email already taken

2.3.10 Terms

7

Information Architecture - TV Provider
Section 4.0 TV Provider & DTV

3.3 Email address verification
before account creation is
completed

4.1 ZIP input for TV provider
search

4.2 TV provider search
results, choose one

4.3 TV Provider selection

free text input

screen, option to list HD
channels in guide

4.4 IF Provider is DIrectTV

4.7 DTV account credentials

4.8 Successful DTV account

4.9 Link to DirectTV on

request promo code

input (web view)

association state

Facebook (web view)

4.6 Give user a chance to
enter the correct promocode

Prepared by 72 Pixels - Photon Infotech

4.2.1 TV Provider Other is a

4.5 Nag user if they try to
skip lining their DTV account

v1.7 February 17, 2014 10:07 AM

8

Information Architecture - Find & Invite Friends
Section 5.0 Find & Invite Friends

4.3 TV Provider selection
screen, option to list HD
Account Information/Create

channels in guide

5.1 People in my address book
who are already on Viggle

5.2 Find friends flows into

5.2.1 Native invite and

invite friends, that is people

message submission

in my address book not on viggle

account with Facebook

5.3 After inviting from default
source (FB or address book)
land on page offering all sources

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

9

Information Architecture - Entering the App
Section 6.0 Landing in the App

5.2 Find friends flows into

6.1 Tutorial: show on first

invite friends, that is people in

landing and after each logout

6.2 First time point award

my address book not on viggle

4.4 IF Provider is DIrectTV
request promo code

Prepared by 72 Pixels - Photon Infotech

4.8 Points award for
successful account association

v1.7 February 17, 2014 10:07 AM

10

Information Architecture - Sign In
Section 7.0 Sign In

2.1 Login, Create Account

7.1 Offer sign in with

Or Find Out What Viggle Is

Facebook and email

7.2 Offer ability to retrieve
password via email

Prepared by 72 Pixels - Photon Infotech

7.3 If TOS changed since last
user log-in, user must agree to

2.3.10 Terms

updated TOS on next log in

v1.7 February 17, 2014 10:07 AM

11

Landing Screen - Log In

1

Points of Interest
1

User is able to log in automatically through facebook or email

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

12

Landing Screen - New Account

1

Points of Interest
1

The app bar button allows the user to navigate the
new account flow.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

13

Landing Screen - New Account

1

Points of Interest
1

Tapping ‘agree’ will bring the user back to the create account screen with a checked box.

2

Native overlays will be replacing popups to notify
the user.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

14

Landing Screen - New Account

1

Points of Interest
1

Facebook notifications will be determined via
check boxes.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

15

Landing Screen - DirecTV

1

Points of Interest
1

A Viggle frame will be placed above web views.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

16

Landing Screen - HD Channels

1

Points of Interest
1

User can crop a square photo of themselves. Then
a circular profile picture will be shown in the app.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

17

Landing Screen - Find/Invite Friends

1

Points of Interest
1

User can tap the follow icon next to a fellow Viggle user’s name.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

18

Landing Screen - Tutorial

1
2

Points of Interest
1

User swipes to the right in order to go through the
Viggle tutorial. User can also skip this process.

2

The skip icon permanently changes to a next icon
once the user reaches part five in the panorama.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

19

Home Screen - Panorama

2
4

3

5

1

Points of Interest
1

Overflow items aid the user.

3

‘My music’ lets the user know what songs they
recently checked in with the option to see more
previous songs.

2

User swipes right to go to other sections. The
‘what’s on’ page displays visually interesting tiles
for the user to choose from.

4

The user can view recent activity from the users
they follow along with the option to see a full list
of activity.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

5

TV Guide and Search TV are app bar icons.

20

Information Architecture - Check In Flow Starting Points
Section 2.0 Check-In Flow Starting Points

2.1 Check-in screen

3.1 User sees Listening to
your TV Screen

2.2 Check In from Featured
List

2.3 Check In From Show
Page

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

21

Information Architecture - TV Check-In Flow

3.0 Audio Check-In Flow - TV

2.1 Check-in screen

3.1 User sees Listening to
your TV Screen

3.2 Outcome 1:
Confirmation modal

3.2 Outcome 2: Audio not
recognized (Hmm modal)

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

22

Information Architecture - Music Check In

Music Check-In Flow

TV

Music

3.2 Outcome 1:

2.1 Check-in screen

Confirmation modal

3.2 Outcome 2: Audio not
recognized (Hmm modal)

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

23

Information Architecture - Manual Check-In Process

4.0 Manual Check-In Process

3.1 User sees Listening to

4.1 Manual check-in search

results

your TV Screen

Prepared by 72 Pixels - Photon Infotech

4.2 Manual check-in search

v1.7 February 17, 2014 10:07 AM

24

Information Architecture - What’s On

What’s On Section

5.0 Search - No Results

5.0 Search

5.0 Search - Searching

5.0 Search - Results

3.0 Guide

1. Featured List
4.0 Most Chatter

3.0 Guide Day Selector/
Channel Filter

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

25

Information Architecture - Who’s Watching

Who’s Watching

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

26

Information Architecture - Rewards
2.0 and 3.0 Rewards

1.1 Top Level Catalog
2.1 Catalog display of
inventory rewards

3.1 Catalog display of

3.2 reward detail view

2.2 reward detail view

access rewards

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

27

Information Architecture - Redemption
5.0 Redemption

3.1 User sees Listening to

5.1 Verify Account

5.3 Enter Verification Code

5.2 Verify Phone Number

4.2.4 Success

Redemption Details

your TV Screen

5.12 User has no data

5.7 User exceeds 3 account

5.8 User has exceeded

connection

per mobile number

5 mobile activations

5.5 Incorrect Code

3 times in a row

v1.7 February 17, 2014 10:07 AM

5.11 Client did not receive
response from Viggle

5.9 User Eberts wrong code

Prepared by 72 Pixels - Photon Infotech

4.7 Inventory

4.7 Access
Redemption Details

5.10 User fails to validate 5
numbers in a row

28

Information Architecture - Activity

3.0 Activity

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

29

Check In-TV

1

Points of Interest
1

Selecting tv or music, then tapping the V icon will
initiate the listening sequence.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

30

Check In-TV

3

1

2

Points of Interest
1

Selecting tv or music, then tapping the V icon will
initiate the listening sequence.

2

User can manually enter their show if the song or
show is not recognized.

Prepared by 72 Pixels - Photon Infotech

3

Confirming one’s match success will share on facebook/twitter using these icon toggles.

v1.7 February 17, 2014 10:07 AM

31

Check In-Music

1

Points of Interest
1

Selecting tv or music, then tapping the V icon will
initiate the listening sequence.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

32

What’s On-Featured

3
2

1

Points of Interest
1

Search TV and Guide are app bar icon links.

2

An excess number of badges will eventually just
show a remaining number of badgets. Tapping
that will lead to the show page.

Prepared by 72 Pixels - Photon Infotech

3

if featured show is currenlty airing, the ‘set reminder’ button changes to ‘check in now’.

v1.7 February 17, 2014 10:07 AM

33

What’s On-Show Page

2

1

Points of Interest
1

A share icon appears when the show is airing.

2

Tapping any picture within this tile leads to a
‘who’s watching’ page.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

34

What’s On-Who’s Watching

1

Points of Interest
1

User can pivot between both groups, and then
search for users using the app bar.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

35

What’s On-Guide

1

2

3

Points of Interest
1

Tapping a channel will favorite it.

2

Tapping a TV icon will display shows whose titles
are too long.

Prepared by 72 Pixels - Photon Infotech

3

Tapping the time icon will lead to a page that will
let you jump to a specific time.

v1.7 February 17, 2014 10:07 AM

36

What’s On-Guide & Search Shows

1

Points of Interest
1

The guide filter lets the user choose to filter days
and their favorite channels.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

37

What’s On-Share Show Page

1

Points of Interest
1

If a show is currently airing, the user can immediately share that they are checked in.

2

The user can share a show on fb or twitter.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

38

What’s On

Points of Interest

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

39

What’s On

1

Points of Interest
1

This field is editable for the developer.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

40

My Music

Points of Interest

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

41

Rewards

1

Points of Interest
1

The app bar icon allows the user to redeem an
award.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

42

Rewards

1

2

Points of Interest
1

Access rewards are featured in a different format
from Inventory rewards

2

Spotlight rewards can be highlighted in the rewards categories page.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

43

Rewards

1

Points of Interest
1

Entering the 4 digit PIN code will not require the
user to tap each field individually.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

44

Rewards

1
2

Points of Interest
1

User may only try to verify 5 phone numbers.

2

After the maximum numbers are entered, the user
can only select a number, not enter a new number.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

45

Rewards

Points of Interest

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

46

Activity

1
2
4

3

Points of Interest
1

Show name and “view comments” are tappable.

3

The app bar allows the user to post a comment.

2

If mentioned show is currently airing, a check in
now link will replace ‘next air date’.

4

Tapping and holding a comment will let the user
delete a comment or block the commenter.

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

47

Information Architecture - Profile
Section 3.0 My Profile

3.1 User sees Listening to
your TV Screen

2.3 Check In From Show
Page

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

48

Information Architecture - Inbox
Section 3.0 Inbox

3.1 Message in inbox

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

49

Information Architecture - Block User

Section 2.4 Block User

Prepared by 72 Pixels - Photon Infotech

v1.7 February 17, 2014 10:07 AM

50