Shredding the Wireframe: Intro to Rapid UX Prototyping

2,287 views
2,067 views

Published on

This presentation/workshop covers:

- Current state of UX, limitations of common deliverables (e.g. wireframes)
- POV on prototyping and why it's important in user experience design
- Available tools (Invision, Justinmind, etc)
- Case study: using the Tech Summit app as an example
- What about the spec?

Key Takeaways

- Wireframes are near obsolete
- Why prototype
- Available methods
- Learn about available tools, pros and cons
- Documenting detailed functionality (annotating the prototype)

Published in: Design, Technology
2 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total views
2,287
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
25
Comments
2
Likes
19
Embeds 0
No embeds

No notes for slide
  • (K) – Invision App functionality
    (J) – Features and content being shown in prototype
  • (K) – Invision App functionality
    (J) – Features and content being shown in prototype
  • (K)
  • (K) – Invision App functionality
    (J) – Features and content being shown in prototype
  • (K) – Invision App functionality
    (J) – Features and content being shown in prototype
  • (K) It’s also worth noting that Invision App plays really well with Box and Dropbox. I wouldn’t recommend Invision App as your sole collaboration tool for a project, even though it does many of those things very well (sharing, version control, comments, etc.)
  • Shredding the Wireframe: Intro to Rapid UX Prototyping

    1. 1. Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish Photo source: Musician Buzz
    2. 2. Agenda • What is UX? (Let’s make sure we are on the same page here) • Example deliverables • Limitations of wireframes/embracing the prototype • Some awesome tools (Invision App, Justinmind, POP) • Case study: Razorfish Tech Summit App • What about the spec? • Q+A 1 Photo source: MC Quinn, Flickr
    3. 3. But first…introduce yourself
    4. 4. What is UX? 3
    5. 5. What is UX? 4 • Empathizing with users to make products better (feel their pain) • Understanding how consumers will actually use a product or service and design • It used to be about web sites and web-based applications, but mobile web sites and applications, social platforms need a lot of UX help Source: Office Space (20th Century Fox)
    6. 6. Our Common Enemy 5 Source: Screenshots of Despair http://screenshotsofdespair.tumblr.com/
    7. 7. Our Patron Saint 6 “Design is not just what it looks like or feels like. Design is how it works.” –Steve Jobs, Patron Saint of User Experience Practitioners
    8. 8. Origins of the Term 7 Source: Businessweek
    9. 9. Rooted in 8 • Architecture • Graphic design • Industrial design • Human Factors
    10. 10. Also heavily inspired by 9 • Film • Animation • Comics
    11. 11. The Process 10 1. Get to know users 2. Analyze user tasks and goals 3. Establish requirements 4. Prototype ideas 5. Test Rinse and Repeat
    12. 12. How We Measure Success • Effectiveness – how easily can users achieve their goals • Efficiency – how fast can they do it • Satisfaction – Experience = good/bad? (Would they share it with others?) 11
    13. 13. 12
    14. 14. 3 Key Practices in UX 13 Research Knowing the user Information Architecture + Interaction Design Sketching the experience Content Strategy Planning, development, and management of content Photo sources: CannedTuna, Flickr; Martin Stabe, Flickr; Baldiri, Flickr
    15. 15. Some Deliverables
    16. 16. Ecosystem Diagram 15 c c
    17. 17. User Journeys 16 c c c
    18. 18. Site Map 17 c
    19. 19. Wireframes 18 c
    20. 20. We <3 wireframes, but they are quickly becoming obsolete.
    21. 21. Wireframes Have Several Limitations • What you see is often not what you get • Insufficient when describing nuanced interaction • Approvals can never be final until the result is seen in code • It’s difficult to test wireframes • Many clients have difficulty providing feedback on wireframes • Laborious, time intensive • Inefficient for detailing responsive design 20 Image source: Wikipedia
    22. 22. 21 Development Processes are Evolving
    23. 23. Out with Waterfall* 22 * As with a symphonic orchestra, the emphasis of Waterfall is the plan (or score) and therefore before beginning any kind of development there needs to be a clear vision in order. Orchestras however typically don’t function well when project goals are in flux or unclear (i.e. the composition is still being written). Photo source: Vancouver 125, Flickr
    24. 24. In with Agile* 23 * Every software development firm or agency seems to have it’s own flavor of agile, leading to difficulties in applying a standard definition to the term. At Razorfish, it has come to mean a tight, fast process that is multi-disciplinary yet on the outside might appear to be somewhat chaotic. Like any good jam session, agile can be good in situations where the end-goals of projects are not completely defined. Photo source: Incase, Flickr
    25. 25. 24 And we need some new tools
    26. 26. 25 Enter the Prototype
    27. 27. What do we mean when we say prototype? A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. 26 Source: Wikipedia Photo source: Steve Jurvetson, Flickr
    28. 28. Advantages to Prototyping the UX 27 • Get early buy-in from business stakeholders • Enables testing early and often with users • Encourages multi-disciplinary collaboration • Plays well with the agile methodology • Shows not just what it will look like but how it will work • Kill fewer trees
    29. 29. There are several categories • Proof-of-Concept Prototype • Form Study Prototype • User Experience Prototype • Visual Prototype • Functional Prototype (a.k.a Working Prototype) 28 Source: Wikipedia
    30. 30. The Fidelity Spectrum 29 Low Medium High Photo sources: Cesar Astudillo, Flickr, Invision App, Razorfish Emerging Experiences
    31. 31. 30 Set Expectations on Prototype Fidelity
    32. 32. Some Popular Tools 31
    33. 33. 32
    34. 34. 33
    35. 35. 34
    36. 36. 35
    37. 37. 36 Case Study: Razorfish Tech Summit App
    38. 38. About the Razorfish Tech Summit • Annual event hosted by Razorfish • Includes clients and industry thought leaders • Two days of keynotes, panels, case studies and workshops • Explore how these changes impact customer experiences 37 Photo source: Razorfish Emerging Experiences
    39. 39. Our Mission Create an app for Razorfish’s 2014 Tech Summit that: • Provides basic conference information • Show cases Gimbal Beacon technology • Design and build in an insanely short period of time 38
    40. 40. The Gimbal Beacon 39
    41. 41. Tech Summit App Features 40 • Linkedin Authentication/Registration • Location aware heat map visualization (with easter eggs/prizes) • Beacon integration • Calendar with list of events, and speakers (link to Linkedin profiles) • About the summit • Get help (contact information for event organizers) • IOS device support
    42. 42. 41 Sketching the Experience
    43. 43. 42 Application Map
    44. 44. 43 Sketching the Experience
    45. 45. 44
    46. 46. 45
    47. 47. 46
    48. 48. 47
    49. 49. 48
    50. 50. 49
    51. 51. 50
    52. 52. Testing: Early and Often 51 Formal and guerilla usability testing
    53. 53. But What About the Spec? 52
    54. 54. 53 Plays well with Box or Dropbox
    55. 55. Thanks!! Photo sources: Dustin Gaffke, Flickr
    56. 56. 55 Q+A

    ×