We're Doing It Wrong: Future Insights Live, June 2014

Transcript

1. We’re Doing It Wrong
   Prototyping the Future of the Web
   Steve Hickey: UX Designer at Fresh Tilled Soil
   @stevehickeydsgn | @freshtilledsoil | @thedirtshow
   

   View Slide

2. Requirements
   Research
   Ideate
   Design
   Code
   Launch
   A brief “reminder” of waterfall.
   

   View Slide

3. Plan
   Design
   Develop
   Test
   Build
   Measure
   Learn
   What about agile or lean?
   

   View Slide

4. ¡Mentirosos!
   (Liars!)
   

   View Slide

5. The traditional point of first contact...
   Requirements
   Research
   Ideate
   Design
   Code
   Launch
   

   View Slide

6. “D t!”
   ****
   ... and its result.
   

   View Slide

7. But it’s ok. We can fix that.
   Research/Understand Ideate Design
   Code
   Test
   and repeat...
   & Design & Code & Ideate & Code
   & Ideate & Design
   

   View Slide

8. Step 1 → Step 2 → Step 3 → Step 4
   = Very Pretty BULLSHIT
   

   View Slide

9. “Design is not just what it looks like and feels like.
   Design is how it works.”
   !
   Today’s obligatory Steve Jobs quote.
   

   View Slide

10. “Form ever follows function.”
    !
    A grating reminder of something we all claim to know,
    from architect Louis Sullivan.
    

    View Slide

11. Understanding the problem.
    

    View Slide

12. “Great is the enemy of good.”
    !
    Paraphrased from Voltaire, an enlightened dude.
    

    View Slide

13. Wireframes. Or are they...
    

    View Slide

14. View Slide

15. Wireframes. Or are they...
    

    View Slide

16. Testable. ASAP.
    

    View Slide

17. Sketches are prototypes in waiting.
    

    View Slide

18. prototyping on paper
    

    View Slide

19. InVision App
    

    View Slide

20. The usual suspects:
    Balsamiq Axure
    InDesign Keynote PowerPoint
    

    View Slide

21. HTML/CSS/JS
    

    View Slide

22. Fake it.
    localStorage.setItem(‘username’, ‘Gary’);
    var username = localStorage.getItem(‘username’);
    $(‘div.userinfo’).prepend(‘’ + username + ‘’);
    =======================================================
    Gary
    

    View Slide

23. Developers need love too.
    

    View Slide

24. Make your client fall in love.
    

    View Slide

25. A quick note on testing:
    

    View Slide

26. “OK, but what about design?”
    

    View Slide

27. Mockups = Useless
    

    View Slide

28. View Slide

29. UI Studies: The New Hotness
    

    View Slide

30. Style tiles use time efficiently.
    

    View Slide

31. Design in the browser.
    

    View Slide

32. Use the right tool for the job.
    

    View Slide

33. Let’s see some examples:
    

    View Slide

34. Google Glass
    

    View Slide

35. “We were working with the HUD literally on my first day 

    at work. And learning a tremendous number of things that 

    you couldn’t possibly just guess or estimate, or print out on 

    a spreadsheet, or a project map, and that sort of thing.”
    !
    Tom Chi, Google
    

    View Slide

36. View Slide

37. “Your ears can take a lot more weight than your nose…
    So if you can create a system where the ear becomes
    a fulcrum, then the perceptual weight disappears.
    This took me about two hours to figure out.”
    !
    Tom Chi, Google
    

    View Slide

38. Incantor
    

    View Slide

39. Our first prototype.
    

    View Slide

40. Look, I’m no Olivander. Ok?
    

    View Slide

41. Here’s how we overcame my lack of magic.
    

    View Slide

42. We made the nav work without looking.
    

    View Slide

43. Let’s wrap up.
    

    View Slide

44. 1) Sketch a lot, it’s quick and efficient.
    2) Stop wireframing, start prototyping.
    3) Test early and often.
    4) Avoid comps for every screen and state.
    5) Eliminate redundant parts of your workflow.
    6) Process is not a straight line.
    

    View Slide

45. Thanks!
    Steve Hickey: UX Designer at Fresh Tilled Soil
    @stevehickeydsgn | @freshtilledsoil | @thedirtshow
    

    View Slide