Shredding the Wireframe

If you like this presentation – show it...

Slide 0

Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish Photo source: Musician Buzz

Slide 1

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

Slide 2

But first…introduce yourself

Slide 3

What is UX? 3

Slide 4

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)

Slide 5

Our Common Enemy 5 Source: Screenshots of Despair http://screenshotsofdespair.tumblr.com/

Slide 6

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

Slide 7

Origins of the Term 7 Source: Businessweek

Slide 8

Rooted in 8 Architecture Graphic design Industrial design Human Factors

Slide 9

Also heavily inspired by 9 Film Animation Comics

Slide 10

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

Slide 11

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

Slide 12


Slide 13

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

Slide 14

Some Deliverables

Slide 15

Ecosystem Diagram 15 c c

Slide 16

User Journeys 16 c c c

Slide 17

Site Map 17 c

Slide 18

Wireframes 18 c

Slide 19

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

Slide 20

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

Slide 21

21 Development Processes are Evolving

Slide 22

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

Slide 23

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

Slide 24

24 And we need some new tools

Slide 25

25 Enter the Prototype

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

The Fidelity Spectrum 29 Photo sources: Cesar Astudillo, Flickr, Invision App, Razorfish Emerging Experiences

Slide 30

30 Set Expectations on Prototype Fidelity

Slide 31

Some Popular Tools 31

Slide 32


Slide 33

33 Medium-Fi

Slide 34

34 Medium-Fi

Slide 35

35 High-Fi

Slide 36

36 Case Study: Razorfish Tech Summit App

Slide 37

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

Slide 38

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

Slide 39

The Gimbal Beacon 39

Slide 40

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

Slide 41

41 Sketching the Experience

Slide 42

42 Application Map

Slide 43

43 Sketching the Experience

Slide 44


Slide 45


Slide 46


Slide 47


Slide 48


Slide 49


Slide 50


Slide 51

Testing: Early and Often 51

Slide 52

But What About the Spec? 52

Slide 53

53 Plays well with Box or Dropbox

Slide 54

Thanks!! Photo sources: Dustin Gaffke, Flickr

Slide 55

55 Q+A