iFactory and Infomous teamed up to deliver this virtual workshop as part of the FutureM Conference in Boston. --- In a digital landscape that evolves every moment, it is crucial to communicate information clearly and effectively through visual design. We'll take a look at brand modules, infographics and interface innovations and showcase how (and how not!) to combine compelling content with smart and visually appealing design. Presenters were Alen Yen, iFactory President/Creative Director; Jeremy Perkins, iFactory Art Director; and Paolo Gaudiano, Icosystem President and Chief Technology Officer. www.ifactory.com www.infomous.com

1. FunctionalDESIGNLAB ifactory & Infomous For FUTUREM September 12, 2011

2. OVERVIEW 11:30am – 1:30pm

3. DESCRIPTION Functional Design Lab In a digital landscape that evolves every day, it is crucial to communicate information clearly and effectively through visual design. Web hooks such as infographics, brand modules and interface innovations enable you to combine compelling content with smart and visually appealing design. Toeing the line between simplicity and sophistication, the goal, regardless of project size, is to deliver design and functionality in an easily digestible package. So where do you start? What are some of the ways you can present your content in a visually compelling way?

5. Transitioned to online navigation tool in 2010

7. FLOW BASELINE – 5 min TYPICAL SOLUTIONS – 5 min (9) APPROACHES TO EXCELLENT UX – 30 min INFOMOUS: DYNAMIC VISUALIZATION CREATION DEMO – 30 min AUDIENCE CASE STUDY – 15 min Q&A

8. BASELINE ESSENTIAL PREREQUISITES

9. BASELINE WHAT WE’RE NOT COVERING PREREQS TO INNOVATION Robust discovery, architecture and design process Implementation AND maintenance of good technical solution Creation AND continued publication of excellent content

11. Purchasing product

12. Registering an account

13. Exploring

14. SharingSee also: Make Web Visitors Stay Longer by Cinetech

16. Clarification of organizational goals and brand strategy

17. Stakeholder interviews and focus groups

18. Stats analysis

19. Competitive audits

20. User personas

21. Use cases

22. Identify key performance indicators

23. Define metrics for success

24. Information Architecture

25. Sitemaps

26. Wireframes

27. User Experience prototypes

29. BASELINE DESIGN DESIRED SOLUTION On Brand: Clear brand positioning and messaging Articulate: Careful wordsmithing, and strong editorial control Beautiful: Excellence of design, photoimagery, video, illustration Informative: Useful, relevant content Persuasive: Evidence through data: visualizing and showing: not just telling Inspirational: Unique, engaging, compelling, memorable See also: Human Behavior Theories That Can be Applied to Web Design by Alexander Dawson

31. increasing exploration: how to move a user sideways to additional content in order to broaden experience and explorationWe’ll start by understanding the basics – so that we can move beyond them See also: Simple Strategies for Engaging Your Visitors by Andrew Follett

32. TYPICALSOLUTION ANATOMY FOR MOST-PRACTIcED HOMEPAGE AND CONTENT PAGE DESIGNS

34. Deliver organizational brand positioning and messaging

35. Facilitate access to content

38. The same availability of modules and widgets which facilitate transactions and explorations into site-wide offerings should be adapted and made present on all levelsSee also: The decline of the homepage at Giraffe Forum

39. CONTENTPAGE A TYPICAL SOLUTION

40. BEYONDTYPICAL EXAMPLES OF INSPIRING DESIGNS

42. Many “best practices” are really “most practiced”

43. Predictability is important for no-nonsense transactions, but overrated for overall user experience

44. Constraints drive creativity

46. FORMDRIVENDESIGN http://www.delta.com DELTA

47. FORMDRIVENDESIGN FORMDRIVEN http://www.24symbols.com 24 symbols

48. 02BROWSETOOLKITS PROVIDE WAYS FOR USERS TO MINE STACKS OF CONTENT BY TAILORING SEARCH AND BROWSE FOR MINING DATA. WITHOUT FILTERS AND FACETS THAT HELP TO “SHAPE” your content, USERS MAY NOT BE AWARE OF WHAT YOU HAVE.

49. BROWSETOOLKITS http://www.dana-farber.org DANA-FARBER CANCER INSTITUTE

50. BROWSETOOLKITS http://oed.com OXFORD ENGLISH DICTIONARY

51. 03INTERACTIVEBRANDNARRATIVEs DELIVER COMPLEX MESSAGES BY BENDING THE CAROUSEL FORM FACTOR. BIG IMAGES ARE FINE, BUT RICH MEDIA COMPONENTS AND ENGAGING INTERACTION DRAW USERS IN AND LEAVE THEM WITH INDELIBLE IMPRESSIONS.

52. INTERACTIVEBRANDNARRATIVES WHARTON - MBA http://www.wharton.upenn.edu/mba

53. INTERACTIVEBRANDNARRATIVES HARVARD BUSINESS SCHOOL - MBA http://www.hbs.edu/mba

54. 04SINGLEPLANESITES laying down all your content in a massive TABLEUX transforms navigation into exploration. GREAT FOR 5-10 KEYPOINT CONTENT.

55. SINGLEPLANESITEs http://steveandjacqs.com STEVE AND JACQS

56. SINGLEPLANESITEs http://wearemanic.com WE ARE MANIC

57. 05SCROLLTRIGGEREDUX AN ELEMENT OF SURPRISE converts a natural USER action into A MORE dynamic user experience. GREAT FOR LINEAR NARRATIVES AND SEQUENTIAL KEYPOINTS.

58. SCROLLTRIGGEREDUX http://nizoapp.com NIZO

59. SCROLLTRIGGEREDUX http://www.nikebetterworld.com NIKE: A BETTER WORLD

60. SCROLLTRIGGEREDUX http://www.sullivannyc.com sullivan

61. SCROLLTRIGGEREDUX http://www.yurbuds.com YURBUDS

62. 06FIXEDNAVDESIGNS bend the OLD home metaphor BY INTRODUCING A MODAL FORM OF “PAGE.” SURPRISINGLY PREDICTABLE AND EASY TO USE IF DONE WELL, AND KEEPS YOUR CONTENT AND NAVIGATION FRONT AND CENTER.

63. FIXEDNAVDESIGNS http://unionstationdenver.com/neighborhood UNION STATION NEIGHBORHOOD

64. FIXEDNAVDESIGNS http://touchtech.co.nz TOUCHTECH

65. 07DIMENSIONALDESIGNS create a sense of space and place through simulated (NOT JUST ANIMATED) 3D.

66. DIMENSIONALDESIGNS http://wyss.harvard.edu WYSS INSTITUTE

67. DIMENSIONALDESIGNS http://wonder-wall.com/ WONDERWALL inc.

68. DIMENSIONALDESIGNS http://thinkingspace.economist.com THE ECONOMIST – THINKING SPACES

69. 08TEXTMAPPING when dealing with massive amounts of text, MOVE BEYOND LISTS. MORE THAN JUST A GIMMICK, INNOVATIVE TEXT-DRIVEN INTERFACES CAN IMPROVE FUNCTIONALITY THROUGH NEW USER EXPERIENCE.

70. TEXTMAPPING http://www.nytimes.com/skimmer/#/Top+News NEW YORK TIMES – SKIMMER

71. TEXTMAPPING http://newsmap.jp/ NEWSMAP

72. 09DYNAMICVISUALIZATIONS use data to drive interactive maps and INFOGRAPHICS. DATA AS EVIDENCE DRIVES HOME POWERFUL MESSAGES. INTERACTIVITY PROMOTES UNDERSTANDING AND RETENTION.

73. DYNAMICVISUALIZATIONS http://counterspill.org COUNTERSPILL

74. DYNAMICVISUALIZATIONS http://www.messagesforjapan.com/messages/map MESSAGES FOR JAPAN

75. INFOMOUSDEMO Functional Design Applied to Online Text Navigation

78. INFOMOUS WHAT ARE PEOPLE SAYING ABOUT… ...a current event? ...a product? Can you find what is relevant in this content?

80. Editorials

81. Blogs

82. Google/Bing search results

83. Consumer reviews

84. Commentaries

85. Twitter feeds

86. Facebook feeds

87. LinkedIn activitiesWeb surfing becomes overwhelming and information is easily missed!

88. INFOMOUS SOME TYPICAL APPROACHES News readers (e.g., Google) Specify your preferred sources Receive updated “feeds” Widgets Twitter feeds “Most read” Latest headlines Navigation menus

89. INFOMOUS The NYT Skimmer We’ve already seen some more creative approaches Newsmap These approaches improve matters, but still leave the reader with an overwhelming amount of information

90. INFOMOUS Tag clouds provide a quick visual representation of the most prominent terms in a text source. An alternative approach: word/tag clouds

91. INFOMOUS Tag clouds are trying to summarize content, but give you no way to do anything further. Which of the following gives you more useful information? Tag clouds fail to increase exploration: “move a user sideways to additional content in orderto broaden experience and exploration” tag clouds: a fading fad?

93. Flexible, embeddable, highly customizable

94. Typical uses:News readers Social sites Search engines Site navigation

95. INFOMOUS HOW INFOMOUS WORKS Summarize text based on word frequency and adjacency (other text processing possible) Word size representative of “importance” Links and groups depending on co-occurrence Interact (click or hover) with a word to reveal hyperlinks to original sources Hide/remove unwanted words “Focus” on specific words to narrow navigation to relevant topics only Infomous goes WAY beyond tag clouds to increase exploration

96. INFOMOUS INFOMOUS HELPS YOU FIND RELEVANT CONTENT AND EXPLORE 2. Find what is relevant 1. See the news 3. Increase exploration

97. INFOMOUS FOLLOW RELEVANT CONVERSATIONS ...about current events ...about products

98. INFOMOUSapplication how to use infomous for functional design

99. INFOMOUS you can Embed any infomous cloud on any website simply by including a snippet of html added benefit: infomous is easy to embed within any site

100. INFOMOUS TOUR OF SAMPLE APPLICATIONS Reader opinions: The Economist, Washington Post Academic content: IMD Integrated news site navigation: FCNP blog navigation: Nova SPivack consumer reviews: DOOYOO

101. INFOMOUSPERFORMANCE HOW WELL DOES INFOMOUS PERFORM?

103. 2.5%CLICK-THROUGH BY ENGAGED USERS

104. 35x increase in length of time spent on sitewhen engaged with infomous cloud (stickiness)68 2011 Infomous, Inc. - all rights reserved INFOMOUS SAMPLE RESULTS: THE ECONOMIST user commentary pages

106. over 50% CLICK-THROUGH BY ENGAGED USERS

107. 7x increase in length of visit for engaged users69 2011 Infomous, Inc. - all rights reserved INFOMOUS SAMPLE RESULTS: THE WASHINGTON POST special page on unemployment

108. INFOMOUS futurem: events page 1.4% engagement 14.6% CLICK-THROUGH 52% shorter visits! caveat emptor: not a silver bullet! what went wrong???

109. INFOMOUS just like any other “widget,” many factors impact INFOMOUS performance Page placement: WashingtonPost is above the fold – 10.5% engagement Economist is below the fold – 3% engagement Title: need to make it clear what this widget is supposed to do Always include “interactive” Content sources: Choose meaningful feeds More feeds are better in some cases Word quality: curate cloud content carefully Blend of sources, hide meaningless/confusing words Integration: take care of size and layout Match the site look-and-feel Exploration: think about where you are taking your usersFutureM’s feeds are all pointing to external sites! lessons learned

110. AUDIENCECASESTUDY University of Arkansas for medical sciences Fay W. Boozman College of Public Health

111. UAMS http://uams.edu/coph COLLEGE OF PUBLIC HEALTH

112. UAMSQUICKFIX COLLEGE OF PUBLIC HEALTH RAPID AUDIT Non-standard primary and secondary navigation scheme Long, list-style navigation without effective clustering Endorser site homepage linked to logo creates navigation issue Inability to jump laterally to sibling sites or overtly up/down to endorser site Non-standard location of Search functionality Lack of well-crafted brand message and positioning Impersonal hero image lacking in meaning No social media streaming Mysterious ad lobs Inconsistent site design in subsections Non-adaptive design, optimized for older screen resolutions Use of image-mapped graphical text impairs discoverability Roll-overs, flyouts, and dropdowns could optimize navigation design Brand and content carousels could clarify organizational messages, and featured content

113. UAMS COLLEGE OF PUBLIC HEALTH SOLUTION RESULTS LOREM IPSUM SIT DOLOR LOREM IPSUM SIT DOLOR LOREM IPSUM SIT DOLOR LOREM IPSUM SIT DOLOR:

114. UAMSQUICKFIX CHECKLIST FROM EARLIER: DESIRED SOLUTION On Brand: Clear brand positioning and messaging a Articulate: Careful wordsmithing, and strong editorial control a Beautiful: Excellence of design, photoimagery, video, illustration a Informative: Useful, relevant content a Persuasive: Evidence through data: visualizing and showing: not just telling a Inspirational: Unique, engaging, compelling, memorable

115. UXDESIGN MORE OF WHAT WE DIDN’T DO UX PROCESS Problem/opportunities defined by Discovery Baseline functionality dictated by wireframes Concept ideation through sketches, prototypes, and renderings Validation through testing

116. UXDESIGN PROCESS FOR WYSS INSTITUTE FOR BIOLOGICALLY INSPIRED ENGINEERING DISCOVERY > IA > UX > DESIGN > IMPLEMENTATION > MAINTENANCE > http://ifactory.com/clients/wibie/design/artdir1/index.html (password protected)

117. badEXAMPLES SITES THAT DIDN’T CUT IT

118. badEXAMPLES SITES THAT DIDN’T CUT IT For one reason or another, the following sites attempted to use some of the preceding techniques and ended up with solutions that fell short: http://www.the-girl-store.org/shop http://www.cascadebreweryco.com.au/ http://lieblingdesign.dk/ http://deeptime.info/ http://natl.tv/

119. Q&A

120. THANKYOU IFACTORY and INFOMOUS FOR FUTUREM Paolo Gaudiano, Paolo@Infomous.com, 617.520.1070 Pete Gaioni, Pete@ifactory.com, 617 426.0609 Lori Loturco, Lori@ifactory.com, 617 426.0609 Jeremy Perkins, Jeremy@ifactory.com, 617.426.0609 Alen Yen, Alen@ifactory.com, 617.426.0609 SEPTEMBER 12, 2011 WWW.IFACTORY.COM