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