• Save
Shredding the Wireframe: Intro to Rapid UX Prototyping
Upcoming SlideShare
Loading in...5

Shredding the Wireframe: Intro to Rapid UX Prototyping



This presentation/workshop covers: ...

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)



Total Views
Views on SlideShare
Embed Views



2 Embeds 6

https://twitter.com 3
http://www.slideee.com 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Overflow Cafe staff likes your presentation, thank you.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • (K) – Invision App functionality <br /> (J) – Features and content being shown in prototype <br />
  • (K) – Invision App functionality <br /> (J) – Features and content being shown in prototype <br />
  • (K) <br />
  • (K) – Invision App functionality <br /> (J) – Features and content being shown in prototype <br />
  • (K) – Invision App functionality <br /> (J) – Features and content being shown in prototype <br />
  • (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 Shredding the Wireframe: Intro to Rapid UX Prototyping Presentation Transcript

  • Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish Photo source: Musician Buzz
  • 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
  • But first…introduce yourself
  • What is UX? 3
  • 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)
  • Our Common Enemy 5 Source: Screenshots of Despair http://screenshotsofdespair.tumblr.com/
  • 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
  • Origins of the Term 7 Source: Businessweek
  • Rooted in 8 • Architecture • Graphic design • Industrial design • Human Factors
  • Also heavily inspired by 9 • Film • Animation • Comics
  • 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
  • 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
  • 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
  • Some Deliverables
  • Ecosystem Diagram 15 c c
  • User Journeys 16 c c c
  • Site Map 17 c
  • Wireframes 18 c
  • We <3 wireframes, but they are quickly becoming obsolete.
  • 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 Development Processes are Evolving
  • 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
  • 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 And we need some new tools
  • 25 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 concept or process or to act as a thing to be replicated or learned from. 26 Source: Wikipedia Photo source: Steve Jurvetson, Flickr
  • 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
  • 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
  • The Fidelity Spectrum 29 Low Medium High Photo sources: Cesar Astudillo, Flickr, Invision App, Razorfish Emerging Experiences
  • 30 Set Expectations on Prototype Fidelity
  • Some Popular Tools 31
  • 32
  • 33
  • 34
  • 35
  • 36 Case Study: Razorfish Tech Summit App
  • 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
  • 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
  • The Gimbal Beacon 39
  • 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 Sketching the Experience
  • 42 Application Map
  • 43 Sketching the Experience
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • Testing: Early and Often 51 Formal and guerilla usability testing
  • But What About the Spec? 52
  • 53 Plays well with Box or Dropbox
  • Thanks!! Photo sources: Dustin Gaffke, Flickr
  • 55 Q+A