Designing with Content Management Systems - HOW Chicago 2015

Talk given at HOW Interactive 2015 Chicago: http://www.howinteractiveconference.com/index.php/chicago-schedule/75-chicago-placeholder-11

Transcript

1. Designing with

   Content Management Systems
   Jared Ponchot // HOW Chicago 2015 // @jponch
   

   View Slide

2. It’s all design!
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Evaluation
    Research & Strategy
    Exploration
    Implementation
    

    View Slide

11. View Slide

12. CMS 101
    

    View Slide

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

    View Slide

14. Types of things
    

    View Slide

15. View Slide

16. De-coupling your CMS
    

    View Slide

17. CMS vs. DPS
    

    View Slide

18. Evaluation
    

    View Slide

19. NATM(C)
    

    View Slide

20. View Slide

21. Integrating Design + Dev
    

    View Slide

22. View Slide

23. UX & Design
    Development
    

    View Slide

24. DESIRABILITY VIABILITY
    FEASIBILITY
    

    View Slide

25. View Slide

26. View Slide

27. Research & Strategy
    

    View Slide

28. Insights
    

    View Slide

29. Space
    

    View Slide

30. Some is better than none.
    

    View Slide

31. View Slide

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

    View Slide

33. 1. Page & Component Types

    PRESENTATION MODEL
    2. Content Types 

    CONTENT MODEL
    3. User Types

    PERSONAS
    

    View Slide

34. Content Model
    

    View Slide

35. 1. Types of content your project needs
    2. Discrete attributes that make up each
    3. Relationships between them
    

    View Slide

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
    

    View Slide

37. What does that do for you?
    

    View Slide

38. ‣ Your real assets
    ‣ Things to abandon in a redesign
    ‣ Ingredients list for prioritization exercises
    ‣ Identify where to begin
    ‣ Intent mapping
    

    View Slide

39. View Slide

40. ‣ Content Asset Types
    ‣ Structural/Landing/Listing Types
    ‣ Utility Types
    

    View Slide

41. ‣ User Needs
    ‣ Components
    ‣ Notes & Requirements
    

    View Slide

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
    

    View Slide

43. Artifacts, not deliverables
    

    View Slide

44. Vision & Principles
    

    View Slide

45. –Whosywhatsit Project Vision Statement
    “Connect and engage the Whosywhatsit team
    wherever they are with timely, relevant content.”
    

    View Slide

46. 1. Relevance over breadth
    2. Celebrate the common
    3. Care for the newcomer
    

    View Slide

47. Exploration
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. Implementation
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. Process = Religion
    

    View Slide

63. Thanks!
    @jponch
    

    View Slide