Prototyping @General Assembly

Transcript

1. Prototyping with
   General Assembly
   @mr_mr
   General Assembly UX
   

   View Slide

2. Hello.
   

   View Slide

3. Example
   Body copy
   

   View Slide

4. Example
   Body copy
   

   View Slide

5. View Slide

6. TheGuardian.com
   the next generation
   • redcarpetreports.de/2014/allgemein/startrek_tng_7/
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Article onward
    journeys
    Football
    vertical
    Responsive
    Navigation
    

    View Slide

11. Simple.
    Enjoyable.
    Quick.
    Make things people want to use.
    Less documentation.
    Easily updated.
    Why?
    

    View Slide

12. 0 1 week
    

    View Slide

13. We believe that [doing this] ___________________
    for [these people] ___________________________________
    will achieve [this outcome] _____________________
    We’ll know this is true when we see
    [this metric / this market feedback] _______________________
    Hypothesis
    statements
    

    View Slide

14. “People don’t read products — they interact with
    them.”
    • https://medium.com/goodux-badux/how-prototyping-is-replacing-documentation-c42e97d07a11
    Ian Schoen
    

    View Slide

15. -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    £--
    £--
    -- / -- / ----
    -- / -- / ----
    

    View Slide

16. £--
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    £--
    

    View Slide

17. Function
    • Better flow
    • On device
    • All pages involved with the feature are
    there to interact with
    • Where does that button take you etc..
    £--
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    -- / -- / ----
    £--
    

    View Slide

18. “We are all salesmen every day of our lives”
    Charles Schwab
    

    View Slide

19. • Rami Niemi
    

    View Slide

20. View Slide

21. Projects
    

    View Slide

22. Responsive
    navigation
    Provide a better overview of what the
    Guardian is to our least engaged and
    brand new audience members - at a
    fully responsive level.
    

    View Slide

23. Ideas were rated 0-5 out of 5 criteria:
    1. Aesthetics
    2. Clear navigation to sub-sections
    3. Access to all sections button
    4. Ease to design
    5. Ease to build
    

    View Slide

24. Example
    Body copy
    

    View Slide

25. Would the cutoff off text encourage
    users to swipe or press ‘all’ ?
    

    View Slide

26. Mobile view
    Desktop view
    

    View Slide

27. View Slide

28. 10 users shown
    from panel
    7 users shown
    from panel
    22 users shown (UX
    lab and panel)
    

    View Slide

29. View Slide

30. View Slide

31. Density of news
    A month long time-box experiment to
    hypothesize and deliver a solution to the
    problem: How to get users a better
    overview of all our content from the
    homepage.
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. F
    200
    T
    20
    W
    5
    T
    5
    M
    Setup
    

    View Slide

36. Australia
    Update
    UK
    Update
    UK
    Discover
    UK / US / AU / R.O.W
    Mixture
    F
    Th
    W
    Tu
    • http://ec2-54-195-16-42.eu-west-1.compute.amazonaws.com/guardian-prototype/
    

    View Slide

37. UK / US / AU / R.O.W
    Mixture
    F
    

    View Slide

38. Headlines Variety
    A more streamlined news experience Clearer definition between tone types
    

    View Slide

39. View Slide

40. Onward journeys
    Experiments into encouraging users to
    click through to more stories, or click back
    to a landing page to choose at least one
    more article to read.
    

    View Slide

41. View Slide

42. • http://ec2-54-195-16-42.eu-west-1.compute.amazonaws.com/guardian-ngw/articles/article-nav-on-scroll.html
    

    View Slide

43. View Slide

44. View Slide

45. Football
    A holistic view to improve the
    Guardian football pages by
    improving our use of data
    and a few extra treats thrown
    into the mix.
    

    View Slide

46. View Slide

47. View Slide

48. Match report
    (Published on a Sunday)
    Match preview
    (Published on a Friday)
    

    View Slide

49. View Slide

50. • Set yourself a deadline
    • Create a story for a user to follow - think of the prototype in
    context, when you test, put the user in the story
    • Use it a a form of documentation (http://ec2-54-195-16-42.eu-
    west-1.compute.amazonaws.com/guardian-ngw/)
    Final thoughts.
    • Use what’s familiar to start
    • But don’t put off learning something new
    • Get a partner to work with - an expert in the
    system you want to use and learn as you go.
    • Build your own website
    

    View Slide

51. Resources
    • learn.ustwo.com
    • waxy.org/links
    • news.layervault
    • learnlayout.com/flexbox
    • webdesignrepo.com
    • useronboard.com
    • Liveview (http://www.zambetti.com/)
    • Skala preview (http://bjango.com/mac/
    skalapreview/)
    • sketch.land/index.html
    • Julie Zhao
    • Ben Horowitz
    • Marty Cagan
    • Luke Wroblewski
    • Brad Frost
    

    View Slide

52. @mr_mr
    General Assembly UX
    Thank you.
    Questions?
    

    View Slide