0
designed information experiences


                                                      Visual Culture
                  ...
ice
                                                                                                                      ...
ic T V se ri e s
                                                                                                         ...
• Quicklook TV concept and UI for interactive TV (in development)




                                                    ...
• R e v e la ti o n s
                      E n te r ta in m e n t
                                               d e s ig...
Experiences
  There is still always a real-world ‘experience’ economy.
      New media compliments it, but does not replac...
r lin es , str ee t ex its , et c.
                                                                       nn el au dio ‘p ...
jeffrey greene
designed information experiences
                            •   ‘Karma’ writer/director; 2nd place winner ...
sample idd documents


                                                     ClickStar
                       Revelations E...
User Experience


                                                                                                        ...
User Experience                                                                                                           ...
User Experience                                                                                                           ...
User Experience
User Experience
                                                                                          ...
HOME PAGE                                                                 SITE NAVIGATION                                 ...
J Greene Portfolio 2008
J Greene Portfolio 2008
J Greene Portfolio 2008
Upcoming SlideShare
Loading in...5
×

J Greene Portfolio 2008

489

Published on

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

Published in: Design, Business, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "J Greene Portfolio 2008"

  1. 1. designed information experiences Visual Culture Mass Information User Behavior Jeffrey Greene interactive art direction & UI design portfolio 2008
  2. 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. 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. 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. 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. 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. 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. 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. 9. sample idd documents ClickStar Revelations Entertainment Quicklook Jeffrey Greene interactive art direction & UI design
  10. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×