Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

STC-PMC November 2016 Presentation - Mobile First Content

198 views

Published on

In November 2016, Liz Russell and Ksenia Dynkin of Bluecadet presented the STC-PMC with a case study about best practices learned from a project their company did for the Hoover Mason Trestle, a historical landmark inBethlehem, Pennsylvania. They spoke about the research that needed to be done, the content development process, the storytelling strategy and framework they devised, and how they translated the content strategy for user-friendly kiosks and apps for visitors' mobile devices when visiting the Hoover Mason Trestle.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

STC-PMC November 2016 Presentation - Mobile First Content

  1. 1. B L U E C A D E T Mobile-First Content
  2. 2. O V E R V I E W About Us 2
  3. 3. L I Z R U S S E L L 3 K S E N I A DY N K I N A B O U T U S
  4. 4. Bluecadet isanEmmyAward-winning digitalagencythatcreatesworld-class websites,mobileapps,interactive installations,andimmersive environmentsformuseums,universities, nonprofits,andculturalbrands. ABOUT US
  5. 5. PHILADELPHIA Fishtown NEW YORK CITY Chelsea
  6. 6. 7
  7. 7. T O U C H S C R E E N S G E S T U R E - D R I V E N E X P E R I E N C E S E X H I B I T I O N S & A P P S G A M E S R E S P O N S I V E W E B S I T E S T O U C H WA L L S L A R G E - S C A L E P R O J E C T I O N S D I G I TA L O R I E N TAT I O N S TAT I O N S E X P E R I E N T I A L M A S T E R P L A N S LO C AT I O N - B A S E D E X P E R I E N C E S D O C U M E N TA R Y F I L M WAY F I N D I N G & S I G N AG E
  8. 8. COLOR PALETTE & STYLE GUIDE VISITOR BUTTONSPRIMARY TYPEFACESECONDARY LOGO PRIMARY LOGO ALTERNATE LOGO Museum of the American Revolution Philadelphia, PA BUILDING GRAPHICS
  9. 9. ABOUT BLUECADET Bluecadet is an Emmy Award-winning digital agency that creates world-class websites, mobile apps, interactive installations, and immersive environments. Established in 2007, Bluecadet collaborates with leading museums, cultural institutions, universities, and nonprofit organizations to educate, engage, and entertain. From a touchscreen T. Rex puzzle at Chicago’s Field Museum, to a multimedia advocacy campaign for Doctors Without Borders, to MoMA’s bilingual mobile guide exploring the murals of Diego Rivera, our work inspires interaction and imagination. Our process strikes an ideal balance between structure and creative freedom, with an emphasis on strategic planning and strong, sustainable solutions. We are approachable perfectionists who believe in the power of digital technology to surprise and delight people of all ages—changing the way we look at objects and information, encouraging shared experiences and exchange, and making learning more like play. We are driven by a genuine commitment to the mission of each client, and every day we roll up our sleeves to ensure exceptional service and attention to detail. As digital storytellers, we are dedicated to bridging technology and culture in the service of human connection. Our process strikes an ideal balance between structure and creative freedom, with an emphasis on strategic planning and strong, sustainable solutions. We are approachable perfectionists who believe in the power of digital technology to surprise and delight people of all ages—changing the way we look at objects and information, encouraging shared experiences and exchange, and making learning more like play. We are driven by a genuine commitment to the mission of each client, and every day we roll up our sleeves to ensure exceptional service and attention to detail. As digital storytellers, we are dedicated to bridging technology and culture in the service of human connection. Overview & History About Bluecadet 14
  10. 10. 19 Offsite Recommended Improved Recommened Feed Connections Favorites Sync Favorites LoginCreate Account Story Detail Object Detail Preferences Mobile Website Website Email Social Media Begin Experience Talk Back App Store App
  11. 11. O V E R V I E W Our Content Processes 28
  12. 12. CONTENT DEVELOPMENT Developing&buildingnarrativestructure Interpretive Exhibits | Installations | Web+Mobile
  13. 13. C o n t e n t D e v e l o p m e n t | K e y P r o j e c t s BASEBALL HALL OF FAME NEW YORK PUBLIC LIBRARY EINSTEIN HEALTHCARE NETWORK HOOVER MASON TRESTLE MONTICELLO FORD PRESIDENTIAL LIBRARY MUSEUM OF THE AMERICAN REVOLUTION JFK LIBRARY & MUSEUM INDEPENDENCE SEAPORT MUSEUM DITTRICK MUSEUM AT CASE WESTERN RESERVE SAINT JOHN PAUL II SHRINE
  14. 14. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s I.Research Topic Research Content Audit Developing Themes & Structures Asset Research Expert Interviews
  15. 15. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s | Re s e a r c h
  16. 16. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s II.Framework Identifying core stories Conceptual framework documents Content Matrixes / Templates Taxonomies Sample Content for Design
  17. 17. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s | F r a m e w o r k B E F O R E A F T E R
  18. 18. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s III.ContentProduction Copywriting Writing UI Copy Asset gathering
  19. 19. C o n t e n t D e v e l o p m e n t | Wo r k + D e l i v e r a b l e s | P r o d u c t i o n
  20. 20. O V E R V I E W Project Background 37
  21. 21. 38 O V E R V I E W H O O V E R - M A S O N T R E S T L E
  22. 22. 39 H O O V E R - M A S O N T R E S T L E H I S T O R I C C OA L I T I O N V I S I O N S TAT E M E N T The Bethlehem Heritage Coalition believes the Hoover-Mason Trestle provides an unprecedented opportunity to connect the community and visitors with the story of Bethlehem Steel, the vibrant community in which it resided, and the people who made its operation possible. The Trestle provides the narrative spine for these stories.
  23. 23. 1. WRT Architects 2. Bethlehem Redevelopment Authority 3. ArtsQuest 4. Bethlehem Heritage Coalition: 1. Representatives from the Delaware and Lehigh National Heritage Corridor 2. Historic Bethlehem Partnership 3. Lehigh University’s South Side Initiative 4. National Canal Museum 5. National Museum of Industrial History 6. South Bethlehem Historical Society 7. Steelworkers’ Archives 8. Artefact Inc. 9. emDESIGN H O O V E R - M A S O N T R E S T L E P R O J E C T B AC KG R O U N D 40 S TA K E H O L D E R S
  24. 24. H O O V E R - M A S O N T R E S T L E C O N T E N T L O C AT I O N S & C H A N N E L S 41 N A R R AT I V E S I G N AG E Focus on the story, history and culture of the workplace T E C H N I C A L S I G N AG E Focus on the processes and machinery on the site R E S P O N S I V E S I T E & AU D I O T O U R Focus on the structures and artifacts found on the site; Offer an overview of the story and provide access to additional materials
  25. 25. H O O V E R - M A S O N T R E S T L E Content Development Case Study 42
  26. 26. 43 P R O C E S S A F E W C H A L L E N G E S 1. Theprojecthadalotofstakeholders withvaryingpriorities. 2. TherewasALOTofcontent,butithad notbeengathered,organized,or synthesized. 3. Theclientdidnothavethebandwidth ortheskillstocreatecontentforthe project.
  27. 27. 44 P R O C E S S M A S S I V E S C A L E !
  28. 28. 45 C O N T E N T D E V E L O P M E N T W H E R E W E B E G A N : I N T E R P R E T I V E P L A N 45 Z O N E 1 : 1 . S TO C K H O U S E ( I , I I I ) 2 . M A P O F T H E P L A N T ( I , I I I , V ) OV E R L AY S O F D F F E R E N T T I M E P E R I O D S 3 . W H AT I S H M T ? ( I , V ) P R O C E S S E X P L A N AT I O N O F B L A S T F U R N AC E S Z O N E 3 : 8 . W E L D E D W O R K E R N A M E S ( I , I I ) F I R S T P E R S O N S TO R Y ( A U D I O ) 9 . S H E LT E R E D M E D I A E X P E R I E N C E ( I , I I ) 1 0 . M E N A N D W O M E N ( I I , I I I , I V ) G E N E R AT I O N S O F W O R K E R S WAV E S O F I M M I G R A N T S Z O N E 5 : 1 4 . F + G F U R N AC E S + W O R K E R S A F E T Y ( I , I I , V ) Z O N E 2 : 4 . M U LT I - U S E P R O G R A M I N G + P R E S E N TAT I O N 5 . H I S TO R I C I M AG E OV E R L AY O F C U R R E N T V I S TA ( I V, V ) 6 . F O U N D E R S O F B E T H L E H E M S T E E L ( I I , I I I , I V ) 7. S O U T H S I D E I N T E R P R E TAT I O N ( I I , I V ) Z O N E 6 : 1 5 . T R A N S P O R TAT I O N N O R T H S I D E V I S TA ( I , I I I , I V, V ) 1 6 . N O. 2 M AC H I N E S H O P W W I I A R M A M E N T S OT H E R M I L I TA R Y P R O D U C T I O N I N D U S T R I A L A P P L I C AT I O N S ( I I , I I I , V ) Z O N E 7 : 1 7. M I N S I T R A I L ( I I , I V ) 1 8 . J O N E S I S L A N D W E L D M E N T ( I I I , I V, V ) Z O N E 8 : 1 9 . H I G H H O U S E ( I , I I ) 2 0 . W H AT I S H M T ? ( I , V ) Z O N E 4 : 1 1 . G A S B LO W I N G E N G I N E H O U S E ( I , I I ) 1 2 . R A I L C A R S + M AT E R I A L S ( I , I V ) 1 3 . W O R K E R ’ S S H A N T Y - S TO R I E S ( I I ) L I N E A R T I M E L I N E 1 L I N E A R T I M E L I N E 2 L I N E A R T I M E L I N E 3 L I N E A R T I M E L I N E 4 P R O J E C T I O N S A LO N G N O R T H WA L L O F B LOW E R H O U S E T O T H E E A S T O F R A I L C A R S [ I N T H E A R C H E D B AY S T H AT U S E D T O O P E N I N T O T H E B LOW E R H O U S E ] P OT E N T I A L S PAC E F O R T H E L I S T E N I N G S TAT I O N : N E W C O N S T R U C T I O N O F R E C O R D I N G B O OT H W O U L D B E I N T H E V I S I T O R ’ S C E N T E R AT T H E W E S T E N D O F T H E T R E S T L E P R O J E C T I O N S A LO N G E A S T WA L L O F T H E B U I L D I N G T H AT FAC E S T H E PA R K I N G LOT A N D E A S T E N D O F T H E T R E S T L E [ O P P O R T U N I T Y F O R L A R G E R S C A L E ] * * * * * * R A M P A S I N T R O D U C T I O N L I N E A R T I M E L I N E 5 L I N E A R T I M E L I N E 6
  29. 29. 1. Reviewing materials gathered by he client 2. Watching documentaries, reading books + articles 3. Visiting the site 4. Reaching out to subject matter experts C O N T E N T D E V E L O P M E N T W H E R E W E B E G A N 46 U N D E R S TA N D I N G T H E S T O R Y
  30. 30. 47 1. Oral Histories (“living” and archival) 2. Archival Imagery 3. Videos (archival, drone footage, interviews) 4. Interview transcripts 5. Diagrams, technical documentation C O N T E N T D E V E L O P M E N T C O N T E N T AU D I T The goal of the audit it to ingest material and begin to organize/prep it for future use.
  31. 31. 48 1. Bigideastatement 2. Majorstoryarcsandthemes 3. Overviewofthestory withkey moments/storypoints 4. Narrativeapproach 5. Visitorexperienceobjectives 6. Assetoverview C O N T E N T D E V E L O P M E N T C O N T E N T B R I E F : A S TA R T I N G P O I N T F O R D E S I G N
  32. 32. C O N T E N T B R I E F B I G I D E A S TAT E M E N T 49 A very short statement that summarizes the single key takeaway for the experience. It is a way for the team to align around the core message and purpose of the experience. The big idea should capture WHO, WHAT, WHEN, WHERE, and WHY O V E R T H E L A S T C E N T U R Y, T H E W O R K E R S O F B E T H L E H E M S T E E L B U I LT A M E R I C A . I T WA S N ’ T E A S Y.
  33. 33. C O N T E N T B R I E F S T O R Y A R C S A N D T H E M E S 50 5 Themes • Technology • Steelworkers lives • National, regional & global connections • The plant’s impact on the city and region • Ongoing transformation Overall story arcs • Working man as hero • Memorial for great things accomplished • Parallels to American history
 
 Themes can be explicitly shared with visitors (for instance, as categories) or an implicit organizing factor. What is this story about? Story arcs are more general than themes, and refer to how the story is framed. What kind of story is this? 
 

  34. 34. C O N T E N T B R I E F O V E R V I E W W I T H K E Y S T O R Y P O I N T S 51 The content developer needs to communicate to the team (designers, creative director, project manager, developers, partners, etc) what the story is about, and what the most interesting story points are. This ensures the project will be designed for the content.
 

  35. 35. C O N T E N T B R I E F N A R R AT I V E A P P R OAC H 52 The narrative approach defines the writing or “conversation style” for the experience. This includes: • Tone • Perspective • Time 
 

  36. 36. C O N T E N T B R I E F V I S I T O R E X P E R I E N C E O B J E C T I V E S 53 How is success defined? • Learning Objectives • Affective Objectives • Experiential Objectives 
 

  37. 37. C O N T E N T B R I E F A S S E T O V E R V I E W 54 What do we have? What are the best assets? • Video? • Images? • Quotes? • Audio clips? • Other? 
 

  38. 38. Wedevelopcontentinparallelwithdesign.Thetwoprocessesconstantly informoneanother. C O N T E N T + D E S I G N 55
  39. 39. 56 1. ContentFramework 2. ContentMatrices • Imageselection • Videoselection • AudioSelection 3. Copywriting • InterpretiveSigns • Mobile/web • AudioTourScript C O N T E N T D E V E L O P M E N T C O N T E N T D E V E L O P M E N T A N D P R O D U C T I O N
  40. 40. 5757 C O N T E N T D E V E L O P M E N T P L O T T I N G T H E M E S A N D A S S O C I AT I O N S
  41. 41. 58 C O N T E N T D E V E L O P M E N T N A R R AT I V E / T H E M AT I C P L A N 58
  42. 42. 59 C O N T E N T D E V E L O P M E N T C O L L A B O R AT I O N A N D D E L I V E R A B L E S 59 Internal Documents Drafts for Client Review
  43. 43. 60 C O N T E N T D E V E L O P M E N T W E B & M O B I L E F R A M E W O R K First round of wireframes 60
  44. 44. 61 C O N T E N T D E V E L O P M E N T W E B & M O B I L E F R A M E W O R K 61 Second round of wireframes
  45. 45. 62 C O N T E N T D E V E L O P M E N T W E B & M O B I L E F R A M E W O R K 62 Third round of wireframes
  46. 46. 63 C O N T E N T D E V E L O P M E N T W E B & M O B I L E F R A M E W O R K 63 First round of design
  47. 47. 64 C O N T E N T D E V E L O P M E N T W E B & M O B I L E C O N T E N T 64
  48. 48. 65 C O N T E N T D E V E L O P M E N T W E B & M O B I L E C O N T E N T 65
  49. 49. 66 C O N T E N T D E V E L O P M E N T W E B & M O B I L E C O N T E N T 66
  50. 50. 67 C O N T E N T D E V E L O P M E N T N A R R AT I V E S I G N AG E F R A M E W O R K 67
  51. 51. 68 C O N T E N T D E V E L O P M E N T N A R R AT I V E S I G N AG E F R A M E W O R K 68
  52. 52. 69 C O N T E N T D E V E L O P M E N T N A R R AT I V E S I G N AG E F R A M E W O R K 69
  53. 53. 70 C O N T E N T D E V E L O P M E N T N A R R AT I V E S I G N AG E F R A M E W O R K 70
  54. 54. 71 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 71
  55. 55. 72 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 72
  56. 56. 73 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 73
  57. 57. 74 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 74
  58. 58. 75 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 75
  59. 59. 76 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 76
  60. 60. 77 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 77
  61. 61. 78 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 78
  62. 62. 79 C O N T E N T D E V E L O P M E N T T E C H N I C A L S I G N AG E F R A M E W O R K 79
  63. 63. I M PAC T & TA K E AWAY S Conclusion 80
  64. 64. 1. People are stopping and reading the signs! 2. Website/App has had over 65,000 users 3. Local news coverage 4. Awards: 1. Pixel Awards – Best Responsive Design – Finalist 2. W3 – Best In Show, General Website Category 3. Awwwards – Site of the Day 4. Communication Arts – Webpick of the Week H O O V E R - M A S O N T R E S T L E R E C O G N I T I O N 81
  65. 65. 82 P R O C E S S TA K E AWAY S 1. Streamlined content review process with stakeholders 2. Being an icon of American industrial might helps 3. We want more!

×