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

Prototyping @General Assembly

6ed0bfb73aafbb294bb90f6a47a8e1af?s=47 Chris J Clarke
February 01, 2015

Prototyping @General Assembly

6ed0bfb73aafbb294bb90f6a47a8e1af?s=128

Chris J Clarke

February 01, 2015
Tweet

Transcript

  1. Prototyping with General Assembly @mr_mr General Assembly UX

  2. Hello.

  3. Example Body copy

  4. Example Body copy

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

  7. None
  8. None
  9. None
  10. Article onward journeys Football vertical Responsive Navigation

  11. Simple. Enjoyable. Quick. Make things people want to use. Less

    documentation. Easily updated. Why?
  12. 0 1 week

  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
  14. “People don’t read products — they interact with them.” • https://medium.com/goodux-badux/how-prototyping-is-replacing-documentation-c42e97d07a11 Ian

    Schoen
  15. -- / -- / ---- -- / -- / ----

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

    ---- -- / -- / ---- -- / -- / ---- -- / -- / ---- £--
  17. Function • Better flow • On device • All pages

    involved with the feature are there to interact with • Where does that button take you etc.. £-- -- / -- / ---- -- / -- / ---- -- / -- / ---- -- / -- / ---- -- / -- / ---- £--
  18. “We are all salesmen every day of our lives” Charles

    Schwab
  19. • Rami Niemi

  20. None
  21. Projects

  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.
  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
  24. Example Body copy

  25. Would the cutoff off text encourage users to swipe or

    press ‘all’ ?
  26. Mobile view Desktop view

  27. None
  28. 10 users shown from panel 7 users shown from panel

    22 users shown (UX lab and panel)
  29. None
  30. None
  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.
  32. None
  33. None
  34. None
  35. F 200 T 20 W 5 T 5 M Setup

  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/
  37. UK / US / AU / R.O.W Mixture F

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

    tone types
  39. None
  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.
  41. None
  42. • http://ec2-54-195-16-42.eu-west-1.compute.amazonaws.com/guardian-ngw/articles/article-nav-on-scroll.html

  43. None
  44. None
  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.
  46. None
  47. None
  48. Match report (Published on a Sunday) Match preview (Published on

    a Friday)
  49. None
  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
  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
  52. @mr_mr General Assembly UX Thank you. Questions?