I like to describe my work as 'designed information experiences'

1. designed information experiences
Visual Culture
Mass Information
User Behavior
Jeffrey Greene
interactive art direction & UI design portfolio 2008

2. ice
d m ov ie do wn lo ad se rv
Designed de sig ne r of on -d em an
cr ea tiv e di re ct or & le ad
• cl ic ks ta r (c st ar .c om )
Words and image must
be of one goal,
and communicate a
singular message.
Simple organization
and clear visual
hierarchy lead
the eye.
• ID D sa m pl e do c; w ir
ef ra m e co nc ep ts fo r v3 .0
di sc ov er y in te rf ac e
an d 10 fo ot Vi st a
in te rf ac e
Jeffrey Greene interactive art direction & UI design

3. ic T V se ri e s
e ct o r o f e p is o d
ir
r, w ri te r & co -d
d e si g n d ir e ct o
• i: :d e s ig n
• new wav
e e n t e r t a in
m e n t a r t d ir e
c ti o n , m o ti o n g r a
p h ic s & d e
s ig n fo r D V
D, HD-DVD
, & B lu - R a y
Jeffrey Greene interactive art direction & UI design

4. • Quicklook TV concept and UI for interactive TV (in development)
Information
Learn from the brain.
Be simple, intuitive and playful.
UI: Good user interfaces are
increasingly necessary to
sort and filter vast amounts
of information ‘Everything all
the time’ begets the
‘paradox of choice.’
UX: Behavioral archetypes are
ystem
ntry s more fertile than demographics.
data e
w and
o
workfl At different times, we are all
tions,
a
notific hunters, gatherers & wanderers.
eless
wir
email/
•
Jeffrey Greene interactive art direction & UI design

5. • R e v e la ti o n s
E n te r ta in m e n t
d e s ig n o f w e b
s it e fo r fi lm p ro
d u c ti o n c o m p a
ny
an ce
an d si te m ai n te n
ea sy si te u p d at es
fo r
u b lis h in g sy st em
m p le d o c, w eb p
ID D sa
•
Jeffrey Greene interactive art direction & UI design

6. Experiences
There is still always a real-world ‘experience’ economy.
New media compliments it, but does not replace it.
• ((move)) dvd
s e ri e s a n d 5 .1
d a n c e c lu b ; T e c
hno Space dvd
co n ce p t a n d p ro
du ce r w it h P io n e e
r a n d D o lb y L a b
s
T V sh o w w e b si te
; H o ll yw o o d A ve
lo p e
in n e r is ’ C D e n ve
o f ‘. .. a n d th e w
ti o n
d e si g n & fa b ri ca
rt s A w a rd s
S P N A c ti o n S p o
•E
Jeffrey Greene interactive art direction & UI design

7. r lin es , str ee t ex its , et c.
nn el au dio ‘p oin ts’ to ot he
A co m pl ia nt ) mu lti -c ha
di o Si gn ag e (c on ce pt - AD
• Au
Jeffrey Greene interactive art direction & UI design

8. jeffrey greene
designed information experiences
• ‘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
Jeffrey Greene interactive art direction & UI design

9. sample idd documents
ClickStar
Revelations Entertainment
Quicklook
Jeffrey Greene interactive art direction & UI design

10. User Experience
Site Map
Sub-Categories
Channels
Close-Ups New CStar All CStar Take the
CStar Home Now Playing Releases Originals Movies Tour
User Experience Danny All JDocs
Jersey Docs Now Playing
Confidential Movies
Peter’s
Golden Age Now Playing All Golden
Screening Age Movies
of Movies Room
This section will focus on CStar’s front-end user
All Our Space
interface, and will detail the overall approach and Our Space Now Playing Thoughtspots
Movies
strategies we employed to satisfy our target users:
Lonely Now Playing Reviews
Hearts
10 Items Behind-the-
Now Playing
Scenes
or Less
CStar HD Now Playing One Six Right All HD Movies
Sony Action Comedy Drama Family Horror Sci-Fi Thriller
Now Playing Coming Soon
Pictures
See All Action Comedy Documentaries Drama Family Horror Musicals Sci-Fi Thriller
Now Playing Staff Picks
Movies
My Collection
CStar Originals
Jeffrey M. Greene, Creative Director
First Time Here?
August 2007
38
User Experience User Experience search
promote purchase
home
page flow
item
page
Content Organization
The unlimited ‘shelf-space’ of the internet creates an
A cornerstone of CStar’s v.1.0 strategy was the
interesting dilemna:This provided a ANYWHERE ANYTIME can be
concept of CHANNELS. ANYTHING way to GUIDE
users through the huge choice of titles, as well as creating
overwhelming.createa BRANDS. organizing all this content, we
an opportunity to As way of
borrow a familiar concept from television: CHANNELS.
aring A cornerstone of CStar’s v.1.0 strategy was the
concept of CHANNELS. This provided a way to GUIDE
users through the huge choice of titles, as well as creating
an opportunity to create BRANDS.
v.1.0 launch 3.0 concepts
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.
Beta 2
.0
PERSONALIZED CHANNELS allow the user to program and manage
their own library.
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
1
which gathers the tremendous amount of knowledge we acquired in
this still nascent field of broadband movie delivery.
v. launch
2.0
3.0
xx 5

11. User Experience User Experience
search
search
promote purchase
home promote purchase
home
page flow
item page flow
item
page
page
Navigation Presentation
All CStar content is organized into CHANNELS. The A more streamlined programming strategy gives the
vertical ‘remote control’ nav bar is a familiar visual cue user a more intuitive understanding of the site.
that suggests entertainment.
A denser PROMOTE TEMPLATE increases ‘stickiness’ and reduces the
In the Beta 2 redesign,, the left side ‘REMOTE’ is given more weight,
number of clicks necessary to get to desired content. It also reduces
and a text message of PICK A CHANNEL is added. Likewise, the
the number of sub-categories necessary in each channel.
SUB-CATEGORIES have less prominence to the user’s eye and
recede into the background.
More promotes translates to longer time on each page, as do TABBED
BOXES, which offer quicker, immediate access to dynamic information
However, the goal of any navigation should be to be invisible. Linking
(new releases, top downloads, contests, etc,). The denser layout also
should happen primarily through promotes as much as possible.
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.
1 2
Studies have posited that internet users utilize An interim mock-up (left) illustrates the ‘F’
an ‘F’-shaped eye pattern when scanning a pattern by putting rich featured content along the
page. (MediaPost Search Insider, June 12, 2007) top, site navigation horizontally along the middle,
The vertical ‘remote’ does not subscribe to this and SEARCH at the bottom left.
and may account for initial user confusion.
12 13
User Experience User Experience
search search
promote purchase
home promote purchase
home
page flow
item page flow
item
page page
User Profiles 10’ Vista
An important bridge between DISCOVERY and A more television-friendly approach to the
SHARING is the concept of TAGSETS. 10’ experience focuses on CHOOSE AND WATCH,
leaving BROWSE AND DISCOVER to the 2’.
Many movie fans are collectors, and love to show off and display
The TV remote control offers precious few moves- LEFT RIGHT UP
their prized possessions. TAGSETS are the digital version of this:
DOWN ENTER. This, however, can be used to SIMPLIFY the
user-generated tags that let you list, label, manage, and share any
organization of content. Fewer navigational levels and fewer
movie on CStar:
screens are a must when designing a TV-based interface.
GOT IT SEEN IT WANT IT
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
But even better than your living room library, not only can you
Windows Media Center on Vista.
show off what movies you own (like an endless DVD shelf), but
also show friends what movies you’ve seen, and even what you
Sliding, spatial transitions are intuitively more understandable and
want to see.
provide a less confusing, more pleasant navigational experience.
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.
1
1
An internal analysis of Apple’s iTunes/iPod shows
TAGSETS include ratings, a comments field,
that an inter-device experience can be consistent
and the ability to create customizable lists
while not identical. Simply put, you cannot buy a
which appear on the USER PROFILE page.
song on an iPod. That is left to the iTunes computer
TAGSETS are also sortable, and can act as
interface. It’s a 2-part system: DISCOVER AND BUY
customizable tools to creat personalized media
on one. CHOOSE AND LISTEN on the other.
managers, reminders, and filters.
Similarly, we BROWSE AND BUY at CStar.com and
CHOOSE AND WATCH on the TV.
15 17

12. User Experience User Experience search
promote purchase
home
page flow
item
page
Site Art Style Guide Page Types
Publishing templates used on CStar
Specifics on Page Templates and Art Assets
The site is built around a global nav and 4 main templates:
PROMOTE PAGES
ITEM PAGES
LIST VIEWS
ARTICLE PAGES
25 26
User Experience search
User Experience search promote purchase
home
page flow
promote item
purchase
home
page page
flow
item
page
Promotes
Global Art
Specifics on B; C; E; Thumbnails 2/7/10
Specifics on Global Nav Art and Font Styles
Every movie title gets a standard set of images
“Ferris Wheel’ Channel Sprites- created from the art we receive.
336 pixels x 39 pixels
We attempt to distinguish ourselves by having our
Font Usage feature promote spaces (B & C) horizontally-
Idle Rollover Active
composed, in keeping with the aspect ratio and
B loader-
DIN SCHRIFT -ENGSCHRIFT - ALL UPPERCASE FOR CHANNEL AND CATEGORY NAMES imagery of the film.
445 pixels x 250 pixels
‘Carousel’ Category Sprites-
HELVETICA BOLD - TITLE TEXT (HEX# 1F1B53) variable x 141 pixels Only in List View do the thumbnails resemble DVD
Idle
key art.
Helvetica- body text
Rollover
Helvetica- body href (hex #43439B
C promote-
240 pixels x 180 pixels
Active
Thumbnails-
TN7- 60 pixels x 87 pixels
TN10- 232 pixels x 160 pixels
TN2- 153 pixels x 105 pixels
Background-
1000 pixels x 842 pixels
28
27

13. User Experience
User Experience
search
search
promote purchase
home
promote purchase
home page flow
item
page flow
item page
page
Dynamic Content
Borders & Messaging
Each Artist-Created and Studio Channel has custom To compliment the ‘title-specific’
borders on its promotes to further brand and movies promotes, we also
distinguish them. The SWOOSH denotes exclusive or populate the page with other
FREE content across the entire site. quicker, cursory information:
top downloads lists, new
releases, trivia, and
7-Bar article teases.
Editorial Boxes - E1 (left)- articles; E2 (right) CStar messaging
Our Space Portal Border Jersey Docs Distessed Border Golden Age Deco Border
Lists Box
31
30
User Experience User Experience
Pure Discovery
Looking Ahead: 3.0 GROUPINGS offer a clear and scalable
organizational strategy that practically bursts
with SURPRISE AND DELIGHT.
Concepts for a new interface and user experience
that continue to expand a user’s ability to GROUPINGS creates an interface that mimics the more
SHARE and DISCOVER. 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.
1
Like wandering the aisles of a store, people enjoy the jolt As an example, the aviation film ONE SIX RIGHT will
of the UNEXPECTED. When you go to a video store to rent appear alongside CITIZEN KANE in a GREAT
SIN CITY, you’ll walk by new releases and the bargain bin CINEMATOGRAPHY grouping, but next to FAHRENHEIT
and even the M’s and T’s and other S’s before glancing 911 in a Documentaries group. Or the SURPRISE of
SIN CITY. Odds are you’ll walk out with another movie or seeing 300 and MAN WITH THE GOLDEN ARM, two very
two based on what else catches your eye. GROUPINGS different movies, both appear in a GREAT MUSICAL
are an intelligent and dynamic application of this. In effect, SCORES grouping.
they are ‘SMART’ shelves.
19 20

14. HOME PAGE SITE NAVIGATION Navigational categories
The REVELATIONS HOME PAGE The navigational MENU is clear, Digital
Morgan Film & TV About Us
shouts ‘WE MAKE MOVIES.’ the FEATURES STRIP shows top Revelations
Freeman
The imagery is inspirational and movies and articles, and a QUICK
distinctive, and the emotion-filled LINK pull-down menu gives direct
tagline is prominent. access to any movie.
The site strives to give visitors a Link to a Movie
The 4 nav categories are:
well-rounded look at the entire Morgan Freeman 10 Items or Less
process of moviemaking, and a Film & TV Rendezvous with Rama
peek at the people who make up Digital Revelations
Tagline
Jazz Ambassadors
the Revelations team. About Us also links to
Under Suspicion
About Us page
It’s as much of a ‘magazine’ feel as The Code
Each leads to an index page with
the slow pace of filmmaking and the one featured piece of content Levity
realities of updating will allow. Yet it teased and a listed archive of the The Lonely Maiden
must stay fresh and full of energy, rest. Remembering Venice
so visitors (and investors) feel like Bopha
REV is buzzing with activity. However, as we’ll see, Mutiny
DISCOVERY is encouraged xxxxxxxxx
through RELATED LINKS moreso
xxxxxx xxxxxxx
than menu navigation.
FEATURES STRIP
contains 5-9 links, showing 4 at a time. Scrolls automatically
after 10-15 secs. Also User navagable with arrows.
QuickLink Pulldown
Direct access to individual
movie titles.
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. Click to close
1:04 / 1:53
Photos