Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing with Content Management Systems - HOW Chicago 2015

Jared Ponchot
October 07, 2015

Designing with Content Management Systems - HOW Chicago 2015

Jared Ponchot

October 07, 2015

More Decks by Jared Ponchot

Other Decks in Design


  1. Designing with
 Content Management Systems Jared Ponchot // HOW Chicago

    2015 // @jponch
  2. It’s all design!

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Evaluation Research & Strategy Exploration Implementation

  11. None
  12. CMS 101

  13. 1. Page Types 2. Component Types 3. Content Types 4.

    User Types
  14. Types of things

  15. None
  16. De-coupling your CMS

  17. CMS vs. DPS

  18. Evaluation

  19. NATM(C)

  20. None
  21. Integrating Design + Dev

  22. None
  23. UX & Design Development


  25. None
  26. None
  27. Research & Strategy

  28. Insights

  29. Space

  30. Some is better than none.

  31. None
  32. 51 Company Employees INTERVIEWED 21+ Hours Invested INTERVIEWING 15 Depts./Disciplines

  33. 1. Page & Component Types

 CONTENT MODEL 3. User Types
  34. Content Model

  35. 1. Types of content your project needs 2. Discrete attributes

    that make up each 3. Relationships between them
  36. Microcontent A weird middle ground between assets and prese Presentation

    Ephemeral content driven by web design, can't be accessed from other platforms or devices Assets Editorial or User content; should be usable across all platforms and devices. Little to no presentation-oriented content or markup. Structure Used to group and organize assets. Used to retrieve collections of assets for other platforms, devices SEO Slug Show Person Topics Sub-Issue Emphasis Authors Publish date Title Short title Primary video (?) Teaser image Primary image Short summary Excerpt Source links Body text w/summary Article Video media reference Title Video Newsvine ID Body text w/summary Title Poll Promoted link Action Box Quote Sponsor logo Expiration date Footer image Header image Ad tags Permalink Package (p2) Sponsor name Start date Issue Descriptive text Name Primary image Issue Topic type (person, etc) Topic Name Source links Short title Short summary Source data (file) Title Style (option list) Infographic Image (file) Body text w/summary Images + Captions Teaser image Short summary Body text w/summary Short title Title Slideshow Newsvine Profile Link Person type Person Twitter Name Name Bio Duplicate of Article Bio image Link Sponsor name Expire date Native Ad (?) Sub-pages Graphic Air date and time Hosts Name Show Show Guest list Image Air date Episode number Episode Internal (?) Image (src, title, alt) Image Photo credit Show Brand Show Name Name Issue Sub-Issue Package Show Person Header Issue/Subissue/Topic Ad metadata Start/End date Treatment (p2) Comment Li So Timeline (p2) Title Short title Short summary Body text w/summary Simple Page SEO Slug
  37. What does that do for you?

  38. ‣ Your real assets ‣ Things to abandon in a

    redesign ‣ Ingredients list for prioritization exercises ‣ Identify where to begin ‣ Intent mapping
  39. None
  40. ‣ Content Asset Types ‣ Structural/Landing/Listing Types ‣ Utility Types

  41. ‣ User Needs ‣ Components ‣ Notes & Requirements

  42. GRAMMY.com Design Research Brief This document is a summary of

    initial design research (an “airplane” read) for reference during the wireframing process. Purpose Statement "Create a fast and unique user-focused experience for celebrating music's biggest night." TRA Goals for Grammy.com Redesign
  43. Artifacts, not deliverables

  44. Vision & Principles

  45. –Whosywhatsit Project Vision Statement “Connect and engage the Whosywhatsit team

    wherever they are with timely, relevant content.”
  46. 1. Relevance over breadth 2. Celebrate the common 3. Care

    for the newcomer
  47. Exploration

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. Implementation

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. Process = Religion

  63. Thanks! @jponch