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

All the news that fits to print

All the news that fits to print

Chris J Clarke

March 30, 2015
Tweet

More Decks by Chris J Clarke

Other Decks in Design

Transcript

  1. @mr_mr - FOWD London - April 2015
    All the news
    that fits to print

    View full-size slide

  2. • consumeconsume.com

    View full-size slide


  3. Chris Clarke / @mr_mr

    UX on mobile apps team

    Previously @Yahoo! Answers

    Spare time bouldering / hurt
    Who am I?
    theguardian.com

    View full-size slide

  4. Sam Morris Cecilia Dobbs Theresa Malone Katrina
    Stubbings Alex Breuer Chris Mulholland Nick Haley
    Veronica@FOWD and anyone else I’ve forgotten who in
    some part attributed to this work....

    View full-size slide

  5. The news homepage

    View full-size slide

  6. The news homepage

    View full-size slide

  7. Information Density

    View full-size slide

  8. Information Density

    View full-size slide

  9. 1. Big news org’s are tackling R.W.D
    2. Our big R.W.D solution became a problem
    3. Admitting we were wrong and pivoting
    4. We pivoted big

    View full-size slide

  10. (Most) Big news org’s are tackling R.W.D
    • screeningfilm.com

    View full-size slide

  11. “[Homepage RWD] is definitely the direction that the
    New York Times needs to move in for the next re-design”
    Alex Mathias isadoradesign

    View full-size slide

  12. • http://www.niemanlab.org/2014/05/the-leaked-new-york-times-innovation-report-is-one-of-the-key-documents-of-this-media-age/

    View full-size slide

  13. • http://www.bbc.co.uk/blogs/internet/entries/6c02bec0-6c27-3db6-9295-1dcab645d567
    “There's less information on
    the screen. So I have to scroll
    more to see different
    headlines.”
    “Responsive design is the way
    forward, and it is definitely a
    necessary step, so well done on
    getting it looking very similar to
    what it was previously”

    View full-size slide

  14. • consumeconsume.com

    View full-size slide

  15. 2. Our big R.W.D solution became a problem
    1. Big news org’s are tackling
    3. Admitting we were wrong and
    4. We pivoted

    View full-size slide

  16. • © Corinne Vigniel

    View full-size slide

  17. Pieces of content per day
    500

    View full-size slide

  18. • nerdist.com
    The container model

    View full-size slide

  19. Konstantin Weiss

    View full-size slide

  20. “Design containers independent of layout.”
    Konstantin Weiss Information Architects

    View full-size slide

  21. D
    The container model
    A
    B
    C
    D
    E
    F
    G
    A
    B
    C
    Article
    D
    Section Article
    • http://www.uxpassion.com/blog/wiad-video-talk-the-container-model/

    View full-size slide

  22. 1
    Container
    4 5 6 7
    2 3

    View full-size slide

  23. “With the container model we moved away from
    thinking about specific pages on the site and how
    they might be filled with content”
    Nick Haley Director of UX - the Guardian

    View full-size slide

  24. • © Rami Niemi

    View full-size slide

  25. Next Gen team

    View full-size slide

  26. “Team” Density

    View full-size slide

  27. “Density” Timebox - setting the
    challenge

    View full-size slide

  28. 1. Assign a goal achievable in two months
    2. Wrote a series of assumptions
    3. Sketch week challenge - Defined solutions
    4. Defined inputs from the wider teams

    View full-size slide


  29. It is much harder to get a quick
    overview of the articles available
    and which are most important. It
    also requires much more scrolling
    and guessing where to find topic
    subjects.
    User comments Internal feedback Initial assumption

    View full-size slide

  30. 1. Big news org’s are tackling
    2. Our big R.W.D solution
    4. We pivoted
    3. Admitting we were wrong and pivoting

    View full-size slide

  31. • consumeconsume.com
    Understanding user’s consumption habits

    View full-size slide

  32. Commute Work Home

    View full-size slide

  33. Update Extend Discover

    View full-size slide

  34. “I need to know what’s happening
    right now / I want to feel connected to
    what’s going on in the world ”
    Update

    View full-size slide

  35.  “I want to gain a deeper understanding
    of a specific story”
    Extend

    View full-size slide

  36. “I want to be shown something new
    about the things I'm interested in”
    Discover

    View full-size slide

  37. 1. Big news org’s are tackling
    2. Our big R.W.D solution
    3. Admitting we were wrong and
    4. We pivoted big

    View full-size slide

  38. A fresh approach
    • http://erikjohanssonphoto.com/work/common-sense-crossing/

    View full-size slide

  39. “Team” Density
    (time-boxed)
    Next Gen team

    View full-size slide

  40. User context

    View full-size slide

  41. The time it was taking to read the news on my commute
    The time I was spending reading news at work
    The time I was spending reading news
    time

    View full-size slide

  42. Density ≠ space
    Density = time

    View full-size slide

  43. Update Extend Discover
    More time
    you expect to spend
    Most time
    you expect to spend
    Short amount of time
    you expect to spend

    View full-size slide

  44. The consumption of content
    Users
    satisfaction of
    the page
    Perceived
    time and effort
    they expect to
    spend
    Presentation &
    variety of
    content
    = +

    View full-size slide

  45. • cartoon.theraparchive.com/bugs-bunny-tortoise-beats-hare/

    View full-size slide

  46. Slow
    journalism
    Fast
    journalism

    View full-size slide

  47. Fast journalism
    1. Simple looking
    2. Easy and quick to scan
    3. News focussed

    View full-size slide

  48. Slow journalism
    1. Visually rich
    2. Larger
    3. More indulgent content

    View full-size slide

  49. User’s
    perception
    of time
    Update
    Succinct information
    Snappy, short but
    detailed
    Extend
    Deeper content with
    rich media and
    luxury reading
    Discover
    Wider mix of content
    Leans more towards
    richer content
    Faster
    Slower
    Short
    amount
    of time
    Update
    Succinct information
    Snappy, short but
    detailed
    More time
    Extend
    Deeper content with
    rich media and
    luxury reading
    Most time
    Discover
    Wider mix of content
    Leans more towards
    richer content

    View full-size slide

  50. Headlines Highlights
    A more streamlined news experience Clearer definition between tone types

    View full-size slide

  51. Take slow, slower
    A
    B
    C
    D
    E
    F
    G
    Section
    A
    B
    C
    D
    E
    F
    G
    Section

    View full-size slide

  52. Joker
    A
    B
    C
    E
    F
    the big picture

    View full-size slide

  53. Joker
    Highlights
    C
    E
    F
    the big picture
    Headlines

    View full-size slide

  54. • blog.hellersearch.com & Dilbert
    Company lingo

    View full-size slide

  55. • galleryhip.com
    Takeaways

    View full-size slide

  56. 1. Take the time to understand
    the problem

    View full-size slide

  57. 2. Negotiate before, during
    and after

    View full-size slide

  58. 3. Small teams move the
    quickest

    View full-size slide

  59. 3. Small thinking teams move
    the quickest

    View full-size slide

  60. 4.Abstract theories can often
    provide a much broader solution

    View full-size slide

  61. 5. Admit your mistakes

    View full-size slide

  62. FOWD London - April 2015
    Thank you.
    Questions?
    bit.ly/fowd-allthenews
    @mr_mr

    View full-size slide