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.