Prototyping @General Assembly

Transcript

1. Prototyping with General Assembly @mr_mr General Assembly UX
2. Hello.
3. Example Body copy
4. Example Body copy
6. TheGuardian.com the next generation • redcarpetreports.de/2014/allgemein/startrek_tng_7/
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
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
28. 10 users shown from panel 7 users shown from panel 22 users shown (UX lab and panel)
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.
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
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.
42. • http://ec2-54-195-16-42.eu-west-1.compute.amazonaws.com/guardian-ngw/articles/article-nav-on-scroll.html
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.
48. Match report (Published on a Sunday) Match preview (Published on a Friday)
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?