All the news that fits to print

Transcript

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

   View Slide

2. View Slide

3. • consumeconsume.com
   

   View Slide

4. •
   Chris Clarke / @mr_mr
   •
   UX on mobile apps team
   •
   Previously @Yahoo! Answers
   •
   Spare time bouldering / hurt
   Who am I?
   theguardian.com
   

   View Slide

5. 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 Slide

6. View Slide

7. View Slide

8. View Slide

9. The news homepage
   

   View Slide

10. The news homepage
    

    View Slide

11. View Slide

12. View Slide

13. Information Density
    

    View Slide

14. Information Density
    

    View Slide

15. 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 Slide

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

    View Slide

17. View Slide

18. View Slide

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

    View Slide

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

    View Slide

21. View Slide

22. View Slide

23. • 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 Slide

24. View Slide

25. View Slide

26. • consumeconsume.com
    

    View Slide

27. View Slide

28. 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 Slide

29. • © Corinne Vigniel
    

    View Slide

30. Pieces of content per day
    500
    

    View Slide

31. View Slide

32. • nerdist.com
    The container model
    

    View Slide

33. Konstantin Weiss
    

    View Slide

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

    View Slide

35. 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 Slide

36. 1
    Item
    

    View Slide

37. Slice
    1
    2 3
    

    View Slide

38. 1
    Container
    4 5 6 7
    2 3
    

    View Slide

39. “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 Slide

40. View Slide

41. View Slide

42. View Slide

43. • © Rami Niemi
    

    View Slide

44. Next Gen team
    

    View Slide

45. “Team” Density
    

    View Slide

46. “Density” Timebox - setting the
    challenge
    

    View Slide

47. 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 Slide

48. “
    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 Slide

49. 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 Slide

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

    View Slide

51. View Slide

52. Commute Work Home
    

    View Slide

53. Update Extend Discover
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. View Slide

58. 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 Slide

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

    View Slide

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

    View Slide

61. View Slide

62. View Slide

63. User context
    

    View Slide

64. View Slide

65. 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 Slide

66. Density ≠ space
    Density = time
    

    View Slide

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

    View Slide

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

    View Slide

69. View Slide

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

    View Slide

71. Slow
    journalism
    Fast
    journalism
    

    View Slide

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

    View Slide

73. View Slide

74. View Slide

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

    View Slide

76. View Slide

77. View Slide

78. 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 Slide

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

    View Slide

80. View Slide

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

    View Slide

82. Joker
    A
    B
    C
    E
    F
    

    View Slide

83. Joker
    A
    B
    C
    E
    F
    the big picture
    

    View Slide

84. Joker
    Highlights
    C
    E
    F
    the big picture
    Headlines
    

    View Slide

85. View Slide

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

    View Slide

87. • galleryhip.com
    Takeaways
    

    View Slide

88. 1. Take the time to understand
    the problem
    

    View Slide

89. 2. Negotiate before, during
    and after
    

    View Slide

90. 3. Small teams move the
    quickest
    

    View Slide

91. 3. Small thinking teams move
    the quickest
    

    View Slide

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

    View Slide

93. 5. Admit your mistakes
    

    View Slide

94. View Slide

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

    View Slide