• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
KW_InformationDesign_ Presentation
 

KW_InformationDesign_ Presentation

on

  • 600 views

An overview of my experience in the Information Design and Interaction Design realm.

An overview of my experience in the Information Design and Interaction Design realm.

Statistics

Views

Total Views
600
Views on SlideShare
541
Embed Views
59

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 59

http://www.linkedin.com 56
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    KW_InformationDesign_ Presentation KW_InformationDesign_ Presentation Presentation Transcript

    • Kiera Westphal // Portfolio // 9.2012
    • Kiera Westphal’s Life Map Education/Conferences Exploration Freelance Design Work Full-time Design Work Art Catastrophic events Information Graphics C.M.U. to Design Professional Start as Entrepreneur Fine Art Interactive Graphics UX DesignPittsburgh NYC Pittsburgh NYC Pittsburgh Chicago San Francisco 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012J Junior year, Senior year, CMU Donovan and Green Oahu, HI Mind Over Media UPMC Solo Art Show Chicago Tribune Chicago Tribune Sara Lee, Emmi Solutions “Shoretell” Flip Video TiVo Carnegie Mellon University Signage Beehive Coffeehouse, InfoGraphics Production UX design, Mobile Sold 5 piecesF Wishbox.com VoxLumina, Yoga Instructor Warhol Museum Restalyne Arrka, Law Office CD/Posters/Logo/Website Art Show Microsite, IA Presentation InfoGraphicM Ed Tufte Seminar Black Sheep Paper Mobile, Pittsburgh Darwill, Punchcut Puppet Festival, “squares” debut Aids Task Force, InfoGraphic UX design, Desktop Publication Design Graphic Identity,A Vision Plus 4: Father passed Brochure Design McGraw Hill, Swirl “Republic of Info” InfoGraphic UX design, Mobile/WebM “Pittsburgh is For Lovers” Creation of BizArt, University of Chicago Press, Razorfish T-Shirt design ArtoMat distribution Flash Microsite Piece UX design, Desktop Information graphicsJ Razorfish Internship Donovan and Green Studio D’Arc Emmi Solutions Thirst (3st), Agogo Amalgamated Presentation UX design, Mobile DesignJ Vision Plus 6 City Paper Legislative Weekend Liberty Ave Show, Renegade Craft Fair “Drawing the Process” Publication Design Invitation, Form Design Sold 1 piece “Mystic Mobiles” 3 covers/A Bike tour through Mind Over Media inside spreads Safe Schools, CBS Interactive Europe Poster Design Competitive AnaylysisS Senior year, CMU Newsweek Penn Ave Arts 9-11 Akoya Bike Tour Initiative Presentation Across the U.S.A. InfoGraphicO Dark Night McSweeny’s Design Map TiVo Cabaret Panorama UX Design, Desktop UX design, MobileN Chicago TribuneD Recession began Production: Renegade Craft Fair source: NYTimes “Shoretell” “Mystic Mobiles” Interactive Phone Screen Interface Razorfish: Interaction Design Class: Travel: Wishbox: Mind Over Media: Sign documentation: Presentation graphic: Brochure, Identity Mark: Chicago Tribune: Williams Labadie/Restylane: Thirst/3st: Flip Video/Cisco: Razorfish Punchcut Spencer Tunick website Digital Book Austria Process Diagram, Process Diagram, UPMC Akoya Pittsburgh AIDS Task Force News InfoGraphics, Print/Digital Information Architecture Logo Development, Android Wireframes Intel wizard wireframes Wireframes for on “The Blue Dot” Hungary Information Architecture Information Architecture Presentation design Use case Diagrams CMS - Content diagram an expression builder Italy Website, Logo: University of Chicago Press, France Studio D’Arc, Vox Lumina TheDeepBook.org: McSweeny’s Panorama: TiVo Agogo Holland Penn Avenue Arts Initiative: Flash, Marketing Microsite 200 Illustrations IA of Moblie App Flow diagrams and Process Diagrams to Specifications doc Wireframes for the facilitate the content Emmi Solutions: Mobile App gathering process Interface redesign Production Process Diagram Marketing Diagrams Darwill/David James Group: InfoGraphics Sara Lee/Launch Creative Marketing: InfoGraphics
    • C.M.U. to Design Professional Pittsburgh NYC Pittsburgh NYC 1997 1998 1999J Junior year, Senior year, CMU Donovan and Green Education/Conferences Carnegie Mellon University Full-time Design WorkF Catastrophic eventsM Ed Tufte Seminar ExplorationA Vision Plus 4: Father passed “Republic of Info”MJ Razorfish Internship Donovan and GreenJ Vision Plus 6 “Drawing the Process”A Bike tour through EuropeS Senior year, CMU NewsweekOND Information Design Class Razorfish: Interaction Design Class: Travel: Train Schedule Spencer Tunick website Digital Book Austria on “The Blue Dot” Hungary Italy Design of “Pixeltype” France Holland
    • CMU, Information Design // Train Schedule Before1997
    • CMU, Information Design // Train Schedule Redesign1997
    • Razorfish Internship // Pixeltype1997 http://www.thebluedot.com/tunick/
    • CMU, Interaction Design // Digital Book // Navigation1998 M A I N CO N C E P T 1 . B O O K S P EC I F I C N OT E PA D S C E N A R I O filter file preferences cut/copy text paste into notepad Students would prefer to use a book character open type size on line for research purposes than setting save typeface for leisurely reading. want to make a note go back to text vocabulary save as go to a page read text Technology can be used to avoid the 2 . PAG E S P EC I F I C write into end writing extra step of typing up hand-written bookmark search notepad add sentence notets for the “research paper” delete word go to N AV I G AT I O N S C E N A R I O Use the idea of navigation, highlight and bookmark as tools to make 3 . T E X T S P EC I F I C another chapter marker notepad compile page 1 researching a specific text easier. highlight 1 view/go to highlight 1 specific page text appears on screen highlight 2 cut highlight 2 cover contents other functions available go next highlight 3 copy highlight 3 choose ADDITIONAL FUNCTIONS choose underline paste underline chapter specific page go previous Filters highlight some common eraser type in post it ways of analyzing a novel. post it print 4 . W O R D S P EC I F I C Dictionary for supporting text and connection/link definition of words. M A R K E R TO O L S C E N A R I O dictionary grammar read text pick marker image keep marker sound movie start to mark go to a page put marker back reference end marking select a new marker pick marker scan
    • CMU, Interaction Design // Digital Book1998
    • Donovan and Green // Diagrammatic Presentation Tools1998 - 1999
    • Donovan and Green // Diagrammatic Presentation Tools1998 - 1999 Courtyard 2001 Progress To Date Phase 2a Developed a Brand Experience Journey • to explore experiential moments of truth of each target customer segment throughout the brand experience May 1999 23
    • Start as Entrepreneur Fine Art Pittsburgh 2000 2001 2002 2003 2004J Oahu, HI Mind Over Media UPMC Solo Art Show Exploration Signage Beehive Coffeehouse, Sold 5 pieces Full-time Design WorkF Wishbox.com VoxLumina, Yoga Instructor Warhol Museum CD/Posters/Logo/Website Art Show Freelance Design WorkM Black Sheep Paper Mobile, Pittsburgh Puppet Festival, “squares” debut Aids Task Force, Catastrophic events Publication Design Graphic Identity,A Brochure Design ArtM “Pittsburgh is For Lovers” Creation of BizArt, T-Shirt design ArtoMat distributionJ Studio D’ArcJ City Paper Legislative Weekend Liberty Ave Show, Publication Design Invitation, Form Design Sold 1 piece 3 covers/A Mind Over Media inside spreads Safe Schools, Poster DesignS Penn Ave Arts 9-11 Akoya Initiative Presentation InfoGraphicO Dark Night CabaretN Chicago TribuneD Wishbox: Mind Over Media: Studio D’Arc, Sign documentation: Presentation graphic: Brochure, Identity Mark: Process Diagram, Process Diagram, Penn Avenue Arts Initiative: UPMC Akoya Pittsburgh AIDS Task Force Information Information Architecture Process Diagrams to Architecture facilitate the content Website, Logo: gathering process Vox Lumina
    • Mind Over Media // Process Diagram10.2000
    • Mind Over Media // Interactive Kiosk Diagram10.2000
    • Studio D’Arc // Web Design6.2001
    • Dark Night Cabaret // Graphic Design10.2001
    • Penn Avenue Arts Initiative // Brand Identity Definition9.2001
    • Penn Avenue Arts Initiative // Graphic Design9.2001
    • Art - O - Mat // Bizart4.2003 http://www.artomat.org/
    • Akoya // Information Graphic4.2003
    • Warhol Museum // Visual Art2.2004
    • Pittsburgh AIDS Task Force // Graphic Identity and Marketing Materials4.2004
    • Information Graphics/Interactive GraphicsChicago San Francisco 2005 2006 2007 2008J Chicago Tribune Chicago Tribune Sara Lee, Emmi Solutions Full-time Design Work InfoGraphicsF Restalyne Arrka, Law Office Freelance Design Work Microsite, IA Presentation InfoGraphic Catastrophic eventsM Darwill, InfoGraphic ExplorationA McGraw Hill, InfoGraphicM University of Chicago Press, Flash Microsite PieceJ Emmi Solutions Thirst (3st), Presentation DesignJAS Bike Tour Across the U.S.A.OND Recession began Production: source: NYTimes “Shoretell” Interactive Phone Screen Interface Chicago Tribune: Williams Labadie/Restylane: Darwill/David James Group: Emmi Solutions: Thirst/3st: News InfoGraphics, Print/Digital Information Architecture InfoGraphics Interface redesign Logo Development, Production Process Diagram Presentation design University of Chicago Press, Sara Lee/Launch Creative Marketing: Marketing Diagrams TheDeepBook.org: InfoGraphics Flash, Marketing Microsite
    • Chicago Tribune // Information Graphics11.2004
    • Chicago Tribune // Interactive Graphics11.2004 http://www.chicagotribune.com/news/watchdog/chi-oreo-obesity-flash,0,3508291.flash
    • Restylane // Information Architecture2.2007 Restylane® PracticeBuilderTM DRAFT Restylane PracticeBuilder Site Architecture File: Restylane_PB_sitemap_032807.ai March 2007 www.restylaneUSA.com Medical affairs.com Mail In America 1 Main Screen / Home 1.0 Sales Rep. Login Doctor Login Registered Not registered Questionnaire build profile Tools to use with doctor Calculators Communicating Restylane Using Restylane Patient/Doctor relationship Informational Resources Manage your practice Reward Points Return on Investment To Public Injection techniques New Newsletter tutorial Step by step business goals assesment Retention/product analysis Plan for business success How to talk to the media Authentic product info. Cosmetic interest questionnaire mail merge guide Patient lifetime value calculator Virtual Video tours of practices Seminar follow-up letter Follow-up card tutorial To Patient Guidance Expense calculation worksheet Video of a doctor Downloadable coupons Photo release form Patient seminar Telephone techniques User tracking Authentic product info. Before/after photos Patient consent form Direct mail program guide Reception enhancements Find-a-doc qualifications Slide kit Authentic product info. Just for men letter Privacy info. form Staff incentives Authentic product info. Patient Opt-in program Tailoring Ad messages To Staff Existing Photographic tips Telephone inquire technique Nursing staff guide on patient Quality care survey Staff FAQs Newsletters Loop phone script On-line patient survey Approved verbiage Renewal letter Selling techniques Holiday letter Upselling techniques Announcement letter Upselling videos Treatment follow-up letter Consumer Log In | Contact Us | Disclaimer | Privacy Policy | Safety Information | References | Resources | Press | About Medicis Aesthetics ©2007 Williams-Labadie, LLC . This information is confidential and proprietar y and may not be shared without permission.
    • University of Chicago Press // Motion Graphics4.2007 http://www.press.uchicago.edu/books/nouvian/index.html
    • Emmi Solutions // Flash Production2.2007 http://www.emmisolutions.com/demo
    • Emmi Solutions // Process Diagram2.2007 Emmi Solutions new program process 22 January 2008 KEY: Source Legal Archive server On file server Create Refers to file SVN>Source>Longform>Childbirth Audio Transfer Auto Generate Review Wiki Phone conversation Electronic file @ Email Bugzilla Emmi program Ser ver Emmi database Used by engine Electronic Sales Manual Edit Use as reference SVN>Longform Mirror PREP RESEARCH SCRIPT PRE-ALPHA ALPHA BETA GA (General Availability) CANDIDATE TESTING* DEPLOYMENT RECRUIT PATIENT ADVOCATE PATIENT PATIENT ADVOCATE ADVOCATE PATIENT 1 1 2 2 3 3 PATIENTS survey PATIENTS survey response ADVISORS 3 contracts ADVISORS ADVISORS ADVISORS ADVISORS REVIEW PEER REVIEW PEER PEER PROGRAM PEER REVIEW wiki PEER REVIEW bugzilla PEER TEAM TEAM notes TEAM notes CHIEF MEDICAL OFFICER CMO (CMO) DIRECTORS DIRECTORS DIRECTORS DIRECTORS DIRECTORS VIEW EMMI PROGRAM PRODUCE VOICE .mp3 VOICE .wav .mp3 EMMI TOOL VOICE .wav .mp3 EMMI TOOL .mp3 media check batch process media check common robot voice batch process program.mp3 program.mp3 program.mp3 audio .mp3 robot voice program.mp3 WRITER EMMI TOOL EMMI TOOL EMMI TOOL EMMI TOOL WRITER EMMI TOOL s_1.xml... WRITER screen info script.doc WRITER outline template.xls WRITER script.xls WRITER WRITER script.xls WRITER script.xls WRITER script.xls script.xls program.html sheet.doc generate generate generate generate generate s_9.xml capture s_2.xml... s_1.xml... s_2.xml... s_2.xml... s_8.xml s_9.xml s_8.xml s_8.xml s_2.xml... s_8.xml s_1.xml s_1.xml program.xml s_1.xml s_1.xml s_9.xml s_9.xml program.xml s_9.xml s_9.xml s_1.xml s_9.xml temp.xml program.xml program.xml birth.xml program.swf program.swf program.xml PRODUCTION ARTIST PRODUCTION PRODUCTION PRODUCTION ARTIST program.fla program.swf program.fla program.swf program.fla childbirth.swf PRODUCTION image.psd program.jpg ARTIST ARTIST program.html ARTIST program.html MEDICAL ILLUSTRATOR program.jpg MEDICAL MEDICAL MEDICAL MEDICAL program.jpg ILLUSTRATOR sketches ILLUSTRATOR library.fla ILLUSTRATOR library.fla ILLUSTRATOR library.fla RELEASE ok PRODUCTION TECH PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION TECH TESTING TECH TESTING TECH TESTING TECH TESTING TECH SERVER SERVER SERVER SERVER ok OUTSIDE TESTERS *If bugs, then repeat GA phase OUTSIDE TESTERS ok CLIENT SERVICES CLIENT SERVICES TECH TEAM TECH TECH TECH TEAM TEAM TEAM
    • Emmi Solutions // Process Diagram2.2007 PEER PEER PEER PROGRAM REVIEW wiki TEAM TEAM notes DIRECTORS VOICE .mp3 .mp3 common robot voice audio .mp3 robot voice WRITER WRITER script.xls WRITER EMMI TOOL WRITER script.xls EMMI TOOL WRITER script.xls outline template.xls generate generate s_2.xml... s_8.xml s_2.xml... s_8.xml s_1.xml s_1.xml s_9.xml s_9.xml s_1.xml s_9.xml temp.xml program.xml program.xml
    • 3st // Kinetic Identity6.2008 Merchandise Mart Properties Inc WORDS Merchandise Mart Properties Inc Merchandise Mart Properties Inc LETTERS 11 4 10 3 COMBINATION OF OPTIONS TO CREATE A MARK BLOCKS OPTIONS A MARK THAT EVOLVES COMBINATIONS OF OPTIONS Merchandise Mart Properties Inc Merchandise Mart Properties Inc A MARK THAT EVOLVES A MARK THAT EVOLVES
    • 3st // Kinetic Identity6.2008 WORDS Merchandise Mart Properties Inc LETTERS 11 4 10 3 BLOCKS OPTIONS
    • Cycling // Bike Tour9.2008 http://tour-via-bike.tumblr.com/
    • UX Design San Francisco 2009 2010 2011 2012J “Shoretell” Flip Video TiVo Freelance Design Work Production UX design, Mobile ArtFM Punchcut UX design, DesktopA Swirl UX design, Mobile/WebM Razorfish UX design, DesktopJ Information graphics Agogo Amalgamated UX design, MobileJ Renegade Craft Fair “Mystic Mobiles”A CBS Interactive Competitive AnaylysisSO McSweeny’s Design Map TiVo Panorama UX Design, Desktop UX design, MobileND Renegade Craft Fair “Mystic Mobiles” McSweeny’s Panorama: Flip Video/Cisco: Razorfish Punchcut 200 Illustrations Android Wireframes Intel wizard wireframes Wireframes for Use case Diagrams CMS - Content diagram an expression builder TiVo Agogo IA of Moblie App Flow diagrams and Specifications doc Wireframes for the Mobile App
    • McSweeny’s // Illustrations for the SF Panorama 642 jones street11.2009 345 fulton street 814 california street 1235 bay street 1945 hyde street 840 california street
    • Flip Video // Case Study for Android Phone12.2009 How does one share their videos on their mobile phone, using Flipshare? CASE 1 CASE 2 CASE 3 Anne places the Marathon video in a channel for Chuck to view. Wedding Wedding Birthday Anne Birthday Emily Alice Anne Marathon Marathon Marathon Channel Bob Channel Channel Anne sends an Emily sends an Chuck Anne sends an Chuck Chuck email to Chuck and email to Alice, email to Chuck and Bob and Chuck, shares her video shares multiple videos. to share her videos. CASE 4 CASE 5 Channel Bob Marathon Wedding Bob Emily Channel Marathon Emily Wedding Alice Birthday Birthday Frank Alice Channel Channel Chuck push pull push pull
    • Flip Video // Wireframes for Android Phone12.2009 https://www.dropbox.com/s/ot1oio9qbqjqtug/android_print.pdf
    • Mystic Mobiles // Product Development4.2010 www.mysticmobiles.com
    • 511.org // Wireframes4.2011 http://trafficbeta.511.org/Parking/Index
    • Razorfish // CMS Diagram5.2010 Asset Detail Page Framework The Editorial Process The Role of Metadata Every asset detail page is served within a specific framework that contains a header, subheader, sharing capabilities, the ability to save, associated metadata, the content piece Assigning the right metadata to content will allow it to surface in the right contexts Identifying & Assessing Your Content through collections, search, and the content library. Eventually, it will aid in personalization itself, and a series of blade modules. Marketers can configure the blade system that best through My Intel. Collections and asset detail pages also have modular content elements supports the content itself. The image below indicates which blades are required, optional, called “blades.” Most blades are dynamic, and will be populated by matching metadata Marketing professional and conditional on asset detail pages. to surface content. In a dynamic module, the system will first look for content with the is assigned a collection. same five tags you chose for your collection page, then content with four matching tags, then content with three matches, two matches, and finally one match. 1 Develop a POV for the collection. The role of a collection is to represent Intel’s perspective on a given topic. Key: Required Optional Conditional What is the single takeaway you’d like your users to have after viewing this collection? 2 Determine content that supports the POV. After defining the POV, you need to support it with content. Start by auditing existing content and identifying gaps in the story. ALL CONTENT KEEP COLLECTION Tags: A B C D E REMOVE Related Materials Each content element is “described” through meta- CREATE data as part of the submission process into CQ. When you create a collection, you will also “assign” Technical Documentation metadata to describe it. The dynamic elements of the collection will be populated using an algorithm that 3 Migrate the existing content to new content detail pages, or create new content to fill the gaps identified. Shop turn off, matches metadata tags, effectively surfacing the most relevant content pieces in the right context. KEEP Images add, or There are two types of metadata. With “controlled specify detail vocabulary metadata,” the more common type, you’ll choose a value, or multiple values, from a list. On the Video to content other hand, with “open text metadata,” you’ll have a Each content element is “described” blank field for writing a custom title or description. CREATE Conversations through metadata as part of the sub- mission process into CQ. When you create a collection, you will also Disclaimers “assign” metadata to decribe it. The dynamic elements of the collection will Comments be populated using an algorithm that matches metadata tags. Planning and Implementation of Asset Detail Pages 1 All of your content should now be identified. Each piece of content will “live” on an asset detail page. The content type will determine the page layout. Video Asset PDF Asset Image Asset HTML Asset HTML, requires special configuration. See Figure 1. Container Rich Media Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus lacus ac nisl tempus egestas. Praesent Video PDF Image vulputate nunc commodo lacus rhoncus consequat. Nam porta porta ipsum sed tristique. Phasellus eu purus nec Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus lacus ac nisl tempus egestas. Praesent vulputate leo tristique porttitor. nunc commodo lacus rhoncus consequat. Nam porta porta ipsum sed tristique. Phasellus eu purus nec leo tristique 1 /25 I Slideshow porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus lacus ac nisl tempus egestas. Praesent vulputate Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus lacus ac nisl tempus egestas. Praesent nunc commodo lacus rhoncus consequat. Nam porta porta ipsum sed tristique. Phasellus eu purus nec leo tristique vulputate nunc commodo lacus rhoncus consequat. Nam porta porta ipsum sed tristique. Phasellus eu purus nec porttitor. leo tristique porttitor. 1 /25 I Slideshow Tags: A B C D E A B C D F A B C F G A B C G H 2 When you upload to CQ, you will describe your content using metadata and open text fields. If 5 matches 4 matches 3 matches 3 matches your asset is a Video, PDF, Image or Rich Media format, the asset detail page will be generated dynamically. If you create an HTML page, you must configure it using Figure 1 as a reference. 3 When all of your content is uploaded, you may begin creating your collection. 3 4 8 https://www.dropbox.com/s/8gjw2xn1evdbq8q/Collections101_v6_kw.pdf
    • TiVo // Information Architecture and Spec Documentation5.2010 TiVo Application Map for iPhone App, v. 1.6 KEY: visibility varies web page section repeated 1.0 Info 1.1 Explore 1.11 Upcoming List (Show) 1.2 Record 1.3 Upcoming connecting to “box name” 1.4 Share 1.5 Get From 2.0 Guide 2.1 Channel Search Away mode 2.2 Channel 0.2 Select DVR 0.3 Sign into 2.3 Date and Time 2.31 Half hour increments TiVo.com 2.32 Now 0.4 Sign-in problems Tivo.com, sign in help 2.33 Primetime 0.1 Setup (scan for TiVo Boxes) 3.0 My Shows 3.1 Date 3.2 A-Z 3.3 Episode 3.31 Recording 0.5 TiVo box found 3.4 Folder 3.32 Delete 3 days 0.6 Check again 3.33 Delete 24hrs 3.34 Show will be kept until deleted 0.7 Missing DVR box 3.35 Suggestion can delete 0.9 Setup 0.8 Continue as a guest (What is the 3.36 Recorded Guest Experience?) 4.0 Browse 4.1 Collections 4.11 List of Collection Categories 4.111 Category List 0.9 Help 4.2 Movies TiVo App Assistance 4.3 TV 0.91 How to use the TiVo app for iPhone 4.4 Sports 0.92 TiVo app for iPhone, Troubleshooting 4.5 Categories 5.0 More 5.1 To Do List 5.2 Season Pass Manager 5.3 Search 5.4 Remote Control 5.5 Selected DVR 6.0 Search 5.6 Settings kwestphal@tivo.com 12.2011 7.0 Remote https://www.dropbox.com/s/jqiiowfe4jkig7e/IA_iPhone_app_1.pdf
    • Agogo // Diagrammatic Flows6.2010 AGOGO USER FLOW // OBTAIN BETA iOS 1 enters email into CMS ADMIN 4 password confirm screen 5 Share your AGOGO content! 8 Refine your AGOGO content! 9 Download instructions Connect to Twitter, “Take this quiz “Congratulations! You’ve AGOGO Facebook and MOG to help us customize been approved for the email sent to user email@address.com your content from AGOGO Beta iOs Client.” 2 (auto-populated) 1000s of shows!” password or Skip or Skip confirm password 3 user clicks link in email USER Open the email with a link to download AGOGO on your iOs device 5 enter facebook f facebook authentication 6 enter twitter t twitter authentication 7 enter MOG MOG MOG authentication
    • LOAD SCREENAgogo // Diagrammatic Flows and Wireframes6.2010 REGISTRATION SCREEN enter email enter password ? [bad email, bad password, reset password] INTRO SCREEN HOME SCREEN play! [“now playing” ] VOICE FEEDBACK SCREEN SETTINGS SCREEN Back Back TTS Headers ON ON Twitter ON user email [success message, error message] PLAYER SCREEN Back 5:21 20:54 “bundle” choices, “related bundles” choices Business Weather and News Finance [error messaging, success messaging] [ ]
    • Agogo // Diagrammatic Flows and Wireframes6.2010 3 // PLAYER SCREEN // RELATED BUNDLES SLIDE UP FROM BOTTOM 4 // MODULE SCREEN AND PLAYER SCREEN // EPISODES Back agogo Back agogo Back agogo Back agogo Business and Finance module name Business and Finance Business and Finance segments/episodes Market Reports Market Reports bundle name Market Reports Market Reports within bundle Market Watch - Market Update network name, show title save related Market Watch - Market Update 2012-06-04 date Market Watch - Market Update rate 2012-06-04 Related to Business and Finance 2012-06-04 share (inside the drawer) save share 5:21 20:54 rate up, rate down Related to Business and Finance save 5:21 20:54 duration/progress bar Related to Business and Finance rate 5:21 20:54 share playback control (not hidden) (pause/play, skip/forward,back) Related to Business and Finance several “bundle” choices inside drawer pause toggles with play Business Business Weather and News Weather and News Finance module choices Finance related playlists https://www.dropbox.com/s/sfdgt2wnuzoyqpm/Agogo.pdf
    • // Thank you