Upload
archisonic
View
972
Download
2
Embed Size (px)
DESCRIPTION
I like to describe my work as'designed information experiences'
Citation preview
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Designed
Information
Experiences
Jeffrey Greene interactive art direction & UI design portfolio 2008
Visual Culture
Mass Information
User Behavior
There is still always a real-world ‘experience’ economy.New media compliments it, but does not replace it.
• IDD sample doc, web publishing system for easy site updates and site maintenance
• Revelations Entertainment design of website for film production company
• ESPN Action Sports Awards design & fabrication of ‘...and the winner is’ CD envelope; Hollywood Ave TV show website
• ((move)) dvd series and 5.1 dance club; Techno Space dvd concept and producer with Pioneer and Dolby Labs
• espn action sports awards design & art direction for
• ((move)) 5.1 dvd and club gn • audio signage (concept) oncept and design of promo package
• ‘Karma’ writer/director; 2nd place winner ProjectFAIR• Jersey Docs weekly promo package• OP p.o.p. display design for flat-mailed CD stand• ‘The Parking Garage’ script for short film for Toyota• Museum of the African Diaspora Toussaint L’Ouverture
designed information experiences
Words and image must be of one goal,
and communicate asingular message.
Simple organization and clear visual
hierarchy leadthe eye.
Learn from the brain.Be simple, intuitive and playful.
UI: Good user interfaces are increasingly necessary to
sort and filter vast amountsof information ‘Everything all
the time’ begets the ‘paradox of choice.’
UX: Behavioral archetypes are more fertile than demographics.
At different times, we are all hunters, gatherers & wanderers.
• i::design design director, writer & co-director of episodic TV series
• new wave entertainment art direction, motion graphics & design for DVD, HD-DVD, & Blu-Ray
• clickstar (cstar.com) creative director & lead designer of on-demand movie download service
• IDD sample doc; wireframe concepts for v3.0 discovery interface and 10 foot Vista interface
• email/wireless notifications, workflow and data entry system
• Quicklook TV concept and UI for interactive TV (in development)
designed information experiences
jeffrey greene
• Audio Signage (concept- ADA compliant) multi-channel audio ‘points’ to other lines, street exits, etc.
show-offs and voyeurs
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
Jeffrey Greene interactive art direction & UI design [email protected]
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes TRT Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - SCENE BREAKDOWN (phase 1)
SCENE BREAKDOWN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: 00 : 00
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC in TC out Nickname Last
00 21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
: :
Scene # TC In TC Out Last Nickname SCENE BREAKDOWNEnter timecode (TC) for end of scenes only.(automatically fills in same time as start of next)
Enter nickname for scene.
Identify final scene (check box)(this info then feeds # of scenes and Total Run Time (TRT) in Header)
MOVIE HEADER
Title; Ratings; Year of Release; Studio; Title ID
Jeffrey Greene interactive art direction & UI design
This section will focus on CStar’s front-end user interface, and will detail the overall approach and strategies we employed to satisfy our target users:
User Experience
Jeffrey M. Greene, Creative DirectorAugust 2007
xx
User Experience
The following pages will illustrate the evolution of CStar: from Launch v.1.0 to a Beta 2 redesign, and forward to concept prototypes for a 3.0 which gathers the tremendous amount of knowledge we acquired in this still nascent field of broadband movie delivery.
Sharingv.1.0 launch
Beta 2
3.0 concepts
User Experiencehome
search
itempage
promotepage
purchaseflow
Navigation
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight, and a text message of PICK A CHANNEL is added. Likewise, the SUB-CATEGORIES have less prominence to the user’s eye and recede into the background.
However, the goal of any navigation should be to be invisible. Linking should happen primarily through promotes as much as possible.
All CStar content is organized into CHANNELS. The vertical ‘remote control’ nav bar is a familiar visual cue that suggests entertainment.
12
Studies have posited that internet users utilize an ‘F’-shaped eye pattern when scanning a page. (MediaPost Search Insider, June 12, 2007)The vertical ‘remote’ does not subscribe to this and may account for initial user confusion.
1An interim mock-up (left) illustrates the ‘F’ pattern by putting rich featured content along the top, site navigation horizontally along the middle, and SEARCH at the bottom left.
2
13
User Experiencehome
search
itempage
promotepage
purchaseflow
Presentation
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the number of clicks necessary to get to desired content. It also reduces the number of sub-categories necessary in each channel.
More promotes translates to longer time on each page, as do TABBED BOXES, which offer quicker, immediate access to dynamic information (new releases, top downloads, contests, etc,). The denser layout also improves the visual hierarchy by juxtaposing the larger B promote with the much smaller 7-Bar Thumbnails.
We also efforted better messaging of ‘free’ and ‘exclusive’ content (previews; articles) to highlight our distinguishing features that cannot be found elsewhere.
A more streamlined programming strategy gives theuser a more intuitive understanding of the site.
1.2.0
v. launch
3.0
05
User Experience
A cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
Our ARTIST-CREATED CHANNELS take advantage of the STAR POWER that our founders have access to and give users a peek at the movie collection of their favorite stars.
STUDIO CHANNELS feature titles in a way consistent with a studio’s existing and valuable BRAND,..from the big majors to the small independents.
PERSONALIZED CHANNELS allow the user to program and manage their own library.
home
search
itempage
promotepage
purchaseflow
Content OrganizationA cornerstone of CStar’s v.1.0 strategy was theconcept of CHANNELS. This provided a way to GUIDEusers through the huge choice of titles, as well as creatingan opportunity to create BRANDS.
The unlimited ‘shelf-space’ of the internet creates an interesting dilemna: ANYTHING ANYWHERE ANYTIME can be overwhelming. As a way of organizing all this content, we borrow a familiar concept from television: CHANNELS.
GOT IT SEEN IT WANT IT
15
User Experience
An important bridge between DISCOVERY and SHARING is the concept of TAGSETS.
Many movie fans are collectors, and love to show off and display their prized possessions. TAGSETS are the digital version of this: user-generated tags that let you list, label, manage, and share any movie on CStar:
But even better than your living room library, not only can you show off what movies you own (like an endless DVD shelf), but also show friends what movies you’ve seen, and even what you want to see.
The real fun comes when you SHARE TAGSETS. Your icons can be overlaid globally, so wherever those thumbnails appear, so do your tags. So while browsing, I can see what movies my cousin might want for his birthday, or what movies Morgan Freeman has been watching lately, or even remind myself of what I want to see.
TAGSETS include ratings, a comments field, and the ability to create customizable lists which appear on the USER PROFILE page. TAGSETS are also sortable, and can act as customizable tools to creat personalized media managers, reminders, and filters.
1
home
search
itempage
promotepage
purchaseflow
User Profiles
20
User Experience
GROUPINGS offer a clear and scalable organizational strategy that practically bursts with SURPRISE AND DELIGHT.
GROUPINGS creates an interface that mimics the more associative, ‘fuzzy’ way the brain relates things to each other and learns.
Any movie can belong to 5 or 15 or 50 groupings: GREAT CINEMATOGRAPHY or BREAKOUT ROLES, or MOVIES IN SPACE. Or even the more familiar ACTION or ROMANCE or BIO PICS. By surrounding each movie with all its associated groupings, a user intuitively keys in on what particularly interests them about the film, and quickly and accurately DISCOVER other similar titles. GROUPINGS facilitate unexpected juxtapositions, and reward the user with WHY they are related.
GROUPINGS are transparent, flexible, and open to user contribution. Add INTELLIGENCE to it and you have an extremely powerful RECOMMENDS engine.
Pure Discovery
Like wandering the aisles of a store, people enjoy the jolt of the UNEXPECTED. When you go to a video store to rent SIN CITY, you’ll walk by new releases and the bargain bin and even the M’s and T’s and other S’s before glancing SIN CITY. Odds are you’ll walk out with another movie or two based on what else catches your eye. GROUPINGS are an intelligent and dynamic application of this. In effect, they are ‘SMART’ shelves.
1As an example, the aviation film ONE SIX RIGHT will appear alongside CITIZEN KANE in a GREAT CINEMATOGRAPHY grouping, but next to FAHRENHEIT 911 in a Documentaries group. Or the SURPRISE of seeing 300 and MAN WITH THE GOLDEN ARM, two very different movies, both appear in a GREAT MUSICAL SCORES grouping.
An internal analysis of Apple’s iTunes/iPod shows that an inter-device experience can be consistent while not identical. Simply put, you cannot buy a song on an iPod. That is left to the iTunes computer interface. It’s a 2-part system: DISCOVER AND BUY on one. CHOOSE AND LISTEN on the other. Similarly, we BROWSE AND BUY at CStar.com and CHOOSE AND WATCH on the TV.
17
A more television-friendly approach to the 10’ experience focuses on CHOOSE AND WATCH, leaving BROWSE AND DISCOVER to the 2’.
The TV remote control offers precious few moves- LEFT RIGHT UP DOWN ENTER. This, however, can be used to SIMPLIFY the organization of content. Fewer navigational levels and fewer screens are a must when designing a TV-based interface.
The desire to move away from a page-oriented site on the 2’ dovetails nicely with a new 10’ concept, as do the capabilities of Windows Media Center on Vista.
Sliding, spatial transitions are intuitively more understandable and provide a less confusing, more pleasant navigational experience.
10’ Vista
User Experience
1
home
search
itempage
promotepage
purchaseflow
19
User Experience
Concepts for a new interface and user experience that continue to expand a user’s ability to SHARE and DISCOVER.
Looking Ahead: 3.0
25
User Experience
Specifics on Page Templates and Art Assets
Site Art Style Guide
“Ferris Wheel’ Channel Sprites-336 pixels x 39 pixels
Background- 1000 pixels x 842 pixels
Font Usage
‘Carousel’ Category Sprites-variable x 141 pixels
Idle
Idle
Rollover
Rollover
Active
Active
Global Art
27
User Experiencehome
search
itempage
promotepage
purchaseflow
Specifics on Global Nav Art and Font Styles
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53)
Helvetica- body text
Helvetica- body href (hex #43439B
B loader- 445 pixels x 250 pixels
C promote- 240 pixels x 180 pixels
Thumbnails- TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixelsTN2- 153 pixels x 105 pixels
Specifics on B; C; E; Thumbnails 2/7/10
Promotes
User Experience
28
home
search
itempage
promotepage
purchaseflow
Every movie title gets a standard set of images created from the art we receive.
We attempt to distinguish ourselves by having our feature promote spaces (B & C) horizontally-
composed, in keeping with the aspect ratio and imagery of the film.
Only in List View do the thumbnails resemble DVD key art.
Lists Box
7-Bar
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Dynamic Content
31
User Experiencehome
search
itempage
promotepage
purchaseflow
To compliment the ‘title-specific’ movies promotes, we also
populate the page with other quicker, cursory information:
top downloads lists, new releases, trivia, and
article teases.
CStar Home
Channels Sub-Categories
Now Playing Close-Ups NewReleases
Now Playing DannyConfidential
All JDocsMovies
Now Playing Peter’s Screening
Room
All Golden Age Movies
Now Playing Thoughtspots All Our Space Movies
Now Playing Reviews
Now Playing Coming Soon
Now Playing Staff Picks
Action Comedy Drama Family Horror Sci-Fi Thriller
Action Comedy DramaDocumentaries Family MusicalsHorror Sci-Fi Thriller
CStarOriginals
All CStarMovies
Take theTour
Jersey Docs
Golden Ageof Movies
Our Space
Lonely Hearts
Now Playing Behind-the-Scenes
10 Itemsor Less
Sony Pictures
See AllMovies
Now Playing One Six Right All HD MoviesCStar HD
My Collection
CStar Originals
First Time Here?
Site Map
38
User Experience
26
User Experiencehome
search
itempage
promotepage
purchaseflow
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
Publishing templates used on CStar
Page Types
Borders & Messaging
30
User Experience
Each Artist-Created and Studio Channel has custom borders on its promotes to further brand and
distinguish them. The SWOOSH denotes exclusive or FREE content across the entire site.
home
search
itempage
promotepage
purchaseflow
Jersey Docs Distessed BorderOur Space Portal Border Golden Age Deco Border
Site Programming Strategy
32
User Experiencehome
search
itempage
promotepage
purchaseflow
Planned REDUNDANCY guarantees several
routes to a title’s item page: through various individual PROMOTES,
by genre groupings, and by direct search.
40
User Experience
Specifics on Item Page
1
home
search
itempage
promotepage
purchaseflow
JERSEY DOCS CHANNELNow Playing
08.08.07
The REVELATIONS WEB SITE is considered a TOOL, not simply an archive. It is a LIVING VISUAL DOCUMENT that traces the entire lifespan of a movie, from DEVELOPMENT to PRODUCTION and through RELEASE. Just as important, the site is also is a reflection of the people that make up REVELATIONS - a showcase for their energy and talent.
The creation, input and display of information is an integrated PROCESS. This site aims to make it simple and rewarding, thereby encouraging frequent contributions and updates.
HOME PAGE
The REVELATIONS HOME PAGE shouts ‘WE MAKE MOVIES.’The imagery is inspirational and distinctive, and the emotion-filled tagline is prominent.
The site strives to give visitors a well-rounded look at the entire process of moviemaking, and a peek at the people who make up the Revelations team.
It’s as much of a ‘magazine’ feel as the slow pace of filmmaking and the realities of updating will allow. Yet it must stay fresh and full of energy, so visitors (and investors) feel like REV is buzzing with activity.
Taglinealso links to About Us page
QuickLink PulldownDirect access to individual movie titles.
Link to a Movie
10 Items or Less
Rendezvous with Rama
Jazz Ambassadors
Under Suspicion
The Code
Levity
The Lonely Maiden
Remembering Venice
Bopha
Mutiny
xxxxxxxxx
xxxxxx xxxxxxx
MorganFreeman
Film & TV DigitalRevelations
About Us
SITE NAVIGATION
The navigational MENU is clear, the FEATURES STRIP shows top movies and articles, and a QUICK LINK pull-down menu gives direct access to any movie.
The 4 nav categories are:Morgan FreemanFilm & TVDigital RevelationsAbout Us
Each leads to an index page with one featured piece of content teased and a listed archive of the rest.
However, as we’ll see, DISCOVERY is encouraged through RELATED LINKS moreso than menu navigation.
FEATURES STRIPcontains 5-9 links, showing 4 at a time. Scrolls automaticallyafter 10-15 secs. Also User navagable with arrows.
Navigational categories
1:04 / 1:53
Click to close
To keep clicking and unique pages to a minimum, expandable fields will be used when possible.The TRAILER video player and PHOTO GALLERIES will keep you on the movie page and reduce any back-tracking.
Photos
WEBSITE PUBLISHING FORMS
The Revelations web site is meant to be a tool, not simply an archive. Think of it as a public-facing project management system. In order to make it a tool, updating must be EXTREMELY SIMPLE. The goal below is an easy-to-use web publishing interface where information is entered, previewed, and published live to the site. The data is translated to dynamic and flexible page templates automatically.
FRONT PAGE The front page has a user log-in to track changes and a simple menu of options. The taxonomy of the site is kept simple to allow easy updates and organization:There are only MOVIE PAGES orARTICLE PAGES. Higher level validation may be required for to create a MOVIE PAGE, for example, than to EDIT an article page.
REVELATIONS WEBSITEPUBLISHING FORM
CREATE / EDIT ARTICLE PAGE
CREATE / EDIT STAFF PAGE
CREATE / EDIT MOVIE PAGE
please log in:
edit category front pages
WEBSITE PUBLISHING FORMS
The main building block of the site are MOVIE PAGES, which track information over the entire lifespan of a project. The STATUS of the movie (IN DEVELOPMENT; IN PRODUCTION; IN RELEASE) dictates which information is displayed and how.
This index page lets you CREATE a new movie project or EDIT an existing one from the list of all movie projects. Quick links identify their current status and a checkbox indicates if they should appear in the home page strip.
DATE TITLE HOME PAGE STATUSin dev in prod released
MOVIE PAGES CREATE NEW MOVIE PAGE
06.2006
3.1997
08.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
10 Items or Less
Along Came A Spider
The Code
Feast of Love
The Human Factor
The Jazz Ambassadors
Levity
Lonely Maiden
Memory of a Killer
Mutiny
Remembering Venice
Rendezvous with Rama
Surprise
Under Suspicion
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
show strip position
4
2
1
2
WEBSITE PUBLISHING FORMS
IN DEVELOPMENT data tab:The default status after creating a new movie is IN DEVELOPMENT.Here the basic information starts to be gathered: TITLE, KEY ART, SHORT DESCRIPTION, ATTACHED TALENT, etc. These are living documents that expand as the movie moves towards reality.
IN PRODUCTION data tab:When a movie is greenlit, its STATUS is changed to IN PRODUCTION. More information fields become available for input and display. CAST, CREW, LOCATIONS, ON-SET PICS gallery, etc.. The published movie page changes to a new template to reflect this added info (though not all info entered needs to be seen live).
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
SHORT DESCRIPTION
ATTACHED TALENT
ANNOUNCMENTS 1
2
3
IMAGES
TITLE
CREATION DATE
STATUS
OFFICAL SITE URL
STRIP TITLE / TEXT
in development in production released
do not show
(137 x 200)
(285 x 185)
KEY ART
STRIP ART
more
choose article
(75 words max)
DEVELOPMENT phase RELEASED phasePRODUCTION phase
back to movie index
DATE STARTED
PRODUCERS
FINANCIERS
ACTORS
DIRECTOR
WRITERS
CREW
LOCATIONS
PRODUCTION NOTES
ANNOUNCEMENTS 1
2
3
IMAGES
do not show
PUBLISH TO WEBPREVIEWCREATE NEW MOVIE
TITLE
CREATION DATE
STATUS
OFFICIAL SITE URL
STRIP TITLE / TEXT
in development in production released
# SHOOTING DAYS
more
RELEASE phaseDEVELOPMENT phase PRODUCTION phase
back to movie index
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
choose article
create new gallery
choose article
choose article
choose article
choose articleChoose file...
Choose file...
Choose file...
WEBSITE PUBLISHING FORMS
DATE TITLE HOME PAGE AUTHOR
ARTICLE PAGES CREATE NEW ARTICLE
06.24.2008
02.18.2008
12.23.2007
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
xx.xxxx
Revelations at Cannes Festival
Utah Saints: Report from Sundance
The Code Wraps Shoot
Tkdnwef fsf fgts sdfsd dfb fd sdf sdf
LKJNE fd sdf f gdssadf gghnfgb sd sd fgn
JKefrfgd gdgsd dfvdsffsd
Jgdrg fthsd sdf dsfb gbndfsdfgb gn dfsd
xx.xxxx
The Future of Moviemaking
Morgan on the set of The Bucket List
xx.xxxx
Ryan Dornbusch
Jeffrey Greene
Lori McCreary
Tracy Mercer
Torin Rea
Tdfgver dfvdsfvfda
Lfvsdfgv dfrgvsadfg
vsrfv fverfvewarfv
Sam Edge
Morgan Freeman
sdfergsdf sfdvsdfvds
ARTICLES INDEX PAGEThe other type of page on the site is an ARTICLE PAGE. These are listed with quicklinks to the CATEGORY it is part of and also whether it should appear in the strip on the home page.
NEW ARTICLE PAGEThese pages are simple HTML forms for the surrounding content on the site.
PUBLISH TO WEBPREVIEWARTICLE PAGE
TITLE
BY
AFFILIATION
DATE
EXTERNAL URL
STRIP TITLE/TEXT
TEXT
STRIP IMAGE
do not show
back to articles index
back to main
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
user: JEFFREY GREENE log outREVELATIONS WEBSITE PUBLISHING FORM
X
X
X
X
X
X
X
X
X
X
X
X
X
show strip position
Choose file...
(285 x 185)
3
5+
5+
sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Location
Actors
Music
Vehicles
Clothing/Decor
Food & Drink
Back to Movie
Tech NotesLocation: Theodor Hotel, Jackson Hole, Wyoming.... Scene Grab Gallery
My Settings
“Who sings this song?”
“What’s that guy from?”
“Cool car. ”
“Nice watch. ”
“Where is that? ”
...or during The Godfather, “Man, that dinner looks tasty.”
How many times watching a movie have you thought:
or
QUICKLOOK WORKFLOW
REQUEST MOVIE FROM STUDIO digital file visible timecode EPK / documentation
MOVIE PREP load movie into server watch movie grab, print & OCR credits into electronic form create new movie project in database scene breakdown (mark TC ins/outs)
FIRST PASS mark visible categories for each scene enter master info from credits and studio docs print out status grid for initial review
EXTERNAL RESEARCH external research (web, books) direct contact (email, phone) fill in remaining fields
QC fact check / spell check / links check publish data set to live server
review
publish
receive assets
0
1
2
3
4
5 weeks per title;6-8 at a time
week 1
weeks 2, 3, 4
week 5
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
QUICKLOOK DATA ENTRY FORMS - MASTER INFO FIELDS AND SCENE GRID (phases 2 & 3)
actors
location
music
vehicles
clothes/decor
food & drink
tech notes
actors
location
music
MASTER INFO FIELDS
SCENE GRID
add actor....
add location....
add music....
add vehicle....
add clothes....
add food....
add tech....
1 2 3 Scene 4 5 , 6 , 7 , 8 , 9 , 10 . . . . . . . . . . . . . . . . . . 49 50 51 52
MASTER INFO FIELDS
Enter data from credits and studio documentation.
Tab-separated text feeds pull-down menus (see below).
SCENE BREAKDOWNS
Status grid shows visible categories for each scene, whether data is needed ( )or data is entered ( ).
Expandable tabs for quick access to data for individual scenes (timecode and nickname pulled from previous screen)
Pull-down menu to choose info from master list- allows global changes and minimizes mistakes and repetitive re-entry.
Further expandable fields for IM/email detail text, links and screenshot
00:05:21 - 00:06:06‘At the saloon’
The Quicklook experience is flexible and easy. You command what you see and when you see it...
WHY WAIT FOR THE CREDITS?
I want to know NOWWith a simple click, the
QUICKLOOK view appears. Just
scroll up or down with your remote
to show info on the ACTORS, the
LOCATION, the MUSIC....CARS,
CLOTHES....even the recipe for
making Sasparilla. If it’s in that
scene, it’ll show up on the bottom
of the screen- as the movie keeps
playing! No disruption.
1968 Ford Mustang 390 Fastback;1968 Dodge Charger R/T 440 Magnum
icon indicates more info available
YOU’RE IN CONTROL
if you want more
information (like maybe a map
of the car chase in BULLITT)
one last click automatically
pauses the movie and brings
up the DETAIL view. This lets
you forward more detailed
info and links to your email, IM,
or cell phone for later
perusal....
...NOWSteve McQueen drives a 1968 Ford Mustang 390 Fastback. An accomplished driver, he actually drove some of the chase, but did in fact have a stunt driver (Ed Peck) for some of the chase
more...
Vehicles
Let the television offer instantaneous bits of info without disrupting the experience of the program. Leave the more intensive and focused work for later on the computer.
The scene from “Bullitt’ you grabbed was shot around San Francisco, CA.
links for more information:
www.sanfrantours.comwww.presidio.com
Click to see all Bullitt locations
Your Quicklook request is here
Location
THIS IS INTELLIGENT CONVERGENCE
If you can wait until the end of the movie, you’ll be asked if you
want to go to the SCENE LIBRARY, where you’ll be able to pick from your GRABS and easily find
the answers to your questions.
....or wait til LATER.
In the Basement
starring
John TavolataJames Gandolfini
Selma HayekJared Leto
and Scott Caan
Assistant Director
Do you want to view yourScene Grabs now?
QUICKLOOK DATA ENTRY FORMS - PUBLISH DATA (phase 4)
ADDITIONAL WEB FEATURES
email providing detailed info alsolinks to that title’s Quicklook movie page.
Games/trivia contests within email of new titles
Ability to sort info by category, across scenes, and cross-referenced across other titles (ie. all movies shot in Wyoming or with Toyotas).
Share interesting info and links or share with friends (”Where was _________ shot?”)
THE MAN FROM LARAMIE PG 1941 Paramount Studios
Total # Scenes 52 01:36:43 (TRT) Title ID: 012345
PUBLISH TO DIGITAL CABLE SPEC 01
PUBLISH TO BLU-RAY 2.0 SPEC
QUICKLOOK TVCONFIDENTIAL © 2008 Jeffrey Greene