Shredding the Wireframe

Понравилась презентация – покажи это...

Слайд 0

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

Слайд 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

Слайд 2

But first…introduce yourself

Слайд 3

What is UX? 3

Слайд 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)

Слайд 5

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

Слайд 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

Слайд 7

Origins of the Term 7 Source: Businessweek

Слайд 8

Rooted in 8 Architecture Graphic design Industrial design Human Factors

Слайд 9

Also heavily inspired by 9 Film Animation Comics

Слайд 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

Слайд 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

Слайд 12


Слайд 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

Слайд 14

Some Deliverables

Слайд 15

Ecosystem Diagram 15 c c

Слайд 16

User Journeys 16 c c c

Слайд 17

Site Map 17 c

Слайд 18

Wireframes 18 c

Слайд 19

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

Слайд 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

Слайд 21

21 Development Processes are Evolving

Слайд 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

Слайд 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

Слайд 24

24 And we need some new tools

Слайд 25

25 Enter the Prototype

Слайд 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

Слайд 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

Слайд 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

Слайд 29

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

Слайд 30

30 Set Expectations on Prototype Fidelity

Слайд 31

Some Popular Tools 31

Слайд 32


Слайд 33

33 Medium-Fi

Слайд 34

34 Medium-Fi

Слайд 35

35 High-Fi

Слайд 36

36 Case Study: Razorfish Tech Summit App

Слайд 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

Слайд 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

Слайд 39

The Gimbal Beacon 39

Слайд 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

Слайд 41

41 Sketching the Experience

Слайд 42

42 Application Map

Слайд 43

43 Sketching the Experience

Слайд 44


Слайд 45


Слайд 46


Слайд 47


Слайд 48


Слайд 49


Слайд 50


Слайд 51

Testing: Early and Often 51

Слайд 52

But What About the Spec? 52

Слайд 53

53 Plays well with Box or Dropbox

Слайд 54

Thanks!! Photo sources: Dustin Gaffke, Flickr

Слайд 55

55 Q+A