Wbur wires v3_1

705 views

Published on

  • Be the first to comment

  • Be the first to like this

Wbur wires v3_1

  1. 1. DESIGN .INFRANGIBLE PREPARED FOR WBUR 03.14.10 PRX: WBUR iPhone App v. 3.1
  2. 2. DESIGN .INFRANGIBLE PREPARED FOR WBUR TAble of CoNTeNTs 03.14.10 APP MAP 4 App Map Navigation Paradigm 7 Navigation paradigm Wireframes 9 Home Screen 10 News 11 News: Article 12 Programs: Featured 13 Programs: Program Page 14 Programs: Episode Page 15 Programs: Alphabetically 16 On Assignment: Newest 17 WBUR LIVE 18 WBUR LIVE: Now Playing 19 WBUR Sound Bites 20 Alarm clock 21 Support WBUR 22 WBUR Members 23 WBUR Members: Member Benefits 24 WBUR Members: Member Benefits: Offer 25 WBUR Members: Member Benefits: Redeem (vertical) 26 WBUR Members: Member Benefits: Redeem (horizontal) 27 Search 28 Search Results 2
  3. 3. DESIGN .INFRANGIBLE PREPARED FOR WBUR 03.14.10 APP MAP 3
  4. 4. DESIGN .INFRANGIBLE PREPARED FOR WBUR APP MAP 03.14.10 NEWS PROgRAMS ON ASSIgNMENt NeWs • Will contain a mixture of local (i.e. Boston), nation and international content as curated by WBUR • Users will be able to navigate through the news section based on topics • Users will be able to share content on the article level through social media (e.g. Facebook, twitter, etc.) • It is recommended that there be a rich media section for photos, slideshows, audio and video PRogRAMs ALARM WBUR LIVE ScHEDULE • Will allow users to browse through featured or locally produced programs, and all other programs from WBUR • Programs can be browsed by A-Z, topic and featured • Program pages will have at minimum, a title, image, description, and schedule • If available, program pages will have on demand content, and link to website oN AssigNMeNt • Will display a list of assignments for WBUR members • Assignments will be browsable by Featured, Location, Active and All SUPPORt WBUR WBUR MEMBERS SEARcH • Assignments will be pushed to users if they opt in • Assignment pages will outline tasks and allow user to upload photos, video, audio and or text AlARM • Will allow users to us the WBUR app as their alarm WBUR live • Allows users to listen to the live stream of the WBUR broadcast • Shows the current and next program from the live broadcast • gives access to the full schedule • the WBUR player will have a “Sound Bites” (name tK) button that gives the user access to “top of the Hour News”, “Weather” and “traffic” 4
  5. 5. DESIGN .INFRANGIBLE PREPARED FOR WBUR APP MAP 03.14.10 NEWS PROgRAMS ON ASSIgNMENt schedUle • gives the user access to the full WBUR broadcast schedule sUPPoRt WBUR • gives users an opportunity to donate via web, telephone or other methods (e.g. vehicle donation, volunteering, etc.) ALARM WBUR LIVE ScHEDULE MeMBeRshiP BeNefits • Will display the virtual membership card or tout to join • Will display a list of all underwriters browsable by A-Z and category (e.g. retail, service, etc.) • Will display a list of all underwriters benefits browsable by A-Z and category (e.g. retail, service, etc.) • Offer screens will display a map of location, underwriter info and details of offer seARch SUPPORt WBUR WBUR MEMBERS SEARcH • Search WBUR • Filter results (e.g. Programs, episodes, hosts, underwriters, benefits, etc.) 5
  6. 6. DESIGN .INFRANGIBLE PREPARED FOR WBUR 03.14.10 NAvigAtioN PARAdigM 6
  7. 7. DESIGN .INFRANGIBLE PREPARED FOR WBUR NAvigATioN PArAdigM 03.14.10 No. Element Description Home Screen • the typical “tab Bar” navigation scheme of typical iPhone apps is too limiting for the navigation and content needs of the WBUR iPhone app • A home screen paradigm (as seen on the Facebook app) is more appropriate for an app with distinct sections and less flat navigational hierarchy • A home screen paradigm allows us more flexibility in the types of navigation, sorting and filtering with sections i WBUR News Programs On Assignment Alarm WBUR Schedule LIVE Support Membership Search WBUR Benefits 7
  8. 8. DESIGN .INFRANGIBLE PREPARED FOR WBUR 03.14.10 WiRefRAMes 8
  9. 9. DESIGN .INFRANGIBLE PREPARED FOR WBUR HoMe sCreeN 03.14.10 No. Element Description Home Screen 1 Settings • Allows user to configure their WBUR app • configure twitter settings • configure Facebook settings • configure push settings 6 1 • tBD 2 Play controls • Play controls are ubiquitous throughout the app i WBUR 3 Play button • When the user is not listening to audio, the play button is displayed by default 4 title • Displays the title if audio is playing News Programs On Assignment 5 WBUR sound bites • On click activates an action sheet that allows users access to “top of the Hour News”, “Weather”, and “traffic” • Button is displayed everywhere on the app, allowing users quick access to these valuable sound bites 6 Info Button • takes you to the “About WBUR” page Alarm WBUR Schedule LIVE 7 call in now • Button appears when user is able to call into a program • Modal dialog will notify user that they will exit the app Support Membership Search WBUR Benefits 7 Call In Now 2 3 5 4 9
  10. 10. DESIGN .INFRANGIBLE PREPARED FOR WBUR NeWs 03.14.10 No. Element Description News 1 Home button • takes you back to the home grid 2 Refresh button • Refreshes content 3 topic navigation • Allows a user to navigate content based on WBUR taxonomy 1 2 4 topic scroll • Allows a user to scroll the list of topics • When not on first topic, an additional arrow appear to allow user to scoll News Refresh back to the left 3 4 5 Featured • First featured article Featured Politics Economy Health 6 top stories • Small treatment for top stories (3-5) 5 • top stories would be followed by an optional secondary feature 6 Top Stories 10
  11. 11. DESIGN .INFRANGIBLE PREPARED FOR WBUR NeWs: ArTiCle 03.14.10 No. Element Description News: Article 1 Media • Photo • Video • Slideshow 2 Enlarge • Enter photo viewing mode 3 Listen button • Allows users to listen to a story if audio is available Back News Share 1 2 + 3 Listen 11
  12. 12. DESIGN .INFRANGIBLE PREPARED FOR WBUR ProgrAMs: feATured 03.14.10 No. Element Description Programs Featured Screen 1 Featured tab • Default view • Shows locally produced and otherwise featured programs 2 A-Z • An alphabetical listing of all programs 3 Program module • A module featuring the program logo and title • On click will take you to a program screen with description, on demand Programs content (if available) and schedule 1 2 4 Adjacent module • Shows the adjacent program modules Featured A-Z 5 Program module indicator • Displays the number of featured program modules and which module a user if focused on 3 6 6 On Air indicator • Appears if the program is currently live on WBUR On Air 4 Car Talk 5 12
  13. 13. DESIGN .INFRANGIBLE PREPARED FOR WBUR ProgrAMs: ProgrAM PAge 03.14.10 No. Element Description Programs: Program Page 1 Image/logo • — 2 Description • Airdate • Program description 3 Listen Live button • Appears if the show is currently airing live on WBUR 4 Support WBUR • takes user to “Support WBUR” section Back Car Talk Share 5 On Demand section • Appears if on demand episodes are available 1 2 6 Episode description and • Display a small thumbnail (optional) for the episode On Air Satudays at 11 a.m., link • title and airdate of episode Sundays at 6 p.m. • On click takes user to episode page 3 4 Listen Live Support WBUR 5 On Demand 6 13
  14. 14. DESIGN .INFRANGIBLE PREPARED FOR WBUR ProgrAMs: ePisode PAge 03.14.10 No. Element Description Programs: Episode Page 1 Episode description • Episode title and airdate • Description of episode if available • thumbnail of episode if avaiable Back Car Talk Share 1 Episode Title and Date Play Support WBUR 14
  15. 15. DESIGN .INFRANGIBLE PREPARED FOR WBUR ProgrAMs: AlPHAbeTiCAlly 03.14.10 No. Element Description Programs By topic • Lists programs alphabetically Programs Featured A-Z A-E A B C D E F G H I J K L M N O P R S F-L T U V W X Y Z # 15
  16. 16. DESIGN .INFRANGIBLE PREPARED FOR WBUR oN AssigNMeNT: NeWesT 03.14.10 No. Element Description On Assignment: Newest 1 Newest • Shows all assignments based on recency 2 Ending Soon • Shows all assignments based on time left in assignemnt 3 Assignment module • On click will take you to an assignment screen where a user can partici- pate (e.g. upload photos, video, text, etc.) 4 New Badge • Designates newest assignment On Assignment 1 2 5 Date Info • Date posted • time left before assignment expires Newest Ending Soon 6 Description • title 4 5 • Assignment description • Distance NEW! Posted: 3/10 Time Left: 3d 4h 7 counter • Shows how many people have participated 3 8 Media type icon • Indicates what kind of media the assignment is (e.g. photo, video, text, audio, etc.) 9 Program module indicator • Displays the number of featured program modules and which module a user if focused on 6 7 Title: Dog with Human Eyes Assignment: Eliminate Distance: 0.5m 25 8 9 16
  17. 17. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur live 03.14.10 No. Element Description WBUR LIVE 1 Now playing • Shows the title, image and description of the show currently on air 2 Play/pause button • Allows user to pause or play live stream (stateful button toggles between pause and play) 3 call in now • Initiates a modal dialog asking if users are sure they want to exit the app to call into the show WBUR Live Share 4 Support WBUR • takes user to “Support WBUR” section 1 5 On next • Shows the title and description of the next show On Now: On Point 6 Full schedule • On click, takes user to full schedule 7 Play controls • Play controls are ubiquitous throughout the app • On click of area will reveal full play control tray 8 Pause button • When the user is listening to audio, the play button becomes a pause but- ton 2 3 4 9 title • Displays the title Support 10 WBUR sound bites • On click activates an action sheet that allows users access to “top of the Pause Call In Now Hour News”, “Weather”, and “traffic” 5 WBUR • Button is displayed everywhere on the app, allowing users quick access to these valuable sound bites On Next: Here & Now 6 Full Schedule 7 8 9 10 Now Playing: On Point 17
  18. 18. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur live: NoW PlAyiNg 03.14.10 No. Element Description Play controls Play controls are accessible throughout the app. Exact functionality of live stream and on demand content tBD. 1 Rewind • — 2 Play head • Allows users to scrub forward and backwards through audio 3 Forward • — 7 WBUR Live Share 4 30 sec rewind • Allows users to skip back 30 seconds On Now: On Point 5 Volume • — 6 Play control tray • When user clicks off of tray area, the tray will contract 7 Share • On click will activate action sheet with share options (e.g. twitter, face- book, email, etc.) Support Pause Call In Now WBUR 6 On Next: Here & Now Now Playing: Radio Boston 1 2 3 1:25 4 58:00 Full Schedule 5 Volume 18
  19. 19. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur souNd biTes 03.14.10 No. Element Description WBUR Soundbites 1 WBUR sound bites • On click activates an action sheet that allows users access to “top of the Hour News”, “Weather”, and “traffic” • Button is displayed everywhere on the app, allowing users quick access to these valuable sound bites • Icon for sound bites tBD, but should describe the quick and indespendible nature of the content WBUR Live Share On Now: On Point Call In Now 1 WBUR Sound Bites On Next: Here & Now Top of the Hour News Full Schedule Weather Cancel Now Playing: Radio Boston 19
  20. 20. DESIGN .INFRANGIBLE PREPARED FOR WBUR AlArM CloCk 03.14.10 No. Element Description Alarm clock 1 Alarm clock • Allows users to set the WBUR app as their alarm • Possibly have a pre-roll of Bob Oakes telling you to wake up • During pledge drives, pre-roll could remind users to support WBUR 2 Setting • Allows users to configure and set their alarm • Sleep • Alarm on or off • Set alarm 2 1 • Set station Alarm Clock 3 Alarm set icon • Displays that the alarm is on and what time it is set to 3 7:30 AM 11:52 PM Now Playing: On Point 20
  21. 21. DESIGN .INFRANGIBLE PREPARED FOR WBUR suPPorT Wbur 03.14.10 No. Element Description Support WBUR 1 Feature area • can be generic tout or more campaign based support message 2 call now to pledge • Allows users to call WBUR to donate • Button will always appear, but during hours when a customer rep isn’t available, a modal dialog will tell them to call back later with the option to either cancel or set a reminder • Modal dialog will notify user that they will exit the app Support WBUR 1 3 Remind button • On click initiates an action sheet with the option to set an email reminder or a push reminder to pledge 4 More ways to support • List of alternative ways to support WBUR (taken from WBUR website) 2 Call Now to Pledge 3 Remind Me Later 4 More Ways to Support Donate Your Vehicle Volunteer Today! Gift Membership Community of Volunteers 21
  22. 22. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur MeMbers 03.14.10 No. Element Description WBUR Members 1 Membership badge • Allows users to sign in to claim their virtual membership card • If the user isn’t a member, a tout would encourage them to join 2 Underwriters • takes users to a list of underwriters • Underwriters can be browsed A-Z or by category 3 Member Benefits • takes users to a list of underwriters with special offers for WBUR mem- bers WBUR Members • Underwriters can be browsed A-Z or by category 1 Become a WBUR Member Today! Already a member? Sign in here. 2 Underwriters 3 Member Benefits 22
  23. 23. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur MeMbers: MeMber beNefiTs 03.14.10 No. Element Description WBUR Members: Member Benefits 1 A-Z • Alphabetical list of underwriters 2 Location • groups offers based distance from your location 3 categories • List of underwriters by category (e.g. retail, services, etc.) Back Member Benefits 1 2 3 A-Z Location Categories A-E A B C D E F G H I J K L M N O P R S F-L T U V W X Y Z # 23
  24. 24. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur MeMbers: MeMber beNefiTs: offer 03.14.10 No. Element Description WBUR Members: : Offer 1 Map • — 2 Marker • Shows underwrite on map 3 Underwriter and offer de- • Image, description and name of underwriter scription • Describes member offer 4 Redeem button • Reveals membership card/benefit coupon Back Member Benefits 1 2 3 4 Redeem 24
  25. 25. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur MeMbers: MeMber beNefiTs: redeeM (verTiCAl) 03.14.10 No. Element Description WBUR Members: Member Benefits: Redeem (vertical) 1 clock • Live clock to prevent someone from screencapping “virtual card” 2 Member info • — 3 Offer • Name of underwriter • Description of benefit 1 90.9 WBUR 6:15:43 pm 2 MEMBER CARD Matt MacDonald U999999999 Lorem Ipsum underwriter 3 Offer: Member Since 2005 25
  26. 26. DESIGN .INFRANGIBLE PREPARED FOR WBUR Wbur MeMbers: MeMber beNefiTs: redeeM (HorizoNTAl) 03.14.10 No. Element Description WBUR Members: Member Benefits: Redeem (horizontal) 90.9 WBUR 6:15:43 pm MEMBERCARD Matt MacDonald U999999999 Member Since 2005 Lorem Ipsum underwriter & Offer: 26
  27. 27. DESIGN .INFRANGIBLE PREPARED FOR WBUR seArCH 03.14.10 No. Element Description Search 1 Search field • Live search 2 Search results • Unfiltered search results appear as the user types Search 1 Cambri 2 Q W E R T Y U I O P A S D F G H J K L ^ Z X C V B N M X .?123 space Search 27
  28. 28. DESIGN .INFRANGIBLE PREPARED FOR WBUR seArCH resulTs 03.14.10 No. Element Description WBUR Members: : Offer 1 Results filter • User can filter results (e.g. Programs, episodes, hosts, underwriters, ben- efits, etc.) Search Cambridge X 1 Filter by: All 28
  29. 29. DESIGN .INFRANGIBLE PREPARED FOR WBUR 03.14.10 END KHOI UONg

×