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

Prototyping @General Assembly

Chris J Clarke
February 01, 2015

Prototyping @General Assembly

Chris J Clarke

February 01, 2015
Tweet

More Decks by Chris J Clarke

Other Decks in Design

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