81
Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish

Shredding the Wireframe with Rapid UX Prototyping

Embed Size (px)

Citation preview

Page 1: Shredding the Wireframe with Rapid UX Prototyping

Shredding the WireframeIntro to Rapid UX PrototypingKyle Outlaw / Group Experience Director @Razorfish

Page 2: Shredding the Wireframe with Rapid UX Prototyping

2

To Shred */SHred/*

• 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

Page 3: Shredding the Wireframe with Rapid UX Prototyping

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

3

Page 4: Shredding the Wireframe with Rapid UX Prototyping

Who the f*&# are we?4

Kyle Outlaw

GXD at RazorfishClients: Mercedes-Benz, Smart Car, Motorola, UNIQLO, AXESpecialties: responsive design, digital commerceTwitter: @koutlaw

Rachel Lovinger*Special Guest/timecop*XD at RazorfishClients: Mercedes, EMC, The Hollywood Reporter, Travel Channel, MetLife, American Red CrossSpecialties: content strategy, content modelingTwitter: @rlovinger

Page 5: Shredding the Wireframe with Rapid UX Prototyping

Some Questions for You!

Page 6: Shredding the Wireframe with Rapid UX Prototyping

Part 1The Death of Wireframes and the Rise of the Prototype

6

Page 7: Shredding the Wireframe with Rapid UX Prototyping

We <3 wireframes, but they are quickly becoming obsolete!

Page 8: Shredding the Wireframe with Rapid UX Prototyping

But why?

Page 9: Shredding the Wireframe with Rapid UX Prototyping

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??

Page 10: Shredding the Wireframe with Rapid UX Prototyping

But what will replace them?

Page 11: Shredding the Wireframe with Rapid UX Prototyping

11

Enter the Prototype.

Page 12: Shredding the Wireframe with Rapid UX Prototyping

12What 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.

Source: Wikipedia

Page 13: Shredding the Wireframe with Rapid UX Prototyping

13

Advantages to Prototyping the UX• 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

Page 14: Shredding the Wireframe with Rapid UX Prototyping

14

There are several categories

• Proof-of-Concept Prototype

• Form Study Prototype

• User Experience Prototype

• Visual Prototype

• Functional Prototype (a.k.a Working Prototype)

Source: Wikipedia

Page 15: Shredding the Wireframe with Rapid UX Prototyping

15

Who is the audience?

• Full internal team (UX, visual designers, tech)

• Third party vendors

• The client and other stakeholders

• Real users

Page 16: Shredding the Wireframe with Rapid UX Prototyping

16

The Spectrum of Fidelity

Medium HighLowSketches 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 $$$

Page 17: Shredding the Wireframe with Rapid UX Prototyping

17

Caution: Set Expectations on Fidelity!

Page 18: Shredding the Wireframe with Rapid UX Prototyping

Some popular tools

Page 19: Shredding the Wireframe with Rapid UX Prototyping

19

Low-Fi

Page 20: Shredding the Wireframe with Rapid UX Prototyping

20

Medium-Fi

Page 21: Shredding the Wireframe with Rapid UX Prototyping

21

High-Fi

Page 22: Shredding the Wireframe with Rapid UX Prototyping

22

High-Fi

Page 23: Shredding the Wireframe with Rapid UX Prototyping

23

AI??

Page 24: Shredding the Wireframe with Rapid UX Prototyping

And many more…

Page 25: Shredding the Wireframe with Rapid UX Prototyping

How do they stack up?

Page 26: Shredding the Wireframe with Rapid UX Prototyping

26Emily Schwartzman’s Awesome Evaluation

kpcb.com/design/prototyping-tools-as-analyzed-by-emily-schwartzman

Page 27: Shredding the Wireframe with Rapid UX Prototyping

But there is no substitute for trying these yourselves and

picking the best one for your project.

Page 28: Shredding the Wireframe with Rapid UX Prototyping

Anyway, who should own the prototype?

Page 29: Shredding the Wireframe with Rapid UX Prototyping

• 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!

Page 30: Shredding the Wireframe with Rapid UX Prototyping

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

Page 31: Shredding the Wireframe with Rapid UX Prototyping

Any questions so far?

Page 32: Shredding the Wireframe with Rapid UX Prototyping

Part 2Okay let’s do this!

32

Page 33: Shredding the Wireframe with Rapid UX Prototyping

33

Product Brief and Sketching• 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!

Page 34: Shredding the Wireframe with Rapid UX Prototyping

34

The Teams*• Slayer

• System of a Down

• Anthrax

• Metallica

• Pantera

• Megadeth

* Yes you may change your team name. Just let us know!

Page 35: Shredding the Wireframe with Rapid UX Prototyping

35

Product Brief 1Create 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).

Page 36: Shredding the Wireframe with Rapid UX Prototyping

36

Product Brief 2Create 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)

Page 37: Shredding the Wireframe with Rapid UX Prototyping

37

Product Brief and Sketching (cont.)• Spend 15 minutes discussing how to approach this request.

• Sketch out some key screens (15 min).

• We’re shooting for low fidelity prototypes here.

Page 38: Shredding the Wireframe with Rapid UX Prototyping

38

Remember: it’s not an art contest!

Page 39: Shredding the Wireframe with Rapid UX Prototyping

Any questions before we start?

Page 40: Shredding the Wireframe with Rapid UX Prototyping

40

Clock’s ticking…

Page 41: Shredding the Wireframe with Rapid UX Prototyping

41

Time’s up!

Page 42: Shredding the Wireframe with Rapid UX Prototyping

42

Now…• 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.

 

Page 43: Shredding the Wireframe with Rapid UX Prototyping

43

Now…• 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

Page 44: Shredding the Wireframe with Rapid UX Prototyping

Part 3Quick prototyping tutorial using Invision App

44

Page 45: Shredding the Wireframe with Rapid UX Prototyping

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

Page 46: Shredding the Wireframe with Rapid UX Prototyping

46

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!*

Page 47: Shredding the Wireframe with Rapid UX Prototyping

47

Step 2: Find Your Project Folder (A-E)

Page 48: Shredding the Wireframe with Rapid UX Prototyping

48

Step 3: Upload a picture of your sketch

Page 49: Shredding the Wireframe with Rapid UX Prototyping

49

Step 4: Check Resolutions

Page 50: Shredding the Wireframe with Rapid UX Prototyping

50

Step 5: Arrange your screens

Page 51: Shredding the Wireframe with Rapid UX Prototyping

51

Step 5: Set hotspots

Page 52: Shredding the Wireframe with Rapid UX Prototyping

52

Step 5: Set hotspots

Page 53: Shredding the Wireframe with Rapid UX Prototyping

Test the flow with your team, make any revisions

Page 54: Shredding the Wireframe with Rapid UX Prototyping

Other cool stuff you can do

Page 55: Shredding the Wireframe with Rapid UX Prototyping

55

Step 5: Set hotspots

Page 56: Shredding the Wireframe with Rapid UX Prototyping

56

Step 5: Set hotspots

Page 57: Shredding the Wireframe with Rapid UX Prototyping

57

Step 5: Set hotspots

Page 58: Shredding the Wireframe with Rapid UX Prototyping

58

Step 5: Set hotspots

Page 59: Shredding the Wireframe with Rapid UX Prototyping

59

Step 5: Set hotspots

Page 60: Shredding the Wireframe with Rapid UX Prototyping

60

Step 5: Set hotspots

Page 61: Shredding the Wireframe with Rapid UX Prototyping

61

Step 5: Set hotspots

Page 62: Shredding the Wireframe with Rapid UX Prototyping

62

Step 5: Set hotspots

Page 63: Shredding the Wireframe with Rapid UX Prototyping

63

Step 5: Set hotspots

Page 64: Shredding the Wireframe with Rapid UX Prototyping

Part 4Guerrilla-style Usability Testing

64

Page 65: Shredding the Wireframe with Rapid UX Prototyping

65

Prototyping on the fly

From formal and guerilla usability testing

Page 66: Shredding the Wireframe with Rapid UX Prototyping

66

Goals for usability testing• 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

Page 67: Shredding the Wireframe with Rapid UX Prototyping

Designate one person from your table to go to another table

(different challenge) and take them through your app.

Page 68: Shredding the Wireframe with Rapid UX Prototyping

Document the feedback. Bonus points, add comments to the

project. 

Page 69: Shredding the Wireframe with Rapid UX Prototyping

Part 5Show and tell

69

Page 70: Shredding the Wireframe with Rapid UX Prototyping

70

Call for volunteers!• 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?

Page 71: Shredding the Wireframe with Rapid UX Prototyping

71

Q+A

Page 72: Shredding the Wireframe with Rapid UX Prototyping

72

Epilogue: Some House-cleaning • Please take our survey!

• If you have questions after this class, contact me at kyle.outlaw [at] razorfish.com

Page 73: Shredding the Wireframe with Rapid UX Prototyping

Official Playlist for this Workshop73

http://spoti.fi/1GOKavN

Page 74: Shredding the Wireframe with Rapid UX Prototyping

Thanks!!

Page 75: Shredding the Wireframe with Rapid UX Prototyping

Appendectomy

75

Page 76: Shredding the Wireframe with Rapid UX Prototyping

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/

Page 77: Shredding the Wireframe with Rapid UX Prototyping

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/

Page 78: Shredding the Wireframe with Rapid UX Prototyping

Product Brief for Team System of a DownCreate 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/

Page 79: Shredding the Wireframe with Rapid UX Prototyping

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/

Page 80: Shredding the Wireframe with Rapid UX Prototyping

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/

Page 81: Shredding the Wireframe with Rapid UX Prototyping

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/