Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Shredding the Wireframe
Intro to Rapid UX Prototyping
Kyle Outlaw / Group Experience Director @Razorfish
To Shred */SHred/*
1
• Tear or cut into shreds."shredded documents”
• Play a very fast, intricate style of rock lead guita...
Agenda
• Part 1: Intro – the death of wires, the rise of prototyping
• Part 2: Challenge question and sketching
• Short Br...
Who the f*&# are we?
3
Kyle Outlaw
GXD at Razorfish
Clients: Mercedes-Benz, Smart Car, Motorola,
UNIQLO, AXE
Specialties: ...
Some Questions for You!
Part 1
The Death of Wireframes and the Rise of the Prototype
5
We <3 wireframes, but they are quickly
becoming obsolete!
But why?
Wireframes Have Several Limitations
• What you see is often not what you get
• Insufficient when describing nuanced intera...
But what will replace them?
10
Enter the Prototype.
What do we mean when we say prototype?
A prototype is an early sample, model, or
release of a product built to test a conc...
Advantages to Prototyping the UX
12
• Get early buy-in from business stakeholders
• Enables testing early and often with u...
There are several categories
• Proof-of-Concept Prototype
• Form Study Prototype
• User Experience Prototype
• Visual Prot...
Who is the audience?
• Full internal team (UX, visual designers, tech)
• Third party vendors
• The client and other stakeh...
The Spectrum of Fidelity
15
Medium HighLow
Sketches on paper. Cool/wow
factor is low. Wireframes or sketches, the
prototyp...
16
Caution: Set Expectations on Fidelity!
Some popular tools
18
19
20
21
22
And many more…
How do they stack up?
25
Emily Schwartzman’s Awesome Evaluation
kpcb.com/design/prototyping-tools-as-analyzed-by-emily-schwartzman
But there is no substitute for trying
these yourselves and picking the best
one for your project.
Anyway, who should own the prototype?
• It's often cost prohibitive to get a technologist just for prototyping
• You don't need to know code to do it!
• It's a ...
The prototype shows how it will work.
“Design is not just what it
looks like or feels like.
Design is how it works.”
–Stev...
Any questions so far?
Part 2
Okay let’s do this!
31
Product Brief and Sketching
32
• In this part of the workshop we're going to solve a quasi-real world
problem. There are t...
The Teams*
33
• Slayer
• System of a Down
• Anthrax
• Metallica
• Pantera
• Megadeth
* Yes you may change your team name. ...
Product Brief 1
34
Create a Smartphone app that does the following:
We’ve all been on road trips where one individual (oft...
Product Brief 2
35
Create a Smartphone app that does the following:
This quick image-to-sound generator would use pictures...
Product Brief and Sketching (cont.)
36
• Spend 15 minutes discussing how to approach this request.
• Sketch out some key s...
Remember: it’s not an art contest!
37
Any questions before we start?
Clock’s ticking…
39
Time’s up!
40
Now…
41
• Designate one person on your team (whoever has the best
smartphone camera!) to take a picture of your sketches.
...
Now…
42
• Designate one person on your team (whoever has the best smartphone
camera!) to take a picture of your sketches. ...
Part 3
Quick prototyping tutorial using Invision App
43
Why Invision App?
• Easy to learn (not just UX, creative, client)
• Well designed! (Great UX)
• Using it currently for var...
45
Getting Started
• Go to invisionapp.com
• Username: kyle.outlaw [at] razorfish.com
• Password: SXSW2015
• Or give us yo...
46
Step 2: Find Your Project Folder (A-E)
47
Step 3: Upload a picture of your sketch
48
Step 4: Check Resolutions
49
Step 5: Arrange your screens
50
Step 5: Set hotspots
51
Step 5: Set hotspots
Test the flow with your team, make any
revisions
Other cool stuff you can do
54
Step 5: Set hotspots
55
Step 5: Set hotspots
56
Step 5: Set hotspots
57
Step 5: Set hotspots
58
Step 5: Set hotspots
59
Step 5: Set hotspots
60
Step 5: Set hotspots
61
Step 5: Set hotspots
62
Step 5: Set hotspots
Part 4
Guerrilla-style Usability Testing
63
Prototyping on the fly
64
From formal and guerilla usability testing
Goals for usability testing
65
• Evaluate your product (easy, fast, satisfying?)
• See how real people use it, in their en...
Designate one person from your table to
go to another table (different challenge)
and take them through your app.
Document the feedback. Bonus points,
add comments to the project.
Part 5
Show and tell
68
Call for volunteers!
69
• What was your challenge?
• How did you solve it?
• How was your overall experience?
• Is this so...
70
Q+A
Epilogue: Some House-cleaning
71
• Please take our survey!
• If you have questions after this class, contact
me at kyle.ou...
Official Playlist for this Workshop
72
http://spoti.fi/1GOKavN
Thanks!!
Appendectomy
74
Product Brief for Team Pantera
Create a Smartphone app that does the following:
Democratize Playlists for Long Car Rides w...
Product Brief for Team Slayer
Create a Smartphone app that does the following:
Democratize Playlists for Long Car Rides wi...
Product Brief for Team System of a Down
Create a Smartphone app that does the following:
Democratize Playlists for Long Ca...
Product Brief for Team Metallica
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound gene...
Product Brief for Team Anthrax
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound genera...
Product Brief for Team Megadeth
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound gener...
Upcoming SlideShare
Loading in …5
×

Shredding the Wireframe with Rapid UX Prototyping

902 views

Published on

In this two and a half hour long workshop we discussed the current state of UX along with the limitations of common deliverables such as wireframes in conveying product vision. A point of view on prototyping and why it is the most critical tool now in user experience design was presented and we covered available tools for prototyping such as Invision, Justinmind, Balsamique and others. We will also reviewed a case study and went through the process of creating a quick prototype from scratch for desktop and mobile.

Published in: Internet
  • Be the first to comment

Shredding the Wireframe with Rapid UX Prototyping

  1. 1. Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish
  2. 2. To Shred */SHred/* 1 • Tear or cut into shreds."shredded documents” • Play a very fast, intricate style of rock lead guitar. ”We want to hear everything from country and western to blisteringly fast guitar shredding" As defined by Google
  3. 3. Agenda • Part 1: Intro – the death of wires, the rise of prototyping • Part 2: Challenge question and sketching • Short Break • Part 3: Invision app tutorial • Part 4: Usability testing • Part 5: Show and tell, Q&A 2
  4. 4. Who the f*&# are we? 3 Kyle Outlaw GXD at Razorfish Clients: Mercedes-Benz, Smart Car, Motorola, UNIQLO, AXE Specialties: responsive design, digital commerce Twitter: @koutlaw Rachel Lovinger *Special Guest/timecop* XD at Razorfish Clients: Mercedes, EMC, The Hollywood Reporter, Travel Channel, MetLife, American Red Cross Specialties: content strategy, content modeling Twitter: @rlovinger
  5. 5. Some Questions for You!
  6. 6. Part 1 The Death of Wireframes and the Rise of the Prototype 5
  7. 7. We <3 wireframes, but they are quickly becoming obsolete!
  8. 8. But why?
  9. 9. 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 • Others?? 8
  10. 10. But what will replace them?
  11. 11. 10 Enter the Prototype.
  12. 12. 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. 11 Source: Wikipedia
  13. 13. Advantages to Prototyping the UX 12 • 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 • Kills fewer trees
  14. 14. There are several categories • Proof-of-Concept Prototype • Form Study Prototype • User Experience Prototype • Visual Prototype • Functional Prototype (a.k.a Working Prototype) 13 Source: Wikipedia
  15. 15. Who is the audience? • Full internal team (UX, visual designers, tech) • Third party vendors • The client and other stakeholders • Real users 14
  16. 16. The Spectrum of Fidelity 15 Medium HighLow Sketches on paper. Cool/wow factor is low. Wireframes or sketches, the prototype is ‘clickable’ but not much more interactivity than that. Fully functional, but usually a subset of features, the most complex functionality. Also $$$
  17. 17. 16 Caution: Set Expectations on Fidelity!
  18. 18. Some popular tools
  19. 19. 18
  20. 20. 19
  21. 21. 20
  22. 22. 21
  23. 23. 22
  24. 24. And many more…
  25. 25. How do they stack up?
  26. 26. 25 Emily Schwartzman’s Awesome Evaluation kpcb.com/design/prototyping-tools-as-analyzed-by-emily-schwartzman
  27. 27. But there is no substitute for trying these yourselves and picking the best one for your project.
  28. 28. Anyway, who should own the prototype?
  29. 29. • It's often cost prohibitive to get a technologist just for prototyping • You don't need to know code to do it! • It's a better simulation of the end product! • Clients will get that it's not the final product!* • UX is the glue for product design – the focal point • We still need a deliverable! UX designers should own it!
  30. 30. The prototype shows how it will work. “Design is not just what it looks like or feels like. Design is how it works.” –Steve Jobs, Patron Saint of User Experience Practitioners
  31. 31. Any questions so far?
  32. 32. Part 2 Okay let’s do this! 31
  33. 33. Product Brief and Sketching 32 • In this part of the workshop we're going to solve a quasi-real world problem. There are two challenges, each table has a product brief A or B). • Just to keep things simple we're going to pick a single form factor - smart phone. Can be an app or mobile web, up to you. • Introduce yourselves to your team mates. • Take a look at your (intentionally vague) product brief!
  34. 34. The Teams* 33 • Slayer • System of a Down • Anthrax • Metallica • Pantera • Megadeth * Yes you may change your team name. Just let us know!
  35. 35. Product Brief 1 34 Create a Smartphone app that does the following: We’ve all been on road trips where one individual (often unintentionally) monopolizes the music selection. It can make for a tense ride. This app allows drivers to create a listening room. Each passenger would be able to help build the playlist from their smartphone, with an equal number of picks and vetoes given to each, depending on the length of the drive and number of passengers. Picks would rotate as the ride progresses. Each listener would be able to veto a pick, but the song would only be skipped if over half of the voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would not count towards anyone’s veto count. The game would take on a strategic element when conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride. (Matt Burton via Evolver.fm).
  36. 36. Product Brief 2 35 Create a Smartphone app that does the following: This quick image-to-sound generator would use pictures from your smartphone’s camera. Take a picture, and the image’s properties would be converted into control data for a sound generator. Say, for example, the amount of blue in a picture would determine the frequency of a particular oscillator. The synth could also “play back” the pictures from top to bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky over green grass, you’d get a clip that starts with a lot of high frequency sound that moves lower over time. Every kind of data about the picture could also be translated into sound in this same manner for nice, complex results. This would just be a quick, fun way to create sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends pictures and sounds. (Andy Cush via Evolver.fm)
  37. 37. Product Brief and Sketching (cont.) 36 • Spend 15 minutes discussing how to approach this request. • Sketch out some key screens (15 min). • We’re shooting for low fidelity prototypes here.
  38. 38. Remember: it’s not an art contest! 37
  39. 39. Any questions before we start?
  40. 40. Clock’s ticking… 39
  41. 41. Time’s up! 40
  42. 42. Now… 41 • Designate one person on your team (whoever has the best smartphone camera!) to take a picture of your sketches. • Designate someone from your team to be the prototype owner. Email the photo to them so that they can have it on their desktop. • If you need help taking pictures of your sketches we can help you during break.
  43. 43. Now… 42 • Designate one person on your team (whoever has the best smartphone camera!) to take a picture of your sketches. If you need help taking pictures of your sketches we can help you during break. • Designate someone from your team to be the prototype owner. Email the photo to them so that they can have it on their desktop. • If you need help taking pictures of your sketches we can help you during break. Break Time
  44. 44. Part 3 Quick prototyping tutorial using Invision App 43
  45. 45. Why Invision App? • Easy to learn (not just UX, creative, client) • Well designed! (Great UX) • Using it currently for various Razorfish clients • Again, encourage testing other tools first, depends on the project 44
  46. 46. 45 Getting Started • Go to invisionapp.com • Username: kyle.outlaw [at] razorfish.com • Password: SXSW2015 • Or give us your email and we will add you to the project!*
  47. 47. 46 Step 2: Find Your Project Folder (A-E)
  48. 48. 47 Step 3: Upload a picture of your sketch
  49. 49. 48 Step 4: Check Resolutions
  50. 50. 49 Step 5: Arrange your screens
  51. 51. 50 Step 5: Set hotspots
  52. 52. 51 Step 5: Set hotspots
  53. 53. Test the flow with your team, make any revisions
  54. 54. Other cool stuff you can do
  55. 55. 54 Step 5: Set hotspots
  56. 56. 55 Step 5: Set hotspots
  57. 57. 56 Step 5: Set hotspots
  58. 58. 57 Step 5: Set hotspots
  59. 59. 58 Step 5: Set hotspots
  60. 60. 59 Step 5: Set hotspots
  61. 61. 60 Step 5: Set hotspots
  62. 62. 61 Step 5: Set hotspots
  63. 63. 62 Step 5: Set hotspots
  64. 64. Part 4 Guerrilla-style Usability Testing 63
  65. 65. Prototyping on the fly 64 From formal and guerilla usability testing
  66. 66. Goals for usability testing 65 • Evaluate your product (easy, fast, satisfying?) • See how real people use it, in their environment • Test any assumptions or hypotheses you have about the design
  67. 67. Designate one person from your table to go to another table (different challenge) and take them through your app.
  68. 68. Document the feedback. Bonus points, add comments to the project.
  69. 69. Part 5 Show and tell 68
  70. 70. Call for volunteers! 69 • What was your challenge? • How did you solve it? • How was your overall experience? • Is this something you could see using in your design process?
  71. 71. 70 Q+A
  72. 72. Epilogue: Some House-cleaning 71 • Please take our survey! • If you have questions after this class, contact me at kyle.outlaw [at] razorfish.com
  73. 73. Official Playlist for this Workshop 72 http://spoti.fi/1GOKavN
  74. 74. Thanks!!
  75. 75. Appendectomy 74
  76. 76. Product Brief for Team Pantera Create a Smartphone app that does the following: Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where one individual (often unintentionally) monopolizes the music selection. It can make for a tense ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a listening room. Each passenger would be able to help build the playlist from their smartphone, with an equal number of picks and vetoes given to each, depending on the length of the drive and number of passengers. Picks would rotate as the ride progresses. Each listener would be able to veto a pick, but the song would only be skipped if over half of the voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would not count towards anyone’s veto count. The game would take on a strategic element when conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride. (Matt Burton via Evolver.fm). http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
  77. 77. Product Brief for Team Slayer Create a Smartphone app that does the following: Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where one individual (often unintentionally) monopolizes the music selection. It can make for a tense ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a listening room. Each passenger would be able to help build the playlist from their smartphone, with an equal number of picks and vetoes given to each, depending on the length of the drive and number of passengers. Picks would rotate as the ride progresses. Each listener would be able to veto a pick, but the song would only be skipped if over half of the voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would not count towards anyone’s veto count. The game would take on a strategic element when conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride. (Matt Burton via Evolver.fm). http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
  78. 78. Product Brief for Team System of a Down Create a Smartphone app that does the following: Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where one individual (often unintentionally) monopolizes the music selection. It can make for a tense ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a listening room. Each passenger would be able to help build the playlist from their smartphone, with an equal number of picks and vetoes given to each, depending on the length of the drive and number of passengers. Picks would rotate as the ride progresses. Each listener would be able to veto a pick, but the song would only be skipped if over half of the voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would not count towards anyone’s veto count. The game would take on a strategic element when conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride. (Matt Burton via Evolver.fm). http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
  79. 79. Product Brief for Team Metallica Create a Smartphone app that does the following: Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s camera. Take a picture, and the image’s properties would be converted into control data for a sound generator. Say, for example, the amount of blue in a picture would determine the frequency of a particular oscillator. The synth could also “play back” the pictures from top to bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky over green grass, you’d get a clip that starts with a lot of high frequency sound that moves lower over time. Every kind of data about the picture could also be translated into sound in this same manner for nice, complex results. This would just be a quick, fun way to create sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends pictures and sounds. (Andy Cush) http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
  80. 80. Product Brief for Team Anthrax Create a Smartphone app that does the following: Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s camera. Take a picture, and the image’s properties would be converted into control data for a sound generator. Say, for example, the amount of blue in a picture would determine the frequency of a particular oscillator. The synth could also “play back” the pictures from top to bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky over green grass, you’d get a clip that starts with a lot of high frequency sound that moves lower over time. Every kind of data about the picture could also be translated into sound in this same manner for nice, complex results. This would just be a quick, fun way to create sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends pictures and sounds. (Andy Cush) http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
  81. 81. Product Brief for Team Megadeth Create a Smartphone app that does the following: Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s camera. Take a picture, and the image’s properties would be converted into control data for a sound generator. Say, for example, the amount of blue in a picture would determine the frequency of a particular oscillator. The synth could also “play back” the pictures from top to bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky over green grass, you’d get a clip that starts with a lot of high frequency sound that moves lower over time. Every kind of data about the picture could also be translated into sound in this same manner for nice, complex results. This would just be a quick, fun way to create sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends pictures and sounds. (Andy Cush) http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/

×