IFC–Calendar & Recommendation System iPad Wireframes and...

IFC – Calendar & Recommendation System

iPad Wireframes and Functional Overview

Index

Document History Page 3

Application Structure (Map) Page 4

Flows Page 5

Wireframes Page 70.0 Global Elements Page 7

1.0 Splash Screen Page 9

2.0 Home Page 10

3.0 List Index Page 12

4. TRE Lists Page 14

4.0 Grid View Page 14

4.1. Calendar View Page 16

4.2. Feed View Page 18

5. Sponsor Lists Page 19




6. Member Lists Page 22




6.3. Member Profile Page 25

7. My List Page 26




8. Profile Page 30

8.0. Profile Page 30

8.1. Edit List Name Page 32

9. Product Detail Page 33

9.1. Movies Page 33

9.2. TV Page 36

9.3. Music Page 38

9.4. Games Page 40

9.5. Related Links Page 42

10. Help Page 43

10.0. Help/Tips Page 43

11. Log in Page 44

11.0. Facebook Login Page 44

12. Sharing Page 46

12.1. Share via Facebook Page 46

12.2. Share via Twitter Page 47

13. Supplementary Screens Page 48

13.1. Connection Error Page 48

13.2. General Error Page 49

Document History

Version 0.1

Draft for internal review

Version 0.2 Draft for

internal review

Version 0.3

Draft for initial client review

Does not yet include product detail for all four categories

Version 1.0

Work in progress of next version incorporating initial feedback

Does not yet include skinned sponsor versions of list and and product

screens

Does not yet include full advertising spots/specs

Does not yet include supplementary screens

Version 1.1

For internal review

Version 1.2

For internal and developer review

Version 1.3

Internal changes

Version 1.4 – 11 Jan 2011

Included login uses cases and personalization (pages 6, 24, 29)


Final version for approval


Sponsor profile page removed

Product format removed on grid screens

Optional content ‘source’ added

Application Structure (Map)

Splash Screen1

Main/Home Screen

2

{TRE} List

4My List

7

Member List6

List of Lists

(List Index)3

Product Detail

9

Help/Tips

10

Login

11

Sponsor List

5

Member Profile

6.3

My Profile

8

5.0 Grid

5.1 Calendar

5.2 Feed

4.0 Grid

4.1. Calendar

4.2 Feed

6.0 Grid

6.1 Calendar

6.2 Feed

7.0 Grid

7.1 Calendar

7.2 Feed

Share List or

Product12

Flows

Main/Home Screen {TRE} List (Grid View)My List (Grid View)

0.. 1

Member List (Grid

View)

0.. 5

{TRE} List (Calendar

View)

{TRE} List (Feed View)

My List (Calendar

View)

My List (Feed View)

Member List (Calendar

View)

Member List (Feed

View)

SWIPE – TOP LEVEL

Flows (cont..)

User chooses to “add

product”

LOGIN

Login Use Case 1: User chooses to add a product to their

own calendar

Logged in?

Add product and

update display

Yes

Show login

promptNo

Login

Process

User chooses to

“follow” a

member list

Login Use Case 2: User chooses to follow a member

Logged in?

Follow member

and update

display

Yes

Show login

promptNo

Login

Process

User accesses

menu

Login Use Case 3: User accesses menu

Logged in?

Display logout

button

Yes

Show login

prompt

No

Login

Process

Display login

button

User selects

logout button

User selects

login button

Display previous

screen

Log user out

0.0 Global Elements

A STANDARD IPAD APP BAR

The standard application bar includes:

- connection status

- time

- battery power

B MENU BAR

The custom iPad menu bar allows users to select

sections/pages and switch views.

GESTURE: Tap or slide up menu tab to access menu

TRANSITION: On slide up, the menu section slides in to

cover part of the screen

C MAIN MENU – Links to key sections/screens

The menu includes:·

HOME (tap to 1.0)

TRE PICKS (tap to 3.0 List Index)

POPULAR (tap to 3.0 List Index)

{USER_NAME}’s LIST

If logged in, tap to My List (grid view)

If not logged in, tap to display login prompt

PROFILE

If logged in, tap to Profile

If not logged in, tap to display login prompt

Nav item for current section is highlighted in menu

GESTURE: Tap the menu items to link directly to

application screens/modules

TRANSITION: On tap, the menu retracts and all

sections/screens automatically display

B

CTRE

Picks

{Name}’

s List

GLOBAL MENU

Help

MENU V

Popular

A

D

Home

Login/out

Profile

0.0 Global Elements cont..

D SECONDARY MENU – Links to supplementary

screens

The menu includes:·

HELP (tap to display Help)

LOGIN/OUT

User is logged out: tap to display login prompt

User is logged in: tap to immediately log out,

then display the login prompt

Nav item for current section is highlighted in menu

GESTURE: Tap the menu items to link directly to

application screens/modules

TRANSITION: On tap, the menu retracts and all

sections/screens automatically display

E LIST VIEW MENU –Switches list view

The menu only appears if the user is currently browsing

a list and includes options to switch to:·

Grid view

Calendar view

Feed view

Nav item for current view is highlighted in menu

GESTURE: Tap the menu items to switch view for the

current list

TRANSITION: On tap, the menu retracts and the view

automatically switches

LIST VIEW MENU

Home

MENU V

Name’s

List

GridCalen

darFeedCHOOSE YOUR VIEW:E

Help Login/out

TRE

PicksPopular Profile

1.0 Splash Screen (Landscape)

DescriptionThe Splash Screen displays when the user accesses the

application while the content is loading. They are then

taken to the Main/Home Screen as soon as it loads.

A LOADING/SPLASH IMAGE

The loading screen/modal displays “loading” messiging

and/or imagery

GESTURE: None

TRANSITION: User taken to the main/home screen

automatically

A

Please waitN we’re downloading the latest in movies, TV, music and games

2.0 Home/Main Screen (Landscape)

App logo/lockup

248x271px

DescriptionThis screen displays a selection of lists and products in

the system that are coming up and that are flagged as

featured. IFC editors will have the ability to ‘feature’

certain products and lists to ensure they rise up to this

top level.

The grid includes tiles of 2 different sizes:

- 248x271 (image-based)

- 248x186 (text-based)

IFC editors should have the flexibility to control which

products or lists are featured on this screen, however

the guideline that IFC will work to for the 11 tiles are:

1. IFC ‘Movies’ list

2. IFC ‘TV’ list

3. IFC ‘Games’ list

4. IFC ‘Music’ list

5. Advertiser/User list

6 – 11. Products x6

The user arrives at this screen if:

- user accesses application from iPad desktop (after the

splash screen)

- user swipes right/left at the top level

- user selects ‘Home’ from the main nav

From this screen the user may:

- Swipe left to the grid views of various lists

- Select a ‘product’ to view the product detail

- Select a list to view the products

A STANDARD GRID HEADER

This includes the logo/lockup and/or the app name/

description

A248x271px248x271px

248x271px

248x271px 248x271px

248x271px

248x271px

FORD’SFocus on Summer

Blockbusters

C

FEB 11Cedar Rapids

FEB 5Tron

IFC’S

List of the best

games coming out

this Winter.

DFEB 13Call of Duty

B

IFC’S

List of the best TV

shows

IFC’S

List of the best

movies

IFC’S

List of the best music

Everyone has been

waiting for this to

come out> and now

it’s almost here. This

movie lorem ipsum

dolor sit amet MMM DDProduct

MMM DDProduct

2.0 Home/Main Screen (Landscape) cont..

B PRODUCT THUMBNAILS – Summary of product

Each product in the grid includes:

- image

- product release date

- product description

- color code for product category (film/tv/music/games)

When a tile in the grid is selected, the tile flips to show

the summary (see D).

GESTURE: tap once to flip

TRANSITION: TBC

C LIST THUMBNAILS – Summary of list

Each product in the list includes:

- image

- title/owner (e.g. ‘TRE’, ‘MICHAEL’, ‘FORD’ etc)

- customized list description (excluding small tiles)

When a tile in the grid is selected, the tile flips to show

the summary (see D). If the user takes no action in 10

seconds, the tile flips back over.

GESTURE:

- tap once to flip

- tap again to go to Member List Screen

TRANSITION: TBC

D PRODUCT/LIST SUMMARY – Summary of selected

product or list

If a product or list is selected, the tile flips to show this

summary with date and description.

If the user takes no action in 10 seconds, the tile flips

back over.

GESTURE: tap again to go to product detail or

member list

TRANSITION: TBC

3.0 List Index (Landscape)

DescriptionThe menu allows users to access an index of all the

most relevant lists in the system – the “list of lists”

The ‘TRE’S Picks’ module/pop-up displays if:

- user selects TRE’s Picks from the main nav


- Select a list to view the member’s list

A TRE’S PICKS

This includes TRE’s ‘master’ list and any lists IFC

decides to feature (advertisers, contributors, members)

GESTURE:

- swipe up/down to scroll through items

- tap item to access list

TRANSITION: TBC

B LIST SUMMARY

Each list appears with:

- thumbnail (member’s Facebook Profile pic OR content-

managed thumbnail for IFC/sponsor lists

- name

- description

GESTURE: tap to select

TRANSITION: on tap, the user is taken to Member List

or TRE List

TRE’S PICKS

TRE’S PICKS

A

TRE’SLIST OF EVERYTHING YOU WANT

TO SEE, HEAR & PLAY IN 2011

FORD’SFOCUS ON SUMMER

BLOCKBUSTERS

NAME’SLOREM IPSUM DOLOR SIT

AMET


AMET


AMET


AMET

B

Home

MENU V

TRE

Picks

Help Login/out

{Name}’

s ListPopular Profile

3.0 List Index (Landscape) cont..

DescriptionThe menu allows users to access an index of all the

most relevant lists in the system – the “list of lists”

The ‘Popular’ module/pop-up displays if:

- user selects Popular from the main nav


- Select a list to view the member’s list

A MOST POPULAR

This includes the top 20 most followed lists in the

system, excluding TRE’s ‘master’ list.

GESTURE:

- swipe up/down to scroll through items

- tap item to access list

TRANSITION: TBC

POPULAR

POPULAR

A

STEVE’SBEST EA RELEASES FOR THE

YEAR


AMET


AMET


AMET


AMET


AMET

Home

MENU V

Popular

HelpSettin

gsLogin/out

TRE

Picks

{Name}’

s ListProfile

4.0 TRE List: Grid (Landscape)

DescriptionThis screen displays all products in the system that are

coming up and that are flagged as featured. IFC editors

will have the ability to ‘feature’ certain products to

ensure they rise up to this top level.

The grid includes tiles of 2 different sizes:

- 248x271 (image-based)

- 248x186 (text-based)



- user selects “Grid” from the TRE List (Calendar) and

TRE List (feed) views


- Switch to the calendar or feed views

- Select a ‘product’ to view the product detail.

A STANDARD GRID HEADER

This includes:

- current week’s date (Monday) in the format MMM DD

- the logo/lockup

B APP LIST TITLE AND EDITORIAL

This includes:

- standard app name/header

- app list description

248x271px248x271px

248x271px

248x271px 248x271px

248x271px

248x271px

FEB 1

Todd and Margaret

FEB 11Cedar Rapids

FEB 5Boy

MMM DD

Product

FEB 13Call of Duty

MMM DD

Product

MMM DD

Product

MMM DD

Product

MMMProduct

MMM DDProduct

App logo/

lockup

TRE’S

Week of

MMM DD

LIST OF EVERYTHING YOU

WANT TO SEE, HEAR &

PLAY IN 2011Lorem ipsum dolor sit amet.Lorem

ipsum dolor sit amet.Lorem ipsum

dolor sit amet.Lorem ipsum dolor sit

amet.Lorem ipsum dolor sit amet.

AC

B!

!D

MMM DDProduct

?E

4.0 TRE List: Grid (Landscape) cont..

C PRODUCT THUMBNAILS – Summary of product


- image




When a product is selected, the user is taken to Product

Detail Screen.

GESTURE: tap once to flip tile for a more detailed

decription/blurb; tap again to go through to product detail

TRANSITION: TBC

D FEATURED/HIGHLIGHTED MARKER

The IFC editors can mark specific products as featured

or highlighted. When these products display in the app,

they are indicated with a marker or treatment that makes

them stand out from other products.

Note: the treatment of these featured products will be

defined during UI design.

E RUMORED MARKER

The IFC editors can mark specific products as having

tentative or ‘rumored’ release dates. When these

products display in the app, they are indicated with a

marker or treatment that shows the date is tentative.

Note: the creative treatment of this will be defined during

UI design.

While a release always has a date, editors must be able

to choose whether both the month and day appear

within the app, or only the month.

4.1 TRE List: Calendar (Landscape)

DescriptionThis screen shows the current month by default and all

products that are released during the displayed month.


- user switches to the calendar view from the TRE List

(Grid) and TRE List (Feed) views


- Switch to the feed or grid views

- Advance to a month in the future


A MONTH INDICATOR

The name of the current (selected) month

B CATEGORY FILTERS

This element allows users to turn the 4 categories ‘on’ or

‘off’. All categories are ‘on’ by default.

GESTURE: tap to toggle categories on or off

TRANSITION: on tap, the calendar content

automatically shows content only in the selected

categories

C CALENDAR GRID

- The calendar always displays in a 7x6 grid.

- The first 5 columns of the first row are reserved for an

ad/image space

- If the first day of the month falls on a Saturday or

Sunday, dates for the current month begin in the top row

- If the first day of the month falls on Monday through

Friday, dates for the current month begin in the 2nd row

- All empty slots are filled with the dates from the

previous and next months (grayed-out)

TRE’S LIST OF EVERYTHING YOU WANT TO SEE, HEAR & PLAY IN 2011

2 3 4 5 6 7 8

9 10 11 12 8 9 15

16 17 18 19

15 16

22

23 24 25 2622

23 29

30 31 1 2 3 4 5

Cedar Rapids on DVD

EF

Music TVMovies Games

A

2011 H

MARCH 14

LOREM IPSUM DOLOR SIT

AMET


AMET


AMET

G

!

Ad Space

B

D

Lorem ipsum dolor sit amet

+ 7 more



+ 1 more

MON TUES WED THURS FRI SAT SUN

31 1C

JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC 2012

log

o

4.1 TRE List: Calendar (Landscape) cont..

D AD SPACE

- The ad space consists of an image and optional link

- If there is no ad set to display, the empty slots are filled

with the dates from the previous month (grayed-out)

GESTURE: tap to open external link or video in Safari

TRANSITION: TBC

E PRODUCT TITLES – Summary of product

If a product has a release date in the selected month

and its category is “on”, it displays here. Each product

plotted on the calendar includes:

- product name

- format


If more than four products exist in the calendar for a

particular date, a more indicator is displayed.


Detail Screen.

GESTURE: TBC

TRANSITION: TBC

F MORE INDICATOR– Indicator and link to browse

more products

If more than four products exist in a calendar for a

particular date, a ‘more’ indicator is displayed.

GESTURE: Tap to open a modal with full list of products

in the current view

TRANSITION: On tap, the modal automatically displays

G FULL PRODUCT LIST– List of all products on

selected day in selected categories

Each product includes:

- image



GESTURE:

- scroll up/down to view all products on date

- tap product to link directly to the feed view with the

selected product in the current view

- tap anywhere else to close the modal

TRANSITION:

- On tap, the feed view automatically displays

H MONTH NAV– skip to months in advance from

today

GESTURE: tap or slide forward or back to jump to a

specific month/year (current month is always the first

month)

TRANSITION: on tap or slide, the month navigation and

calendar switches out for the selected month

4.2 TRE List: Feed (Landscape)

FEBRUARY

TRE’S


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

DescriptionThis screen is the default landing screen for the app’s

full list and displays every future product in the system.


- user switches from the TRE List (Grid) and TRE List

(Feed) views


- Switch to the grid or calendar views


A LIST HEADLINE – App list name/description

This indicates which list the user is browsing and

includes app name and list description

B FEED – All products in the list

The product list is grouped by month and sorted by

ascending date. Each item includes:

- image



When a product is selected, the user is taken to 7.0

Product Detail Screen.

GESTURE: Swipe list up and down to scroll through

products

TRANSITION: TBC

C CATEGORY FILTERS

This element allows users to turn the 4 categories ‘on’ or

‘off’. All categories are ‘on’ by default.

GESTURE: tap to toggle categories on or off

TRANSITION: on tap, the feed automatically shows

content only in the selected categories

D IMAGE/AD SPACE


- If there is no ad set to display, the view defaults to the

first product in the list


TRANSITION: TBC


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

LIST OF EVERYTHING YOU WANT TO SEE, HEAR & PLAY IN 2011 A

JANUARY B

Feature Image

OR

Ad Space

Music TVMovies GamesC

D

log

o

5.0 Sponsor List: Grid (Landscape)

DescriptionThis screen displays the products that a sponsor TRE

member has chosen to add to their calendar and are

coming up with the soonest release dates.


- user is following this member, and swipes right/left at

the top level

- user switches from the Member List (Calendar) and

Member List (Feed) views

- user selects a member’s featured list from the home

screen

- user selects a member’s list from the List Index




- Follow the member

A BACKGROUND IMAGE FOR ADVERTISER/

SPONSORED LISTS

This allows an editor to define a branded background

image for a list (not for regular member lists)

248x271px248x271px

248x271px

248x271px 248x271px

248x271px

248x271px

FEB 1

Todd and Margaret

FEB 11Cedar Rapids

FEB 5Boy

MMM DD

Product

FEB 13Call of Duty

MMM DD

Product

MMM DD

Product

MMM DD

Product

MMM DDProduct

MMM DDProduct

Advertiser

Background

image

CHESTER’S10 THINGS TO WATCH

WHILE EATING CHEETOSMatch these 10 movies to

CHEETOS® Crunchy Cheese

Flavored Snacks and Chili Cheese

Flavored Baked Corn & Potato

Snacks

MMM DDProduct

Follow

A

5.1 Sponsor List: Calendar (Landscape)


products that a sponsor member has chosen to add to

their calendar that are released during the displayed

month.


- user switches from the Sponsor List (Grid) and

Sponsor List (Feed) views


- Switch to the list or grid views



CHESTER’S 10 THINGS TO WATCH WHILE EATING

CHEETOSFollow

2 3 4 5 6 7 8

9 10 11 12 8 9 15

16 17 18 19 15 16 22

23 24 25 26 22 23 29

30 31 1 2 3 4 5

Cedar Rapids on DVD

Music TVMovies Games 2011



31 1


Ad Space

log

o

5.2 Sponsor List: Feed (Landscape)

Description

This screen is the default landing screen for a sponsor

member’s list in the feed view and shows if no product is

active in the list. This view displays every future product

that a sponsor member has added to their list.


- user swipes up/down from the Sponsor List (Grid) and

Member List (Calendar) views

- user selects a sponsor’s list from the List Index


- Swipe down to the grid view

- Swipe up to the calendar view


- Follow/unfollow member

A IMAGE/AD SPACE


- If there is no ad set to display, the view defaults to the

first product in the list


TRANSITION: TBC

Follow

FEBRUARY



DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

Ad Space

JANUARY

CHESTER’S 10 THINGS TO WATCH WHILE EATING

CHEETOS

log

o

A

6.0 Member List: Grid (Landscape)

DescriptionThis screen displays the products that a regular TRE

member has chosen to add to their calendar and are

coming up with the soonest release dates.


- user is following this member, and swipes right/left at

the top level

- user switches from the Member List (Calendar) and


- user selects a member’s featured list from the home

screen


- user selects a member’s list from Friends




- Follow/unfollow the member

A MEMBER’S FACEBOOK PROFILE PIC

B MEMBER’S NAME & LIST TITLE – Customizable

list name/description

This includes:

- Member’s name

- Member’s customized feed/list description

C FOLLOW/UNFOLLOW BUTTON – Choose to follow

or stop following a member

This allows a user to follow a member (add to followed

list and place grid at top level).

If the user is already following the member, they see an

indicator that they’re following the member with an

option to stop following

GESTURE: tap to follow or stop following

TRANSITION: TBC

248x271px248x271px

248x271px

248x271px 248x271px

248x271px

248x271px

FEB 1

Todd and Margaret

FEB 11Cedar Rapids

Check out upcoming

movies, TV, music

and games to add to

your own calendar

FEB 13Call of Duty

Check out upcoming

movies, TV, music

and games to add to

your own calendar

MMM DD

Product

MMM DD

Product

MMM DDProduct

MMM DDProduct

LUKE’SWINTER OF STAYING

INDOORS

MMM DDProduct

Follow C

B

Profile Pic

A

6.1 Member List: Calendar (Landscape)


products that a particular member has chosen to add to

their calendar that are released during the displayed

month.


- user switches from the Member List (Grid) and



- Switch to the list or grid views



LUKE’S WINTER OF STAYING INDOORS Follow

2 3 4 5 6 7 8

9 10 11 12 8 9 15

16 17 18 19 15 16 22

23 24 25 26 22 23 29

30 31 1 2 3 4 5

Cedar Rapids on DVD




31 1


3029282726

pic

6.2 Member List: Feed (Landscape)

Description

This screen is the default landing screen for a member’s

list in the feed view and shows if no product is active in

the list. This view displays every future product that a

member has added to their list.


- user swipes up/down from the Member List (Grid) and







- Follow/unfollow member

A MEMBER’S FACEBOOK PROFILE PIC

B LIST HEADLINE/MARKER – Member’s list name/

description

This indicates the user is browsing at the top level of a

member’s list and includes:

- member’s username

- member’s customized list description

A

Follow

FEBRUARY



DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

LIST OF STAYING INDOORSLUKE’S

JANUARY

pic

B


DDDD, DD MMMM

Product Detail

(see 7.0)

Album by Artist

Tuesday, 11 JAN

6.3. Member Profile (Landscape)

DescriptionThis screen is a profile for a regular member.


- user taps a member’s profile pic from anywhere in the

app

- user selects a member from their friend list


- Browse member’s friends and followers

- Add/remove a friend

- Select another member to view profile

- Choose to view the selected member’s list

A FOLLOW/UNFOLLOW BUTTON

B USER INFO – Facebook name and pic

C SUMMARY OF USER LIST

Includes:

- number of products in member’s calendar in each

category (color-coded)

- link to member’s list

GESTURE: tap to go to member’s list

TRANSITION: TBC

D USER FRIENDS/FOLLOWERS

Includes:

- list of members user is following

- list of members following the user

GESTURE/s:

- tap headings to expand/contract

- tap member pic/name to visit member profile

- tap follow/unfollow button to add or remove a member

from your ‘following’ list

TRANSITION: TBC

LIST OF MOVIES, TV, MUSIC

& GAMES

SARAH

17Movies

5TV

0Music

0Games

AFOLLOWING (24)

NAME’SLOREM IPSUM DOLOR SIT AMET



FOLLOWERS (0)

Follow






SEE SARAH’S LIST >

+NAME’SLOREM IPSUM DOLOR SIT AMET

+

+

+

+

-

+

+

-

B

C

D

LIKE SARAH’S TASTE?

7.0 My List: Grid (Landscape)

DescriptionThis screen displays the products that the user has

chosen to add to their calendar and are coming up with

the soonest release dates.



- user switches from the My List (Calendar) and My List

(Feed) views

- user selects {Name}’s List from the main nav


- Switch to the calendar and feed views


- Share product details via Facebook or Twitter

A USER’S FACEBOOK PROFILE PIC

B USER’S FEED TITLE AND HEADLINE –

Customizable list name/description

This includes:

- standard ‘MY’ header

- user’s customized feed/list description

C PRODUCT THUMBNAILS – Summary of product


- image





Detail Screen.

GESTURE: TBC

TRANSITION: TBC

248x271px248x271px

248x271px

248x271px 248x271px

248x271px

248x271px

FEB 1

Todd and Margaret

FEB 11Cedar Rapids

Check out upcoming

movies, TV, music

and games to add to

your own calendar

FEB 13Call of Duty

Check out upcoming

movies, TV, music

and games to add to

your own calendar

MMM DD

Product

MMM DD

Product

MMM DDProduct

MMM DDProduct

MYLIST OFAWESOMENESS

MMM DDProduct

B

Profile Pic

CD

E

A

7.0 My List: Grid (Landscape) cont..

D EMPTY TILES – For an incomplete grid

If there are not enough products in the user’s calendar

to fill the grid, the empty spots are empty or filled with a

default image (to be defined during UI design). When a

tile in the grid is selected, the tile flips to show a prompt

to explore (see E). If the user takes no action in 10

seconds, the tile flips back over.

GESTURE:

- tap once to flip

- tap again to go to TRE List (calendar)

TRANSITION: TBC

E EMPTY TILES (FLIPPED) – For an incomplete grid

If an empty tile is selected, the tile flips to show a prompt

to add items to the calendar.

If the user takes no action in 10 seconds, the tile flips

back over.

GESTURE: tap again to go to My List (feed)

TRANSITION: TBC

7.1 My List: Calendar (Landscape)


products that the user has chosen to add to their

calendar that are released during the displayed month.


- user switches from the My List (Grid) and My List

(Feed) views


- Switch to the feed or grid views

- Advance to a month in the future up to 11 months in

advance


A USER’S FEED TITLE AND HEADLINE –

Customizable list name/description

This includes:


- user’s customized list description

B SHARE – Share list with friends

Allows user to post to Facebook or Twitter

GESTURE: tap to share/publish

TRANSITION: TBC

LIST OF AWESOMENESS

A

MY

2 3 4 5 6 7 8

9 10 11 12 8 9 15

16 17 18 19 15 16 22

23 24 25 26 22 23 29

30 31 1 2 3 4 5

Cedar Rapids on DVD




31 1


Share

3029282726

pic

B

7.2 My List: Feed (Landscape)

FEBRUARY

LIST OF AWESOMENESSMY


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

DescriptionThis screen is the default landing screen for the user’s

own list. This view displays every future product that a

user has added to their list.

By default, the very first product in the list displays.


- user switches from the My List (Grid) and My List

(Calendar) views





A PROFILE PIC – customizable list name

User’s profile pic from Facebook

GESTURE: touch to go to user’s profile

TRANSITION: TBC

B LIST HEADLINE/MARKER – Customizable list

name/description

Includes:


- user’s customized list description

C PRODUCT DETAIL

The first product displays by default – see the product

detail screen


DDDD, DD MMMM


DDDD, DD MMMM

A

Product Detail

(see 7.0)


DDDD, DD MMMM

JANUARY


Album by Artist

Tuesday, 11 JAN

pic

B

C

8.0. Profile (Landscape)

DescriptionThis screen is the user’s own profile.

This is the screen where the user can view any stats or

change any of their personal settings/customized

elements.


- user selects Profile from the main nav


- Browse friends and followers

- Add/remove a friend

- Select a member to view profile

- Customize list name

A LOGOUT PROMPT

GESTURE: tap to logout

TRANSITION: on tap,user is logged out and the login

prompt displays

B USER INFO – Facebook name and pic

C LIST NAME – customizable list name

Editable list name.

GESTURE: touch to edit

TRANSITION: on touch, an editable field and the

device’s keyboard displays

D SUMMARY OF USER LIST

Includes:

- number of products in user’s calendar in each category

(color-coded)

- link to user’s list

GESTURE: tap to go to My List

TRANSITION: TBC

You have 2 more Facebook Friends on TRE

LIST OF AWESOMENESS

STEVE

17Movies

5TV

0Music

0Games

C

FOLLOWING (9)


FOLLOWERS (2)

+NAME’SLOREM IPSUM DOLOR SIT AMET

+

MORE (2)

B

EDIT

LOGOUTNOT STEVE? A

D

MY LIST >

E

8.0. Profile (Landscape) cont..

E USER FRIENDS/FOLLOWERS

Includes:

-list of members user is following

- list of members following the user

- list of other Facebook friends on TRE

GESTURE/s:

- tap headings to expand/contract

- tap member pic/name to visit member profile

- tap follow/unfollow button to add or remove a member

from your ‘following’ list

TRANSITION: TBC

8.1. Edit List Name (Landscape)

DescriptionThis screen allows users to edit their list name.


- user selects edit from their profile screen

A CANCEL BUTTON

GESTURE: tap button to cancel edit

TRANSITION: on tap, user is taken back to their profile

screen

B SAVE BUTTON

GESTURE: tap button to save changes

TRANSITION: on tap, the name of the user’s list is

updated and user is taken back to their profile screen

SAVECancel

Device Keyboard

List of awesomeness

AB

9.1. Product Detail: Movie (Landscape)

FEBRUARY

LIST DESCRIPTIONUSERNAME


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

Cedar Rapids

Tuesday, 11 JAN

DescriptionThis is the default screen for product detail (movie)

within the Feed view.


- user has selected a product (movie) from anywhere in

the application


- Add product release to their calendar (or remove)

- Select overview for more detail

- View trailers and images

- Follow 3rdparty links

A PRODUCT MARKER – selected/highlighted

product in feed

This indicates the user is looking at the selected product

in the detail pane

B PRODUCT NAME, FORMAT & RELEASE DATE

This shows the product name, format and release date,

color-coded for the category

C PRODUCT BACKGROUND (OPTIONAL)

Product image or generic background that sits behind

the product detail (for sponsored products)

D SHORT PRODUCT DESCRIPTION – with link to

more detail

Short description or the first x characters of the product

editorial.

GESTURE: tap or swipe to reveal more product editorial

TRANSITION: TBC


DDDD, DD MMMM


DDDD, DD MMMM

CEDAR RAPIDS IN CINEMA FEB 11, 2011



DDDD, DD MMMM

B C

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.


PREVIEW

Caption goes here

D

BUYSee this movie first! Lorem ipsum dolor sit

SHARE

RELEASES F

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

JANUARYA

Pre-order on iTunes

OVERVIEW

pic

HOT!

100 people like this

HRELATED CONTENT

3rdParty link

I

Optional text lorem ipsum

E

G

J

Brought to you by DVDlogo

K

9.1. Product Detail: Movie (Landscape) cont..

E PRODUCT RELEASE FORMATS & DATES –

Format releases with option to add or remove

release from your own calendar

This allows a user to follow a product release (add to

own list). If the user already has the release in their own

list, they have the option to remove.

Release formats for movies are:

- Theater

- DVD

- Blu-ray

- Digital (note: this category may need to be split into

Amazon, iTunes etc.)

GESTURE: tap to add or remove

TRANSITION: TBC

F GALLERY

Gallery includes video (trailers) and images from the

movie.

- All video is embedded from a 3rdparty URL (YouTube

or BrightCove)

- Images may be embedded from a 3rdparty URL or

uploaded by IFC editors

GESTURE: swipe left or right to see videos and images

TRANSITION: TBC

G “LIKE” FUNCTION

Number of users who have “liked” this product page

H SHARE CONTENT – via social networks

Share product release on facebook and Twitter

GESTURE: TBC

TRANSITION: TBC

I BUY LINKS (EXTERNAL)

External links to purchase. There can be 0 or more links

for any movie.

Each item includes:

- thumbnail (optional)

- description (optional)

- link

- link caption

GESTURE: tap to open external link

TRANSITION: TBC

J RELATED CONTENt LINKS (EXTERNAL)

External links to related content. There can be 0 or more

links for any movie.

Each item includes:

- thumbnail (optional)

- description (optional)

- link

- link caption

GESTURE: tap to open external link

TRANSITION: TBC

K OPTIONAL CONTENT SOURCE

Some products may have a ‘source’ (e.g. IMDB or

Electronic Arts etc.) If a product does not have a

source, this field does not display within the app.

The source consists of:

- logo (optional)

- external link (optional)

OVERVIEW CONT..

9.1. Product Detail: Movie (Landscape) cont..

FEBRUARY


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

Cedar Rapids

Tuesday, 11 JAN

DescriptionThis view shows the expanded product detail & editorial

view for a movie.


- user has selected to view the product detail for any

movie

A FULL PRODUCT DESCRIPTION & EDITORIAL – all

movie-specific detail

Includes:

- product description/editorial

- genre

- studio

- cast

GESTURE:

- swipe up/down to scroll through content

- tap to close product detail

TRANSITION: TBCLorem ipsum dolor sit amet

DDDD, DD MMMM


DDDD, DD MMMM

CEDAR RAPIDS IN CINEMA FEB 11, 2011



DDDD, DD MMMM

EDITORIAL DETAIL

Full product editorial goes here. Lorem ipsum dolor sit

amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit





amet. Lorem ipsum dolor sit amet.

GENRE: genre name

STUDIO: studio name

CAST & CREW:

- director

- actor 1

- actor 2

A


JANUARY

PREVIEWRELEASES

pic

9.2. Product Detail: TV (Landscape)

FEBRUARY



DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

TV SHOW, SEASON 3 ON AIR

Tuesday, 11 JAN

DescriptionThis is the default screen for product detail (TV) within

the Feed view.


- user has selected a product (TV) from anywhere in the

application






A PRODUCT RELEASE FORMATS & DATES –






Release formats for TV are:

- On air/on TV

- DVD

- Blu-ray


Amazon, iTunes, Hulu etc.)


TRANSITION: TBC


DDDD, DD MMMM


DDDD, DD MMMM

TV SHOW, SEASON 3 ON AIR MMM DD, 2011



DDDD, DD MMMM



PREVIEW

Caption goes here

BUYSee this first! Lorem ipsum dolor sit

SHARE

RELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

JANUARY

Pre-order on iTunes

OVERVIEW

pic

HOT!


RELATED CONTENT

3rdParty link


A

9.2. Product Detail: TV (Landscape) cont..

FEBRUARY


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

TV SHOW, SEASON 3 ON AIR

Tuesday, 11 JAN


view for a TV series.


- user has selected to view the product detail for any tv

show


tv-specific detail

Includes:


- genre

- network

- cast & crew

GESTURE:




DDDD, DD MMMM


DDDD, DD MMMM

TV SHOW, SEASON 3 ON AIR MMM DD, 2011



DDDD, DD MMMM

EDITORIAL DETAIL




GENRE: genre name

NETWORK: network name

CAST & CREW:

- director

- actor 1

- actor 2

A


JANUARY

pic

PREVIEWRELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

A

9.3. Product Detail: Music (Landscape)

FEBRUARY



DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

ALBUM BY ARTIST ON CD

Tuesday, 11 JAN

DescriptionThis is the default screen for product detail (Music)



- user has selected a product (music) from anywhere in

the application












Release formats for Music are:

- CD


Amazon, iTunes, Hulu etc.)


TRANSITION: TBC

B RELATED CONTENT LINKS (EXTERNAL)

Note that the external content links may also include

links to audio files in Apple’s supported formats: HE-

AAC (V1), AAC (16 to 320 Kbps), Protected AAC (from

iTunes Store), MP3 (16 to 320 Kbps), MP3 VBR,

Audible (formats 2, 3, and 4), Apple Lossless, AIFF, and

WAV


DDDD, DD MMMM


DDDD, DD MMMM

ALBUM BY ARTIST ON CD MMM DD, 2011



DDDD, DD MMMM



PREVIEW

Caption goes here

BUYListen to this first! Lorem ipsum dolor sit

SHARE

RELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

JANUARY

Pre-order on iTunes

OVERVIEW

pic

HOT!


RELATED CONTENT

External link

Listen to xxxx now

A

B

9.3. Product Detail: Music (Landscape) cont..

FEBRUARY


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

ALBUM BY ARTIST ON CD

Tuesday, 11 JAN


view for a music release (album or single).



music release


music-specific detail

Includes:


- genre

- label

GESTURE:



TRANSITION: TBC


DDDD, DD MMMM


DDDD, DD MMMM

ALBUM/SINGLE BY ARTIST MMM DD, 2011



DDDD, DD MMMM

EDITORIAL DETAIL




GENRE: genre name

LABEL: label name

A


JANUARY

pic

PREVIEW

Caption goes here

BUY

RELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

HOT!


9.4. Product Detail: Games (Landscape)

FEBRUARY



DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

GAME TITLE DEMO

Tuesday, 11 JAN

DescriptionThis is the default screen for product detail (games)



- user has selected a product (games) from anywhere in

the application












Release formats for games are:

- Demo

- XBOX 360/Kinect

- PlayStation/Move

- Wii

- DS/Dsi/3DS

- iPhone/iPad

- Android

- Digital (note: this category may need to be split)


TRANSITION: TBC


DDDD, DD MMMM


DDDD, DD MMMM

GAME TITLE DEMO MMM DD, 2011



DDDD, DD MMMM



PREVIEW

Caption goes here

BUYPlay this first! Lorem ipsum dolor sit

SHARE

RELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

JANUARY

Pre-order on iTunes

OVERVIEW

pic

HOT!


RELATED CONTENT

3rdParty link


A

9.4. Product Detail: Games (Landscape) cont..

FEBRUARY


DDDD, DD MMMM


DDDD, DD MMMM


DDDD, DD MMMM

GAME TITLE DEMO

Tuesday, 11 JAN


view for a game release.



game release


game-specific detail

Includes:


- genre

- publisher

- developer

GESTURE:




DDDD, DD MMMM


DDDD, DD MMMM

GAME TITLE FORMAT MMM DD, 2011



DDDD, DD MMMM

EDITORIAL DETAIL




GENRE: genre name

PUBLISHER: publisher name

DEVELOPER: developer name

A


JANUARY

pic

PREVIEW

Caption goes here

RELEASES

- RemoveFormat

icon

+ AddDVDFormat

icon

+ AddDVDFormat

icon

MMM DD, YYYY

MMM DD, YYYY

MMM DD, YYYY

9.5. Product Detail: Related Links (Landscape)

DescriptionThis screen shows external product links.


- user has selected an external ‘buy’ or ‘content’ link

from any product page


- Browse the external page/site

- Use the app’s nav to return to any app content

A EXTERNAL CONTENT

External content displayed within app shell.

TREBack

WWW

MENU V

A

10.0 Help/Tips (Landscape)

DescriptionThe help/tips modal explains how users should navigate

through the app with swiping and multi-touch

interactions.

The user arrives here if they have selected ‘Help’ from

the main nav.

A TIPS MODAL

This includes text and/or images decides to demonstrate

interactions.

GESTURE:


TRANSITION: TBC

HELP/TIPSLorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed ac adipiscing eros. Curabitur nec massa

eget massa luctus interdum. Ut non feugiat arcu.

Nam et ligula massa. Proin porttitor nibh lobortis nulla

suscipit sit amet viverra quam imperdiet.

Pellentesque et urna sed nisi tincidunt pharetra.

Curabitur laoreet urna et lacus tempus eget congue

justo molestie. Nullam accumsan commodo enim,

nec congue lorem pharetra sed. Etiam sit amet mi

arcu.

Image

Image Image

A

TRE

Picks

{Name}’

s List

MENU V

PopularHome

Help Login/out

Profile

11.0 Login (Landscape)LOGIN VIA FACEBOOK CONNECT

DescriptionThe login dialog/s display whenever the user is not

logged in and they take an action that requires

identification (e.g. add to list, share)

Facebook Login

Login to your Facebook account with TRE.

Email or Phone:

Password:

Sign up Forgot your password?

Login

11.0 Login (Landscape) cont..EXTENDED PERMISSIONS VIA FACEBOOK CONNECT

DescriptionThe login dialog/s display whenever the user is not

logged in and they take an action that requires

identification (e.g. add to list, share)

Request for Permission

TRE is requesting permission to do the

following:

Access my basic information

Lorem ipsum dolor sit amet lorem ipsum dolor

sit amet

Post to my Wall

Lorem ipsum dolor sit amet lorem ipsum dolor

sit amet

Don’t Allow Allow

12.1 Share via Facebook

DescriptionThe Facebook publish dialog displays whenever the

user chooses to share.

If the user has chosen to share a list:

- Description = TBC

- Link = TBC

If the user has chosen to share a product:

- Description = TBC

- Link = TBC

Publish Story

What’s on your mind?

TRE: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet lorem ipsum

dolor sit amet

Skip Publish

12.2 Share via Twitter

DescriptionThe Twitter login dialog displays whenever the user

chooses to share.

If the user has chosen to share a list:

- Tweet = TBC

If the user has chosen to share a product:

- Tweet = TBC

Cancel

LOGIN

PASSWORD

13.0 Supplementary ScreensLOST CONNECTION DIALOG

DescriptionThe lost connection dialog box displays whenever the

user loses connection.

Oops, it looks like you don’t

have any data connection.

Please check your

connection and try again.

Close

13.0 Supplementary ScreensERROR DIALOG

DescriptionThe error dialog box displays whenever there is a

problem retrieving or saving information.

Oops, there seems to be a

{error type} problem. Please

try again.

Close

IFC–Calendar & Recommendation System iPad Wireframes and...

Documents

Transcript of IFC–Calendar & Recommendation System iPad Wireframes and...