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.

Content Strategy + Navigation Design: UX Overview + Considerations

4,210 views

Published on

An overview of the key aspects and elements in creating effective ux, content strategy and navigation for content- intensive sites, from publishing to commerce, starting with the basics of CMSes and how most content sites are structured. Taught at a 1-day workshop at General Assembly, 8/17/14.

Published in: Design, Marketing, Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Content Strategy + Navigation Design: UX Overview + Considerations

  1. 1. CONTENT STRATEGY + NAVIGATION DESIGN Key Considerations for Web & Mobile OXFORD TECHNOLOGY VENTURES General Assembly August 17, 2014 ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org
  2. 2. QUESTIONS OXFORD TECHNOLOGY VENTURES 1. Have own Project to Research? 2. Familiarity with CMSes? 3. Level of Familiarity with Web Metrics? 4. Ecommerce vs . Publishing/ Media? 5. UXers? 6. # Years Experience in Tech / Digital?
  3. 3. GA: Content Sites l August 2014 The Hunt! http://www.cefa.ca/wp-content/uploads/2014/04/1449526921.jpg
  4. 4. What You Don’t Want GA: Content Sites l August 2014 http://www.1800attorney.com/
  5. 5. Don’t Make Me Think! GA: Content Sites l August 2014 http://cailincreature.blogspot.com/2010_06_01_archive.html
  6. 6. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  7. 7. Today Context - Exercise: Share Crappy, Great Sites ! Components - CMS Basics - Layout - Content - Recirculation - Exercise: Find Recirculation Examples - Search - Navigation - Exercise: Find Navigation Examples - Web Metrics for Content ! Process Steps 1. KPIs, Goals & Metrics - Exercise: Define 2. Analyze Competitor Performance - Exercise: Analyze Competitors 3. Competitor & Site Analysis - Exercise: Examine Competitors 4. Concepting & Prototyping 5. Research, Testing & Optimization - Exercise: Card Sorts ! Summary GA: Content Sites l August 2014
  8. 8. Be a Competent UX Generalist GA: Content Sites l August 2014 http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_knife1.jpg Content UX
  9. 9. CONTEXT OXFORD TECHNOLOGY VENTURES
  10. 10. ▪ Data-driven UX / Product / Strategy agency ▪ Founded 2008, NYC & SF ▪ My background: Product, UX. MBA + MS Tech/UX ▪ OxfordTech.us ▪ Effective ▪ Useful ▪ Engaging ▪ Lots of content, publishing, media GA: Content Sites l August 2014
  11. 11. Clients GA: Content Sites l August 2014
  12. 12. Product Development GA: Content Sites l August 2014
  13. 13. UX Awards Premier awards for exceptional digital experience, now in its 4th year GA: Content Sites l August 2014 UXAWARDS.ORG
  14. 14. GA: Content Sites l August 2014 What is UX? http://etc.usf.edu/clipart/70500/70542/70542_264_ra-090_o_lg.gif
  15. 15. User Centered Design AUDIENCE ! CUSTOMER PROBLEM ! RESEARCH ! PROTOTYPE ! VALIDATE, EVALUATE, TEST ! ITERATE GA: Content Sites l August 2014
  16. 16. Holistic Design Thinking Assumptions true? How to improve? GA: Content Sites l August 2014 Who is your customer? What’s their problem? What’s your solution? How help solve customer problem in best, fastest way?
  17. 17. Lean Startup = Good UCD / UX GA: Content Sites l August 2014 MEASURE LEARN IDEA/ BUILD
  18. 18. Content & Navigation: Easy to Iterate GA: Content Sites l August 2014
  19. 19. PICK A TEAM! FORM TEAMS OF 3 INTRODUCE YOURSELF
  20. 20. CRAPPY SITES! SHARE SITES YOU HATE & WHY WHAT TRYING TO DO -> WHY DIFFICULT
  21. 21. GREAT SITES! SHARE SITES YOU LOVE & WHY WHAT TRYING TO DO -> WHY EASY/ ENJOYABLE
  22. 22. OXFORD TECHNOLOGY CONTENTV SENITTUERSE:S COMPONENTS
  23. 23. OXFORD TECHNOLOGY VENTURES CMS BASICS
  24. 24. Old In-Line HTML: Content, Display + Code GA: Content Sites l August 2014
  25. 25. Now: CMSes with Content, Display & Code Separation GA: Content Sites l August 2014
  26. 26. Now: CMSes with Content, Display & Code Separation GA: Content Sites l August 2014
  27. 27. How CMSes Work INTEGRATED DISPLAY OF WHAT YOU SEE… PRESENTATION UI: CSS, JS LIBRARIES PRESENTATION CODE: MODULES, AUTOMATED CONTENT 3RD PARTY CONTENT (IFRAMES, EMBEDS) CONTENT (TEXT, IMAGES, VIDEOS) TEMPLATES CONTENT TYPES GA: Content Sites l August 2014 CORE SITE CODE DATABASE
  28. 28. UX & CMSes PRESENTATION UI: CSS, JS LIBRARIES PRESENTATION CODE: MODULES, AUTOMATED CONTENT 3RD PARTY CONTENT (IFRAMES, EMBEDS) CONTENT (TEXT, IMAGES, VIDEOS) TEMPLATES CONTENT TYPES GA: Content Sites l August 2014 DATABASE INTEGRATED DISPLAY OF WHAT YOU SEE… CORE SITE CODE
  29. 29. CMS Characteristics ▪ Separate content from presentation code and site code ▪ Define content display by types / templates ▪ WYSIWYG editors in most enables content creators to use without knowledge of coding ▪ Enables reuse of elements ▪ Enforces consistency of global elements and styles ▪ Easier to upgrade, modify and scale ▪ Stateful (save state/ make revisions/ schedule/ revert) ▪ Benefit from a global standards & a global development community GA: Content Sites l August 2014
  30. 30. HUNDREDS of CMSes! ▪ http://en.wikipedia.org/wiki/ List_of_content_management_systems ▪ http://www.cmscritic.com/dir/enterprise/ ▪ http://www.opensourcecms.com/general/ ratings.php ▪ http://www.cmsmatrix.org GA: Content Sites l August 2014
  31. 31. Wordpress GA: Content Sites l August 2014
  32. 32. Tumblr, Blogger, Facebook, Twitter… GA: Content Sites l August 2014
  33. 33. CMSes for Ecommerce ▪ Same principles + optimized cart, checkout, payments, admin views of sales, content types for products, page templates for selling, inventory management integrations ▪ Exs: Magento, OpenCart GA: Content Sites l August 2014 http://i2.wp.com/www.excellencemagentoblog.com/wp-­‐content/uploads/2011/10/checkoutremovepayment.png?resize=620%2C314
  34. 34. Terminology Heatmap Card Sort SEO GA: Content Sites l August 2014 http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_knife1.jpg Hero Content Architecture CONTENT Content Strategy Information Architecture Information Taxonomy Right Rail Modal Design Header/ Footer
  35. 35. LAYOUT
  36. 36. Content GA: Content Sites l August 2014 Header Navigation Footer Modules Sidebar/ Right Rail Templates
  37. 37. Most Common Content Templates ▪ Article ▪ Homepage ▪ Channel/ Category/ Topic ▪ Slideshow ▪ Image Grid ▪ List ▪ Tabbed Vertical List ▪ Quiz/ Survey/ Contest/ Poll ▪ Video ▪ Single Image / Video ▪ Search ▪ Bio/ Author ▪ Blank GA: Content Sites l August 2014
  38. 38. Basic Layout Elements: Desktop Content GA: Content Sites l August 2014 Header Navigation Footer Modules Sidebar/ Right Rail
  39. 39. Responsive Design: Tablet Header Navigation Content Sidebar/ Right Rail Modules Footer GA: Content Sites l August 2014
  40. 40. Responsive/ Adaptive: Mobile Header Navig Content Sidebar/ Right Rail Modules Footer GA: Content Sites l August 2014 Header Navig Content Modules Footer
  41. 41. Article (NY Times) GA: Content Sites l August 2014
  42. 42. Article (Buzzfeed) GA: Content Sites l August 2014
  43. 43. Product Detail Macy’s, Sabon GA: Content Sites l August 2014
  44. 44. Optimizing for Audience, Usage, Norms GA: Content Sites l August 2014
  45. 45. Case of Infinite Scroll Browse Pages ▪ Pinterest started the trend (+ Facebook, LinkedIn, Buzzfeed, others later) ▪ Brief moment of glory- now disappearing in ecommerce & many content sites ▪ Spurs engagement (Time spent, clicks) - AND anxiety (Nir Eyal’s research) ▪ Depending on implementation- can be bad for SEO buzzfeed, GA: Content http://Sites www.smashingmagazine.l August 2014 com/wp-­‐content/uploads/2013/01/infinite-­‐scroll-­‐vs-­‐pagination.png
  46. 46. Single-Message/ Action Landings ▪ 3rd Party Landing Page Services Do the Work For You! ▪ Launchrock, Unbounce ▪ For Static Messaging ▪ Pre-Optimized Templates: Great for Marketing, Commerce GA: Content Sites l August 2014
  47. 47. CONTENT
  48. 48. UX vs. Editorial (Content Strategy) ▪ Content Programming: Editorial Job ▪ UX: our job ▪ In-template Fixed Text ▪ Style guides & Samples ▪ Calls to Action & Buttons ▪ Error States/ Messages ▪ Business & Editorial Rules for Automated modules ▪ Information Hierarchies ▪ Navigation ▪ Taxonomies & Keywords ▪ Sitemap, Content Categories & Sub-Categories ▪ Middle ground: Brand Positioning; Brand Message; Landing Pages GA: Content Sites l August 2014
  49. 49. Role of Homepage http://4.bp.blogspot.com/-­‐tv8iixow504/Ue9d_7UWEQI/AAAAAAAAUC4/0S4KcSSKd08/s1600/The+New+York+Times+photo.jpg GA: Content Sites l August 2014
  50. 50. Flexibility vs. Consistency & Manual Work ▪ All Manual = Most Flexible but most work ▪ All Automated = Must Consistent but Least Flexible (for Editorial) ▪ Google conundrum with EU ruling ▪ Typical: A Mix/ Override Rules, based on template type GA: Content Sites l August 2014
  51. 51. GA: Content Sites l August 2014 UGC: Old vs. New reddit, buzzfeed, http://cdn.inmotionhosting.com/support/images/stories/edu/phpbb/overview/forum-­‐overview.png
  52. 52. “Linkbait”: Reddit, Buzzfeed, PlayBuzz, Upworthy & The Clickable Headline GA: Content Sites l August 2014
  53. 53. Advertorial/ Native Advertising GA: Content Sites l August 2014 http://techcrunch.com/2014/08/12/buzzhome/
  54. 54. “Multimedia” + Video, Visual Web !!!!!!!!!!!!!! https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300! !!! GA: Content Sites l August 2014
  55. 55. Social Memes & Images http://memegenerator.net/images/popular/week GA: Content Sites l August 2014
  56. 56. Visual Web Considerations ▪ Subject Matter ▪ UX: Context & Usage ▪ Demographics (Text vs. Images, Video) ▪ Age ▪ Income ▪ Education ▪ Geography ▪ Platform/ Device & Bandwidth GA: Content Sites l August 2014
  57. 57. RECIRCULATION
  58. 58. Internal Site Metrics- Top Entry, Exit Points GA: Content Sites l August 2014
  59. 59. Traffic Patterns (Every Page a Landing) Top Sections (Comscore) ! Top paths (Comscore) GA: Content Sites l August 2014
  60. 60. Recirculation Techniques ▪ Manual Selection ▪ Automated, based on Rules ▪ A/B & MVT Driven ▪ In-Line/ Middle ▪ At Bottom ▪ At Beginning ▪ At End ▪ At Side ▪ At Top ▪ Overlay ▪ Takeover ▪ “Next Up” http://www.nytimes.com/2014/08/17/us/ferguson-­‐missouri-­‐protests.html?hp&action=click&pgtype=Homepage&version=LedeSum&module=a-­‐lede-­‐package-­‐region&region=lede-­‐package&WT.nav=lede-­‐GA: Content Sites l August 2014
  61. 61. Recirculation Techniques http://imgur.com/gallery/hXQYK4B GA: Content Sites l August 2014
  62. 62. Automated Recirculation Suggestions ▪ Most Popular/ Viewed/ Purchased ▪ Most Commented ▪ Most Shared ▪ “Trending” ▪ Others’ Behavior (Viewed/Bought X also Viewed/Bought) ▪ Demographics (People Like You also Like…) ▪ Related Subject/ Section/ Topic ▪ Similar Product/ Style/ Color/ Price ▪ Related Keyword ▪ Tagged to be Featured ▪ Sponsored ▪ Time-Specific (Recent) ▪ By Source/ Location/ Author ▪ Unrelated Topic/ Product (You Might Also Like/ More From) GA: Content Sites l August 2014
  63. 63. 3rd Party Tools: Outbrain, Taboola http://money.cnn.com/2013/08/15/technology/security/outbrain-­‐hack/ GA: Content Sites l August 2014
  64. 64. Article Footers NYTImes, Buzzfeed GA: Content Sites l August 2014
  65. 65. Article Recirculation- Mobile GA: Content Sites l August 2014
  66. 66. Thinking Outside the Box OxfordTech.us | Web Metrics l July 2014
  67. 67. SHARE EXAMPLES! IDENTIFY & SHARE EXAMPLES OF RECIRCULATION METHODS USED ON COMMON SITES
  68. 68. SEARCH
  69. 69. Browse vs. Search ▪ Explicit vs. Hidden: out of sight / out of mind ▪ Browse: Unknown or Category-Based Direction ▪ Discovery ▪ Entertainment & Education ▪ Visuals ▪ Search: Specific Focus/ Item ▪ Task Based ▪ Speed & Utility ▪ Known Text & Keywords ▪ Demographics also Influence Which ▪ You Usually Need Both GA: Content Sites l August 2014
  70. 70. Search Options ▪ Predictive: Type-Ahead ▪ Faceted (Structured, with Filters/ Sorts) ▪ Suggested ▪ Programmed ▪ Grid vs. List ▪ Which Sections to Include… ▪ Relevance/ Date/ Location of Keyword… nytimes search GA: Content Sites l August 2014
  71. 71. Faceted Search Dr. Weil’s Vitamin Advisor GA: Content Sites l August 2014
  72. 72. Search as Browse/Channel Buzzfeed GA: Content Sites l August 2014
  73. 73. Search: Type-Ahead GA: Content Sites l August 2014 sabon.com, amazon.com
  74. 74. Suggested / Programmed Search Google GA: Content Sites l August 2014
  75. 75. NAVIGATION
  76. 76. I Know It’s Here Somewhere… http://346fae7859434bda978f-­‐1902f231618c5697bb2c852c565827b8.r12.cf5.rackcdn.com/wp-­‐content/uploads/2014/02/diving1.jpg GA: Content Sites l August 2014
  77. 77. Header: Branding, Message, Usability ▪ Importance of consistency (consistent global header) ▪ Stateful (shows where you are) ▪ Has logo, brand ▪ Tagline/ Descriptors - esp. if unknown & not obvious ▪ Upper Right: Search/ Login/ Social GA: Content Sites l August 2014 buzzfeed.com, nytimes.com
  78. 78. Align Navigation with User Goals ▪ Define Audience ▪ Define Goals, Needs ▪ Look at Metrics- optimize (Searches) ▪ Competitors- standardize wording ▪ Simplify ▪ Test & Refine GA: Content Sites l August 2014
  79. 79. Navigation Best Practices ▪ 7x7 guideline (not just for PowerPoint!) ▪ Breadth/Depth Balance ▪ Simple, Common, Standard Words (Research) ▪ Home/ Overview ▪ Persistent, Pervasive & Consistent ▪ Stateful ▪ Clear rules (alphabetical/popular…) ▪ Traditional placements (logo, login, search) GA: Content Sites l August 2014
  80. 80. Navigation Types ▪ Editorial -Manual ▪ Tag-Based ▪ Content Hierarchy/ Sitemap Based ▪ Taxonomy/ Keyword Based ▪ Personalized GA: Content Sites l August 2014
  81. 81. Navigation Defaults GA: Content Sites l August 2014
  82. 82. Navigation Placement, Formats ▪ DESKTOP ▪ Top- Horizontal + Horiz Subnav ▪ Left Nav- Accordion ▪ Top Nav & Left Subnav ▪ Dropdowns, Flyouts (desktop) ▪ Tabs & Sections ▪ Funnels/ Wizards/ Step by Step sequences ! ▪ MOBILE ▪ Swipe Left-Right ▪ Shake ▪ Upper right bars ▪ Top-Horizontal ▪ Buttons/ Rows ▪ Dropdown/Flyouts on Tap ▪ Expanded Left Region on Tap GA: Content Sites l August 2014
  83. 83. Mobile Flyouts GA: Content Sites l August 2014
  84. 84. Navigation Menus for Lots of Content: Mega-Dropdown (Desktop) old healthguru GA: Content Sites l August 2014
  85. 85. Navigation on Mobile: Implicit/ Explicit & Levels Header Navi Modules Footer GA: Content Sites l August 2014 Header Navi Navig A > Navig B > Navig C > Navig D > Navig E > Modules Footer Navi g A > Navig B > Navi g C > Header Navi Navig A > Navig B > Navig C > Navig D > Navig E > Navig F > Modules Footer
  86. 86. Mega-Dropdowns vs. Mobile sabon, home depot GA: Content Sites l August 2014
  87. 87. Navigation for Branding, Narrative dr weil’s vitamin advisor GA: Content Sites l August 2014
  88. 88. Wording: SEO, Keyword Research ▪ Google Keyword Planner ▪ Competitors ▪ Card Sorts GA: Content Sites l August 2014
  89. 89. Icons vs. Text GA: Content Sites l August 2014
  90. 90. Usability: Cutting Edge vs. Expected ▪ Tradeoffs: Predictable/Boring vs. New/Challenging ▪ Demographics of Audience ▪ User Goals & Utility, Sector & Context ▪ OS/ Platform & Company (Google /Apple /MS excluded) GA: Content Sites l August 2014 http://mac.blorge.com/wp-­‐content/uploads/2009/09/gannied_out.jpg
  91. 91. Voice, Sensors, Movement, Shaking… GA: Content Sites l August 2014
  92. 92. GREAT CONTENT-CRAP SITE! SHARE EXAMPLES OF SITES WITH POOR NAVIGATION OR SEARCH (ECOMMERCE OR CONTENT) DISCUSS IMPROVEMENT APPROACHES
  93. 93. WEB METRICS FOR CONTENT
  94. 94. What are Metrics? #%<> GA: Content Sites l August 2014
  95. 95. Research +Testing Methods for Content • HALLWAY USABILITY • OBSERVATION • INTERACTIVE TESTING (EYE TRACKING, ETC.) • HEAT MAPS • CARD SORTS • SURVEYS • HEURISTIC EVALUATIONS • MARKET RESEARCH • PUBLIC METRICS RESEARCH • METRICS ANALYSIS • MVT & A/B OxfordTech.us | Web Metrics l July 2014 http://www.dsr.wa.gov.au/assets/images/Diagrams/Darts-playing-area.gif!
  96. 96. Metrics Data Sources ▪ Web- public & competitor ▪ Web- internal / private ▪ Social ▪ Mobile Apps ▪ User Testing & Analysis ▪ MVT & A/B ▪ Surveys ▪ Ecommerce GA: Content Sites l August 2014
  97. 97. How PUBLIC Web Metrics Work ! Statistical Samples ▪ JavaScript ▪ Cookies ▪ Pixels ▪ Server-side tracking ▪ Web Traffic Public = Inaccurate ▪ Won’t be listed on public metrics sites if too small/ new ▪ Heed the warnings GA: Content Sites l August 2014 http://www.wsgsystems.com/uploads/images/cookies_large.jpg
  98. 98. Metrics Categories TRAFFIC ! ENGAGEMENT ! AUDIENCE ! PLATFORM ! (REVENUE) GA: Content Sites l August 2014
  99. 99. Key Traffic Web Metrics MARKETING FOCUS ▪ Uniques ▪ Visits ▪ % from Search -Paid vs. Organic, Top Referring Terms ▪ % from Social ▪ % direct-load ▪ Top Referring Domains GA: Content Sites l August 2014
  100. 100. Key Engagement Web Metrics UX FOCUS ▪ Visits/ Unique ▪ Page Views (PV) ▪ PVs/Visit, PVs/ Unique ▪ Time Spent ▪ Bounce Rate (1 page/ visit) Top Entry / Exit Pages ▪ Top Sub-Sites/ Sections GA: Content Sites l August 2014 http://blog.hugeaim.com/static/wp-content/uploads/2011/07/ballbounce.jpg
  101. 101. Key Audience Web Metrics ▪ Demographics- Age, Income, Gender, Education, Location, Ethnicity, Marital Status, Kids GA: Content Sites l August 2014 http://clipartist.info/openclipart.org/SVG/rejon/person_outline_4-800px.png
  102. 102. Key Platform Web Metrics DESIGN FOCUS ▪ % Mobile ▪ Display size & resolution - desktop & mobile ▪ OS, Device, Web Speed GA: Content Sites l August 2014 http://www.gizmoville.com/wp-content/uploads/2012/02/omgitsfullofpixels.png
  103. 103. Summary - Public Web Metrics TRAFFIC- MARKETING ▪ Uniques ▪ Visits ▪ % from Search -Paid vs. Organic, Top Referring Terms ▪ % from Social ▪ % direct-load ▪ Top Referring Domains ▪ Bounce Rate (1 page/ visit) ! AUDIENCE - EVERYONE ▪ Demographics- Age, Income, Gender, Education, Location, Ethnicity, Marital Status, Kids GA: Content Sites l August 2014 ENGAGEMENT- UX ▪ Visits/ Unique ▪ Page Views (PV) ▪ PVs/Visit, PVs/ Unique ▪ Time Spent ▪ Bounce Rate (1 page/ visit) ▪ Top Entry / Exit Pages ▪ Top Sub-Sites/ Sections ! PLATFORM- DESIGN ▪ % Mobile ▪ Display size & resolution - desktop & mobile ▪ OS, Device, Web Speed ! !
  104. 104. Internal Metrics ! ▪ Usually more accurate ▪ Requires at least some development ▪ Little competitor visibility (unless high-cost) ▪ Click path Analysis ▪ Heat map Analysis ▪ % Logged In/ Out ▪ Ecommerce: ARPU/RPC, R/T, R/V ▪ Data by Sections/ Categories GA: Content Sites l August 2014 ▪ Top & Bottom Performing Pages, Sections ▪ Top Entry/ Exit Pages, Sections- More Detailed ▪ Top On-Site Search Terms, 404 pages ▪ % Mobile by Page/ Section/ category ▪ Demographics- Politics, Interests, Credit, Job, Title http: //www.damenationblog.com/wp-content/uploads/2012/06/iStock_000019717637Smal l . jpg
  105. 105. Key Internal Site Metrics- Top Sections GA: Content Sites l August 2014
  106. 106. Internal Clickpaths Click path Analysis from Homepage GA: Content Sites l August 2014
  107. 107. Internal Metrics Paths vs. Navigation GA: Content Sites l August 2014
  108. 108. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  109. 109. ?
  110. 110. PROCECSASS VSETNTEUPRSES
  111. 111. 1. CASVENTURES KPIS, GOALS, METRICS
  112. 112. BUSINESS KPI (RED) & UX (BLACK) Goals GA: Content Sites l August 2014 < “UPSELL” TO LOGIN/ PAY < VIDEO DISCOVERY ACROSS SHOWS WATCH < FULL VIDEOS DISCOVER < SHOWS
  113. 113. Quantify Your Goals REDUCE BOUNCE BY 20% GA: Content Sites l August 2014 INCREASE AVE PV/S BY 20%+! ! UX: CONTENT DISCOVERY + ENGAGEMENT
  114. 114. Most Common Content Goals Traffic, Engagement, Retention, Interaction ! ENGAGEMENT ▪ Content Discoverability ▪ Interaction ▪ Recirculation ▪ Sharing ▪ Time Spent ▪ PVs/Visit ▪ Usability (Navigation) ! TRAFFIC ▪ Uniques & Visits! ▪ Sharing ▪ Retention (Visits/Unique) ▪ Lowered Bounce ! ! GA: Content Sites l August 2014
  115. 115. Define Your KPIs / Measurements Metrics & Measurements will differ based on the type of content, site EXAMPLES ECOMMERCE ARPU or RPV, R/T, R/V, CTR, CONVERSION RATE VIDEO TIME SPENT, # VIDEO VIEWED/VISIT, # REPEAT VISITS, UNIQUES TEXT CONTENT PV/V, V/UNIQUE, TIME SPENT AD-DRIVEN IMPRESSIONS, MONTHLY PVs, PV/V SOCIAL SHARES, LIKES, FAVES, FOLLOWS GA: Content Sites l August 2014
  116. 116. Translate into UX Features < CONTENT DISCOVERY < BROWSE OPTIONS < REFINED SEARCH < TAGS, CATEGORIES < AUTO-SUGGEST BY BEHAVIOR, METRICS, SIMILARITY < VISUAL- VIDEO, PHOTOS, SLIDESHOWS GA: Content Sites l August 2014 < SOCIAL ENGAGEMENT ONSITE + LOGINS < SOCIAL SHARING < CLEAR NAVIGATION < SEO, KEYWORDS < EMBEDDED ECOMMERCE
  117. 117. ?
  118. 118. PICK A SITE! AS A TEAM, CHOOSE A (CRAPPY) CONTENT OR ECOMMERCE SITE AS YOUR MAIN FOCUS FOR THE REST OF THE WORKSHOP
  119. 119. YOUR TURN! DEFINE LIKELY GOALS + METRICS FOR YOUR SITE ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org
  120. 120. Your Site: Define Goals, Metrics, Features ! ▪ Define Business Goals ($) ! ▪ Define Primary User/ Visitor Needs & Goals ! ▪ Define How would measure each ! ▪ Define Metrics for measurement ! ▪ Translate Business & User Goals into UX Goals/ Characteristics ! ▪ Define based on specific UX/ Product features ! ! GA: Content Sites l August 2014
  121. 121. 2. CAANSVAENLYTUZREES COMPETITOR PERFORMANCE
  122. 122. Don’t Be Square. GA: Content Sites l August 2014 29
  123. 123. Time Spent (UX) GA: Content Sites l August 2014
  124. 124. Bounce Rate GA: Content Sites l August 2014
  125. 125. Pageviews vs. Time Spent GA: Content Sites l August 2014
  126. 126. Traffic: Uniques or Visits Over Time Visits/Time GA: Content Sites l August 2014
  127. 127. Demographics & Content GA: Content Sites l August 2014
  128. 128. Value of Public Metrics: How many trees? GA: Content Sites l August 2014 ?
  129. 129. GA: Content Sites l August 2014 Theory of Relativity chican-izmo.blogspot.com/2010/06/if-tree-falls-in-forest.html
  130. 130. YOUR TURN! GO TO SIMILARWEB.COM & RESEARCH YOUR SITE VS . 5 COMPETITORS FOR -UNIQUE VISITS - AVE. TIME SPENT/ VISIT !
  131. 131. Getting the Data: Excel http://www.similarweb.com/website/nameofsite.com ▪ Make a new spreadsheet with companies as column A and columns B-C marked for unique visits, time spent/visit ▪ Enter data from Similarweb into each column ▪ Mark date range, source, URL for your data GA: Content Sites l August 2014
  132. 132. Graph Comparisons ▪ Select all and sort by column B ▪ Select data, then choose Insert > Column Chart while Data is selected. ▪ Do same for others to make more charts GA: Content Sites l August 2014
  133. 133. CASVENTUR3E.S COMPETITOR & SITE ANALYSIS
  134. 134. GA: Content Sites l August 2014 Borrow from the Best h t tp: //i m a g e s 4 . fanpop.com/image/p h o to s / 14700000/S e e -n o - ev i l -h e a r-n o - ev i l - sp e a k-n o - ev i l -monkey s-14750406 -1600-1200. jpg
  135. 135. Competitor Heuristic Evaluation ▪Deep-dive into high-performers- how & why ▪Correlated to the high-performing sites from metrics GA: Content Sites l August 2014
  136. 136. Competitor Heuristic Evaluation GA: Content Sites l August 2014
  137. 137. Try to find out the WHY behind the #s GA: Content Sites l August 2014
  138. 138. Internal Heuristic- Deep Dive on Key Pages GA: Content Sites l August 2014
  139. 139. YOUR TURN! EXAMINE YOUR SITE VS . ITS 5 COMPETITORS TO DETERMINE WHY PVS, TIME SPENT MAY BE SO DIFFERENT ! ENSURE TO EXAMINE MOBILE VS. DESKTOP DISCUSS & SHARE YOUR FINDINGS
  140. 140. 4. CONCECPASTVIENNTGU R&ES PROTOTYPING
  141. 141. Prototype New Directions GA: Content Sites l August 2014
  142. 142. 5. RECSAESVAERNTCUHRE,S TESTING & OPTIMIZATION
  143. 143. Audience Sentiment & Surveys Role of Net Promoter Score (NPS) http://www.netpromoter.com/why-­‐net-­‐promoter/know/ GA: Content Sites l August 2014
  144. 144. On-Site Metrics Analysis Web vs. mobile activity by Site Section GA: Content Sites l August 2014
  145. 145. Layout Metrics Tools: Heatmaps GA: Content Sites l August 2014 inviteads.com/wp-content/uploads/2013/07/Heatmap.jpg
  146. 146. Real-Time Optimization: Chartbeat GA: Content Sites l August 2014
  147. 147. MVT & A/B http://www.matraxis.co.uk/services/ab-multivariate-testing/ GA: Content Sites l August 2014
  148. 148. Observation GA: Content Sites l August 2014
  149. 149. Hallway Usability: Prototypes GA: Content Sites l August 2014 ANDREW MCKINNEY! http://andrewmckinney.com/projects/weight-watchers-iphone-app/
  150. 150. Card Sorts: Test Your Navigation TYPES ▪ OPEN: participants self-organize cards (content) into self-defined categories (generative) ▪ CLOSED: participants self-organize cards (content) into pre-defined categories (evaluative) ▪ REVERSE: participants aim to find a specific piece of content in pre-defined categories (evaluative) ! FORMATS ▪ MANUAL ▪ ONLINE: ▪ http://www.optimalworkshop.com/optimalsort.htm ▪ http://www.userzoom.com ▪ http://www.simplecardsort.com/ ! ! ! GA: Content Sites l August 2014
  151. 151. TESTING GROUP CASVENTURES EXERCISE: IN PERSON CARD SORTS
  152. 152. Group Exercise: In-Person Card Sorts “CLOSED” SORT ▪ TAKE PAPER & RIP UP INTO PIECES ▪ MAKE ABOUT 20 WORDS FOR SOME SUB-CATEGORIES, CATEGORIES, ITEMS ON YOUR CHOSEN SITE ▪ GIVE TO A PARTICIPANT FROM ANOTHER GROUP TO ORGANIZE BASED ON THEIR LOGIC (SWAP 1 MEMBER) ▪ COMPARE TO HOW YOU WOULD HAVE ORGANIZED ! “REVERSE” SORT ▪ STRUCTURE THE WORDS BASED ON THE REAL SITE HIERARCHY OF CATEGORIES, SUBCATEGORIES, ITEMS ▪ ENSURE ALL TOP-LEVEL HIERARCHIES ARE REPRESENTED; SUBCATEGORIES ARE “INSIDE”/ UNDERNEATH & ITEMS BELOW THAT ▪ TASK A PARTICIPANT FROM ANOTHER GROUP WITH FINDING A SPECIFIC ITEM WITHIN THE STRUCTURE (CHOOSING THE RIGHT CATEGORY) ! ! GA: Content Sites l August 2014 !
  153. 153. SCUASMVEMNTAURRYES
  154. 154. Review Context - Exercise: Share Crappy, Great Sites ! Components - CMS Basics - Layout - Content - Recirculation - Exercise: Find Recirculation Examples - Search - Navigation - Exercise: Find Navigation Examples - Web Metrics for Content ! Process Steps 1. KPIs, Goals & Metrics - Exercise: Define 2. Analyze Competitor Performance - Exercise: Analyze Competitors 3. Competitor & Site Analysis - Exercise: Examine Competitors 4. Concepting & Prototyping 5. Research, Testing & Optimization - Exercise: Card Sorts ! Summary GA: Content Sites l August 2014
  155. 155. What You Don’t Want GA: Content Sites l August 2014 http://www.1800attorney.com/
  156. 156. Don’t Make Me Think! GA: Content Sites l August 2014 http://cailincreature.blogspot.com/2010_06_01_archive.html
  157. 157. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  158. 158. 9 Key Takeaways 1. Drive Engagement through Navigation, Recirculation, Social 2. Leverage & Optimize Automation 3. Focus on Consistency & Usability for Navigation 4. Use Both Search & Browse Techniques for Large Sites 5. Optimize the Header ! 6. Use UCD Design Principles: Optimize for Audience Needs & Goals 7. Optimize for What YOU Want Visitors to Do 8. Benchmark + Compare to Competition 9. Test Your Approaches! GA: Content Sites l August 2014
  159. 159. User Satisfaction :-) GA: Content Sites l August 2014
  160. 160. ?
  161. 161. CONTENT STRATEGY + NAVIGATION DESIGN UXAWARDS.ORG/EVENT-DETAILS “GA”: 20% OFF “ACTIVEGA”: 30% OFF THANKS! ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org

×