Shredding the Wireframe: Intro to Rapid UX Prototyping

download Shredding the Wireframe: Intro to Rapid UX Prototyping

If you can't read please download the document

Transcript of Shredding the Wireframe: Intro to Rapid UX Prototyping

Shredding the Wireframe: Intro to Rapid UX Prototyping

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

Photo source: Musician Buzz

0

AgendaWhat is UX? (Lets make sure we are on the same page here)Example deliverablesLimitations of wireframes/embracing the prototypeSome awesome tools (Invision App, Justinmind, POP)Case study: Razorfish Tech Summit AppWhat about the spec? Q+A1

Photo source: MC Quinn, Flickr

1

But firstintroduce yourself

2

What is UX?3

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 designIt 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)

4

Our Common Enemy5

Source: Screenshots of Despairhttp://screenshotsofdespair.tumblr.com/

5

Our Patron Saint6

Design is not just what it looks like or feels like. Design is how it works.

Steve Jobs, Patron Saint of User Experience Practitioners

6

Origins of the Term7

Source: Businessweek

7

Rooted in8ArchitectureGraphic designIndustrial designHuman Factors

8

Also heavily inspired by9FilmAnimationComics

9

The Process10

1. Get to know users

2. Analyze user tasks and goals

3. Establish requirements

4. Prototype ideas

5. Test

Rinse and Repeat

10

How We Measure SuccessEffectiveness how easily can users achieve their goalsEfficiency how fast can they do itSatisfaction Experience = good/bad? (Would they share it with others?)

11

11

12

12

3 Key Practices in UX13Research Knowing the userInformation Architecture + Interaction DesignSketching the experience

Content StrategyPlanning, development, and management of content

Photo sources: CannedTuna, Flickr; Martin Stabe, Flickr; Baldiri, Flickr

13

Some Deliverables

14

Ecosystem Diagram15

cc

15

User Journeys16

ccc

16

Site Map17

c

17

Wireframes18c

18

We