[Drupalcon 2012] Session notes: Designing for Media platforms

Presenters: Dave Leonard and Samantha Warren, Phase II Technology

What does it mean to design for media?

  • Designing for a site that is meant to reach a large audience with a daily content cycle
    • Newspapers
    • high-traffic blogs, etc.
  • What makes it different is the sheer amount of information
    • Photos
    • Videos
    • Lots of body copy
    • Organizing lots of information in a way that works for the user
    • ADVERTISING
  • Designing for a frequent publishing cycle
    • How do you design for content creators?

Case studies

  • Take Part
    • Digital media organization and cause services agency that provides content, products and services that inspire, empower, and ignite people to take daily action in making the world better.
    • Visual Design goals
      • Exhibit great storytelling
      • Compel users to take action, get involved in the community
      • Promote sharing: make sure the content doesn't just live on that site, but belongs to the entire internet
    • UX Goals
      • Take action in the context of a story
      • Support the ebb and flow of topics
      • Make sure that editors have a good UX too!
        • Too many designers don't take into account the process that editors have to deal with; focus too heavily on end users.
    • Visual Design process:
      • Conduct interviews with stakeholders about their brand and needs
      • Thematic Analysis: find adjectives
        • Engaging, action-oriented, personality
        • usable, present, depth, spacious
        • circulate, community, editorial, content focused
      • Use style tiles to help establish visual priorities
        • Offer one that's "specifically what they're looking for"
        • But also offer ideas that speak to the adjectives and themes you're hearing.
    • UX Process
      • Content strategy
        • Types of content
        • Clasification/tagging
        • Embeddable content types: Put one node in the body of another node
        • Curation requirements: What are the requirements for analyzing and curating content? Are there expiration dates?
        • Curation capacity: What staff and other resources do you have to manage the requirements?
        • Campaigns of varying scale
      • Pair wireframing
        • Flush out misinterpretations early
          • How much fidelity do we really need?
          • Are we being over-specific?
        • Minimize revision cycles
          • Style tiles are done concurrently with wireframes
          • No conflict between UX and visual designer
        • Avoid over-designing
  • Washington Examiner
    • Regional newspaper that covers news, politics and sports in the DC area. The logo was created by William Randolph Hurst and it has a rich patriotic brand.
      • Visual Design goals
        • Feel modern
        • Stay true to history of the brand: wide and loyal readership
        • Promote ease of use: Readability is major; need content to shine through
      • UX Goals
        • Demonstrate breadth and depth of coverage
          • Section based
          • Cover a lot of local news for DC metro area, but also very respected nationally for political coverage
          • Set hierarchy; not all sections are the same
        • Promote top-quality curated content
          • Provided challenges in image handling
          • Challenges in creating hierarchy and ratios
        • Showcase the talent they have in house
          • Challenge: many sources of content coming into the system
            • Feeds
            • Direct to Drupal
            • Imports from AP
          • Need to define how authors are treated depending on where content is coming from
      • Visual Design Process
        • Adjectives:
          • Local, political, regional
          • Opinionated, scrappy, speedy, focused
          • ease of use, decluttered, visual balance, simplified,
          • polished, clean, fresh
          • Flexible, dynamic, Interactive
        • Had done a smaller site project beforehand; had some data on what the client liked and didn't from the first site.
        • Work elements of the paper (print edition) within the website.
      • UX Design process
        • Sketch session: group brainstorming of UX concepts for a project
          • Got the entire team involved
          • Timeboxed to an hour
          • HAND-DRAWN sketches
          • Come up with ideas, no matter how "crazy"
          • Alleviates the "where do I start?" feeling
        • Wireframes were more high-fidelity because of the collaboration
          • heavily annotation of wireframes to make notes of interactivity, content, etc.
  • Common themes
    • Design a system, not individual pages
      • Clients think in terms of pages; it's really easy for designers to think of things in pages as well
      • Because of the way Drupal (and other content management systems) handles media, content, etc. you have to think in systems rather than individual pages
      • Create style guides for clients to use and adapt as the site grows
    • Dealing with the author experience
      • Authors can be Drupal users, or they could be organizations
      • Have to consider how different types of authors will need to be treated or highlighted
    • Cross promotion of content is a common theme when designing for media
      • Want multiple page views
      • Make sure people can see additional or related content
      • Helps users find related info; helps the organization get more views on their content
      • How to distinguish between "articles" and "actions" — what's the different treatment between requests for action and related articles?
    • Lifecycle of Topic
      • How to build a set of tools that lets editors evolve the content and its treatment/important on their own without needing extra developers
    • Commenting
      • Drupal core commenting vs. Disqus or FB comments
      • How to make things visually consistent with third-party integrations?
    • Advertising
      • Designers often have a fear of advertising; it "ruins the layout"
      • How to make it part of the design, and find subtle ways to make it less obtrusive?
      • You can't get around the need for advertising; it's the bread and butter of the media industry
      • part of our work as designers is solving problems, and this is part of it.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img> <h1> <h2> <h3> <h4>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.